[TOC] #### 1. TypeScript 是什么 ? --- **编程语言的类型: 静态类型语言、动态类型语言** 静态类型语言的数据类型是在编译期间检查的。也就是说，在编写程序时就要声明变量的数据类型。如: Java 动态类型语言是指在运行期间才去做数据类型检查的语言。也就是说，永远不用给变量指定数据类型。如: Python、PHP **TypeScript 究竟是什么 ?** typescript 官网: [https://typescriptlang.org](https://typescriptlang.org) TypeScript 是 Type 和 JavaScript 的结合，TypeScript 就是将不看重类型的动态语言 JavaScript，变成关注类型的静态语言 #### 2. 为什么要学习 TypeScript ? --- **程序更容易理解** ts 可以约定函数或方法输入输出的参数类型，外部条件等 **效率更高** 在不同的代码块和定义中进行跳转、代码补全、接口提示 **更少的错误** 编译期间能够发现大部分错误，杜绝一些比较常见的错误 #### 3. 安装 TypeScript --- 全局安装 typescript ```bash npm install -g typescript ``` 查看版本 ```bash tsc -V ``` 创建 helloworld.ts ```javascript const hello = (name: string) => { } ``` 编译 ```bash tsc helloworld.ts ``` 补充: 命令行运行 ts 文件需要安装 ts-node 包 ```sh npm install -g ts-node ``` 然后就可以使用 ts-node 命令运行 ts 文件了 ```sh ts-node helloworld.ts ``` #### 4. 原始数据类型和 any 类型 --- 最新的 ESMAScript 标准定义了八种数据类型 七种原始数据类型: number、string、boolean、undefined、null、BigInt、Symbol。另外一种是 Object 注意: undefined、null 是所有类型的子类型，所以下面写法是正确的 ```javascript let age: number = undefined ``` 顶级类型: any，可以接收所有数据类型的数据 ```javascript let all: any = null; all = true; all = 123456; all = 'liang'; ``` #### 5. 数组和元组(tuple) --- 声明一个 number 类型的数组，数组元素必须为 number 类型 ```javascript let numArr: number[] = [1, 2, 3] ``` 元组: 给数组元素分别指定数据类型 ```javascript // 定义元组时，数组元素个数不能超过声明的类型个数 let user: [string, number] = ['liang', 23] // 但可以追加数组元素，追加的数据类型必须在声明的类型中，也就是 string, number user.push(10) ``` #### 6. Interface 接口 --- Interface 不是 JavaScript 中的概念，而是 ts 作类型检查用的，所以 ts 在编译后，Interface 是不会被转译过去的 interface 描述对象类型 ```javascript // 定义接口 interface Person { // 只读属性 readonly id: number, // 必须属性 name: string, // 可选属性 age?: number, } // 变量使用接口 let user: Person = { id: 1, name: "liang", // age: 23, // 可选属性,定义不定义都可以 // like: "code", // 对象文字可以只指定已知属性，但 “like”不在接口“Person”中 } // user.id = 2 // 报错: 因为 id 是只读属性, 无法修改 ``` #### 7. 函数中声明数据类型 --- 普通的声明函数，函数的结果返回 number 类型 ```javascript /** * 可选参数z: 省略时为 undefined */ function add(x: number, y: number, z?: number): number { if (typeof z === 'number') { return x + y + z } else { return x + y } } ``` 函数表达式声明的函数返回的是一个函数类型  ```javascript const add = (x: number, y: number, z?: number): number => { if (typeof z === 'number') { return x + y + z } else { return x + y } } // 在 ts 中 : 后面都是在声明类型，和实际代码逻辑无关 let abc: (x: number, y: number, z?: number) => number = add // interface 描述函数类型 interface ISum { (x: number, y: number, z?: number): number } let def: ISum = add ``` #### 8. 类型推论 (type inference) --- 官方文档: [https://www.typescriptlang.org/docs/handbook/type-inference.html](https://www.typescriptlang.org/docs/handbook/type-inference.html) 当我们把数据赋给变量时，没有指定数据类型，ts 会自动推测出一个类型，如下图:  因为 ts 已经将变量 x 的类型推断为 number，那么当我们给变量 x 赋值一个 string 类型的数据则会提示错误  #### 9. 联合类型 --- ```javascript // 联合类型 union types let numOrString: number | string numOrString.toString() // toString() 是 number|string 的共有方法 // numOrString.length // 报错: length 不是共有属性, string 有，但 number 没有 ``` #### 10. 泛型 Generics --- 基础使用 ```javascript function echo<T>(arg: T): T { return arg } const str: string = 'liang' const num: number = 123456 console.log(str, num); ``` 交换数组中两个元素的位置 ```javascript function swap<T, U>(tuple: [T, U]): [U, T] { return [tuple[1], tuple[0]] } const res1 = swap(['123', 456]) console.log(res1); ``` 约束泛型 ```javascript interface ILength { length: number } // 约束泛型 function echoWithArr<T extends ILength>(args: T): T { console.log(args.length); return args } echoWithArr('12345') echoWithArr(['1', 2]) echoWithArr({width: 10, length: 30}) ``` #### 11. 类型别名 ---- 类型别名的作用: 复杂的类型名简单化 ```javascript // 普通方式 let sum: (x: number, y: number) => number const result1 = sum(1, 2) // 类型别名 // 语法格式: type 别名 = 全名 type PulsType = (x: number, y: number) => number let sum2: PulsType const result2 = sum2(1, 2) // 联合类型的别名 type strOrNum = string | number let data3: strOrNum data3 = 23 data3 = 'liang' // data3 = true // 报错 ``` #### 12. 字面量 ---- ```javascript const str: 'name' = 'name' // const str: 'name' = 'name2' // 报错 const number: 1 = 1 type Directions = 'Up' | 'Down' | 'Left' | 'Right' let toWhere: Directions = 'Left' ``` #### 13. 交叉类型 ```javascript interface IName { name: string } type IPerson = IName & {age: number} let person: IPerson = {name: 'liang', age: 23} ```