`sudo cnpm i typescript -g` 安装 `tsc --version` 查看版本 `tsc --init `创建一个tsconfig文件    ~~~ //Cannot redeclare block-scoped variable 'name'. //如果代码里有export import 之类的代码，那么这个文件变成一个模块 //export { } //在一个作用域 内部，相同的变量名只能声明一次 export { } let name: string = 'zhufeng'; let age: number = 10; let married: boolean = true; let hobbies: string[] = ['1', '2', '3']; let interests: Array<string> = ['4', '5', '6']; //元组 类似一个数组 它是一个长度和类型都固定的数组 //1 长度固定 2 类型可以不一样 let point: [number, number] = [100, 100]; point[0], point[1]; let person: [string, number] = ['zhufeng', 10]; enum Gender { BOY, GIRL } console.log(`李雷是${Gender.BOY}`); console.log(`MM是${Gender.GIRL}`); /* var Gender2; (function (Gender) { Gender2[Gender2["BOY"] = 0] = "BOY"; Gender2[Gender2["GIRL"] = 1] = "GIRL"; })(Gender2 || (Gender2 = {})); console.log("\u674E\u96F7\u662F" + Gender2.BOY); console.log("MM\u662F" + Gender2.GIRL); */ let Gender2 = { 0: "BOY", 1: "GIRL", "BOY": 0, "GIRL": 1 } let s = Symbol.for('xx'); //数字 字符串 它的值可能会写 let person2 = { gender: Gender.BOY } enum Week { MONDAY = 1, TUESDAY = 'y' } console.log(Week.TUESDAY); //常数枚举 const enum Colors { Red, Yellow, Blue } console.log(Colors.Red, Colors.Yellow, Colors.Blue); //任意类型 anyscript // 第三库没有类型定义 类型转换的时候 数据结构太复杂太灵活 any //ts 为 dom提供了一整套的类型声明 /* let root: HTMLElement | null = document.getElementById('root'); root!.style.color = 'red';//!断言不为空 */ //null undefined // null 空 undefined 未定义 //它们都其它类型的子类型 你可以把它们赋给其它类型的变量 let myname1: string | null = null; let myname2: string | undefined = undefined; let x: number | null | undefined; x = 1; x = undefined; x = null; // void类型 空的 没有 function greeting(name: string): null | void { console.log(`hello ${name}`); return null; } greeting('zhufeng'); //never 永远不 //never是其它类型的子类型，代表不会出现的值 //A function returning 'never' cannot have a reachable end point //在函数内部永远会抛出错误，导致函数无法正常结束 function createError(message: string): never { console.log(1); throw new Error('error'); console.log('end point'); } function sum(): never { while (true) { console.log('hello'); } console.log('end point'); } //| 和 || ，& 和 && 的区别 let num1 = 3 | 5; console.log(num1); let num2 = 3 || 5; console.log(num2); let num3 = 3 & 5; console.log(num3);//1 let num4 = 3 && 5; console.log(num4);//5 let num: string | number //推论 猜 let name2 = 2; name2 = 3; name2 = 4; let name3; name3 = 4; name3 = 'zhufeng'; //包装对象 java装箱和拆箱 c# //自动在基本类型的对象类型之间切换 //1.基本类型上没有方法 //2.在内部迅速的完成一个装箱的操作，把基本类型迅速包装成对象类型，然后用对象来调用方法 let name4: string = 'zhufeng'; //name4.toLocaleLowerCase(); let name44 = new String(name4); name44.toLocaleLowerCase(); //let isOk1: boolean = true; //let isOk2: boolean = Boolean('xx'); //let isOk3: boolean = new Boolean(1); let name5: string | number; name5 = 'zhufeng'; name5.toLowerCase(); name5 = 5; name5.toFixed(3); /* let name7: string | number = 1; let name6: string | number = name7; (name6 as string).toLowerCase(); (name6 as number).toFixed(2); */ //字面量类型 let Gender4: 'Boy' | 'GIRL'; Gender4 = 'Boy'; Gender4 = 'GIRL'; ~~~ ## 3\. 数据类型 ### 3.1 布尔类型(boolean) ~~~ let married: boolean=false; ~~~ ### 3.2 数字类型(number) ~~~ let age: number=10; ~~~ ### 3.3 字符串类型(string) ~~~ let firstname: string='zfpx'; ~~~ ### 3.4 数组类型(array) ~~~ let arr2: number[]=[4,5,6]; let arr3: Array<number>=[7,8,9]; ~~~ ### 3.5 元组类型(tuple) * 在 TypeScript 的基础类型中，元组（ Tuple ）表示一个已知`数量`和`类型`的数组 ~~~ let zhufeng:[string,number] = ['zhufeng',5]; zhufeng[0].length; zhufeng[1].toFixed(2); ~~~ | 元组 | 数组 | | --- | --- | | 每一项可以是不同的类型 | 每一项都是同一种类型 | | 有预定义的长度 | 没有长度限制 | | 用于表示一个结构 | 用于表示一个列表 | ~~~ const animal:[string,number,boolean] = ['zhufeng',10,true]; ~~~ ### 3.6 枚举类型(enum) * 事先考虑某一个变量的所有的可能的值，尽量用自然语言中的单词表示它的每一个值 * 比如性别、月份、星期、颜色、单位、学历 #### 3.6.1 普通枚举 ~~~ enum Gender{ GIRL, BOY } console.log(`李雷是${Gender.BOY}`); console.log(`韩梅梅是${Gender.GIRL}`); enum Week{ MONDAY=1, TUESDAY=2 } console.log(`今天是星期${Week.MONDAY}`); ~~~ #### 3.6.2 常数枚举 * 常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员。 * 假如包含了计算成员，则会在编译阶段报错 ~~~ const enum Colors { Red, Yellow, Blue } let myColors = [Colors.Red, Colors.Yellow, Colors.Blue]; ~~~ ~~~ const enum Color {Red, Yellow, Blue = "blue".length}; ~~~ ### 3.7 任意类型(any) * `any`就是可以赋值给任意类型 * 第三方库没有提供类型文件时可以使用`any` * 类型转换遇到困难时 * 数据结构太复杂难以定义 ~~~ let root:any=document.getElementById('root'); root.style.color='red'; ~~~ ### 3.8 null 和 undefined * null 和 undefined 是其它类型的子类型，可以赋值给其它类型，如数字类型，此时，赋值后的类型会变成 null 或 undefined * strictNullChecks ~~~ let x: number; x = 1; x = undefined; x = null; let y: number | null | undefined; y = 1; y = undefined; y = null; ~~~ ### 3.9 void 类型 * void 表示没有任何类型 * 当一个函数没有返回值时，TS 会认为它的返回值是 void 类型。 * 当我们声明一个变量类型是 void 的时候，它的非严格模式下仅可以被赋值为 null 和 undefined; ~~~ function greeting(name:string):void { console.log('hello',name); } greeting('zfpx'); ~~~ ### 3.10 never类型 never是其它类型(null undefined)的子类型，代表不会出现的值 #### 3.10.1 * 作为不会返回（ return ）的函数的返回值类型 ~~~ // 返回never的函数 必须存在 无法达到（ unreachable ） 的终点 function error(message: string): never { throw new Error(message); } // 由类型推论得到返回值为 never function fail() { return error("Something failed"); } // 返回never的函数 必须存在 无法达到（ unreachable ） 的终点 function infiniteLoop(): never { while (true) {} } ~~~ #### 3.10.2 strictNullChecks * 在 TS 中， null 和 undefined 是任何类型的有效值，所以无法正确地检测它们是否被错误地使用。于是 TS 引入了 --strictNullChecks 这一种检查模式 * 由于引入了 --strictNullChecks ，在这一模式下，null 和 undefined 能被检测到。所以 TS 需要一种新的底部类型（ bottom type ）。所以就引入了 never。 ~~~ // Compiled with --strictNullChecks function fn(x: number | string) { if (typeof x === 'number') { // x: number 类型 } else if (typeof x === 'string') { // x: string 类型 } else { // x: never 类型 // --strictNullChecks 模式下，这里的代码将不会被执行，x 无法被观察 } } ~~~ #### 3.10.3 never 和 void 的区别 * void 可以被赋值为 null 和 undefined的类型。 never 则是一个不包含值的类型。 * 拥有 void 返回值类型的函数能正常运行。拥有 never 返回值类型的函数无法正常返回，无法终止，或会抛出异常。 ### 3.11 类型推论 * 是指编程语言中能够自动推导出值的类型的能力，它是一些强静态类型语言中出现的特性 * 定义时未赋值就会推论成any类型 * 如果定义的时候就赋值就能利用到类型推论 ~~~ let username2; username2 = 10; username2 = 'zhufeng'; username2 = null; ~~~ ### 3.12 包装对象（Wrapper Object） * JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。 * 所有的原始数据类型都没有属性（property） * 原始数据类型 * 布尔值 * 数值 * 字符串 * null * undefined * Symbol ~~~ let name = 'zhufeng'; console.log(name.toUpperCase()); console.log((new String('zhufeng')).toUpperCase()); ~~~ * 当调用基本数据类型方法的时候，JavaScript 会在原始数据类型和对象类型之间做一个迅速的强制性切换 ~~~ let isOK: boolean = true; // 编译通过 let isOK: boolean = Boolean(1) // 编译通过 let isOK: boolean = new Boolean(1); // 编译失败 期望的 isOK 是一个原始数据类型 ~~~ ### 3.13 联合类型 * 联合类型上只能访问两个类型共有的属性和方法 ~~~ let name4: string | number; name4 = 3; name4 = 'zhufeng'; console.log(name4.toUpperCase()); ~~~ ### 3.14 类型断言 * 类型断言可以将一个联合类型的变量，指定为一个更加具体的类型 * 不能将联合类型断言为不存在的类型 ~~~ let name5: string | number; (name5 as number).toFixed(3); (name5 as string).length; (name5 as boolean); ~~~ ### 3.15 字符串、数字、布尔值字面量 ~~~ type Lucky = 1 | 'One'|true; let foo:Lucky = 'One'; ~~~ ### 3.16 字符串字面量 vs 联合类型 * 字符串字面量类型用来约束取值只能是某`几个字符串`中的一个, 联合类型（Union Types）表示取值可以为`多种类型`中的一种 * 字符串字面量 限定了使用该字面量的地方仅接受特定的值,联合类型 对于值并没有限定，仅仅限定值的类型需要保持一致