| 知识分类 | 相应的点 | 对应描述 |
|---|---|---|
| 认识TypeScript | TypeScript | TypeScript是JavaScript的一个超集，强类型的定义。 强类型： 1、规范我们的代码 2、代码编译阶段就能及时发现错误 3、在原生js的基础上加上了一层类型定义 注意： TypeScript无法在浏览器中运行。需要借助编译器，将TS转为JS。 |
| 开发环境配置 | ts | 官网地址 |
| 开发环境 node.js | 搭建代码的运行环境（在官网下载安装即可） | |
| node指令 | node -v查看node版本； 可以用来检查node是否安装成功，如果显示出版本号，则说明安装成功了。 | |
| TypeScript环境 | npm install -g typescript 全局安装TypeScript编译器 | |
| <="" td=""> | tsc -v 查看TypeScript版本； 可以用来检查ts是否安装成功，如果显示出版本号，则说明安装成功了。 | |
| 开发工具 | vscode 支持TypeScript的代码编辑器 | |
| 创建ts文件 | 文件名.ts 以后缀.ts结尾表示TypeScript文件格式。例如：main.ts | |
| 编译ts文件 | tsc xxx.ts 将ts文件编译成js文件，会出现main.js文件。 例如：tsc main.js 编译后会生成main.js文件 | |
| 执行js文件 | node xxx.js 通过node执行js文件。例如：node main.js，执行main.js文件 | |
| TypeScript工作流 | TypeScript工作流 | 写好ts代码后，通过TypeScript编译器编译为js，然后再使用js |
| 初始化项目 | npm init; npm管理项目，npm init执行后， 一直回车使用默认选项， 结束后生成package.json文件 | |
| 安装插件 | npm install --save-dev lite-server； lite-server用于开发环境的轻量级服务器。 此服务器可以根据项目根目录下index.js文件自动部署在localhost:3000上，当编译完成以后会自动刷新页面。 | |
| 依赖安装位置 | devDependencies：依赖只参与项目开发，上线不需要打包到生产环境中; dependencies：依赖参与项目开发，也会打包到生产环境中 | |
| 依赖安装位置 | devDependencies：依赖只参与项目开发，上线不需要打包到生产环境中; dependencies：依赖参与项目开发，也会打包到生产环境中 | |
| 定义变量/常量 | let，const，var | const：声明常量 let：声明变量，解决var带来的作用域困难的问题 var：声明变量 |
| ts基本类型 | number | 数字类型： 1、可以表示整数，浮点数以及正负数 2、写法：let num:number=1； |
| string | 字符串类型： 1、可以用单引号，双引号，以及反引号表示字符串 2、写法:let str:string='imooc' | |
| boolean | 布尔类型： 1、true，false 2、写法：let isTrue=true;会自动映射类型let b:boolean=false;手动映射类型 | |
| Array | 数组： 1、[] 2、数组中可以存放任意类型的数据 3、js中数组的宽容度非常大，而ts也继承了这一点 4、写法：let list1:number[]=[1,2,3,4]let list2:Array=[1,2,3,4]let list3=[1,2,3,4]let list5:any[]=[1,2,"4"]存放任何类型的数据 | |
| tuple | 元祖： 1、写法：let p1:[number,string]=[1,'imooc']2、固定类型，固定长度的数组 | |
| any | 任意类型： 1、不知道是什么类型的时候，可以用any 2、写法：let randomValue :any = 888; 可以修改为任意类型 | |
| unkown | 未知类型： 1、不保证类型，但是能保证类型安全 2、写法： let randomValue:unkown =888 | |
| void | 不存在： 1、函数在没有返回值的时候，为void类型 function fn() : void {} | |
| undefined | 存在，但是没有值： 1、function fn():undefined {return;} 返回值空值 | |
| never | 不能停止： 1、never类型：例如一个函数永远执行不完 function fn(a:string):never{throw{message}} 函数中抛出异常 while循环（执行不完的代码） | |
| 高级类型 | union | |
| literal | ||
| nullable | 可控类型 | |
| 类型适配（类型断言） | Type Assertions | 1、通知typescript进行类型适配的过程就叫做类型断言 2、写法：let message: any; message = 'imooc';message.endsWith('c')(1)方式let ddd = (message).endsWith("c")(2)方式let dd2 = (message as string).endsWith("c")注释：message初始any类型，即使赋值为字符串，也是any类型，无法使用编辑器内置的联想功能，给出字符串相关的属性和方法提示信息。所以需要进行类型适配(message)或者(message as string) |
| 函数类型 | function | 1、基本用法与es6一样 2、参数绑定类型let log = (message: string) => console.log(message)log('imooc')3、使用?可以省略参数，不传值默认为undefinedlet log = (message: string, code?: number) => console.log(message)log('imooc')4、设置参数默认值let log = (message: string, code: number = 0) => console.log(message)log('imooc')注意：不管是可选参数，还是默认参数，都必须在参数列表末尾，按照从后往前的顺序进行排列。 |
| 对象类型 | object | 对象类型： 1、key to type 键类型对。编辑器会自动匹配类型，或者手动进行类型匹配 2、不能使用object来笼统定义{}，调用的时候会报错 3、object类型可以认为是any类型的一个子集 |
| 接口 | interface | 接口：高内聚，低耦合 1、功能相关的事务放在一个集合中形成一个模块，模块之间应该是相互独立的，保持低耦合的状态 2、使用方式：给函数参数定义接口类型interface Point { x: number, y: number }let drawPoint = (point: Point) => { console.log({ x: point.x, y: point.y }) }drawPoint({ x: 23, y: 34 })把所有相关联的属性和方法放在一个集合中 |
| 类 | class | 使用class关键字定义的称之为类。可以使用implements关键字，通过类来实现某个接口interface 1、写法：interface xx{}class x implements xx{}2、js中构造函数不能重载，一个类有且仅有一个constructor。如果实例化的时候不知道传入的值，可以使用?(可选项)，或者赋值默认值 3、访问修饰符（public，private，protected），在声明构造函数的同时，顺便完成成员变量的声明以及初始化 |
| 访问修饰符 | public | 公有的（属性和方法默认是公有的） |
| private | 私有的 1、私有变量一般以下划线开头来表示，例如： _x 2、set和get处理私有变量（编译器版本需要在es5以上） tsc -t es5 xx.ts | |
| protected | 保护的 | |
| 模块 | module | 1、一个文件可以理解为一个模块 2、与es6中的module相似，有两种导入导出方式。模块内的代码需要export导出，然后其他文件中使用import导入 |
| 泛型 | Generics | 1、类型+<> 泛型 2、写法：let lastInArray = (arr: Array) => { return arr[arr.length - 1] }或者let lastInArray = (arr: T[]) => { return arr[arr.length - 1] }const l1 = lastInArray([1, 2, 3, 4])const l2 = lastInArray(['a','s'])3、多泛型let makeTuple = <T, Y>(x: T, y: Y) => [x, y]const v1 = makeTuple(1, 'i') |
| 类型守卫 | Type Guards | |
| 函数重载 | Function overloading | |
| 调用签名 | call signiture | 1、写法：type Add = { (a: number, b: number): number }const add: Add = (a: number, b: number) => { return a + b; }(1)容易扩展，可以改为interface (2)可以加入更多属性描述 (3)可以重载 2、new 配合声明构造函数type Point = { new(x: number, y: number): { x: number; y: number }; }const point: Point = class { constructor(public x: number, public y: number) { } } |
| 索引签名 | index signtrue | 1、通过索引 index访问数据的处理方法叫做索引签名 2、写法： const obj = { hello: "world" } const d = obj['hello']; |
| 只读 | readonly | 举例：function reverseSorted(input: number[]): number[] { return input.sort().reverse(); }const started = [1, 2, 3, 4, 5];const res = reverseSorted(started);console.log(started);console.log(res);直接对input参数进行排序倒置，这样原数组也会改变。 在参数中加readonly，只读，不能改写，修改倒序方式function reverseSorted(input: readonly number[]): number[] { return [...input].sort().reverse(); }const started = [1, 2, 3, 4, 5];const res = reverseSorted(started);console.log(started); console.log(res); |
| 双重断言 | Double Assertion | 类型多的可以赋值给类型少的。例如：type Point2D = { x: number, y: number };type Point3D = { x: number, y: number, z: number };type Person = { name: string; email: string };let point2: Point2D = { x: 0, y: 0 };let point3: Point3D = { x: 10, y: 10, z:10 };let person: Person = { name: 'alex', email: 'alex@imooc.com' };point2 = point3;如果想类型少的赋值给类型多的，可以断言point3 = point2 as Point3D;如果两个不相关的赋值，可以用双重断言point3 = person as any as Point3D; |
| 常量断言 | const Assertion | 定义常量的值为对象，常量的值不能修改，但是对象的内容是可以修改的。为了不修改，可以用常量断言const obj = { name: 'alex' } as const;注意： 1、常量断言，可以用于断言任何一个类型 2、可以把对象中任何的原始类型成员变量都转换为readonly，只读属性 3、数组复杂数据类型，使用常量断言同样可以完成只读类型转化 |
| this | this | 给this进行类型定义function double(this: { value: number }) { this.value = this.value * 2; }const valid = { value: 20, double }valid.double();console.log(valid.value);在函数声明中，this必须是第一个函数参数，this参数在编译过程中会从函数签名中删除掉，编译为js后就不存在了。 |
| typeof | typeof | 检测对象类型。 举例：提取数据类型结构来作为基类const center = { name: 'alex', age: 20 }type A = typeof center;const unit: A = { name: "aa", age: 30 }A类型不需要一个个的去设置了 |
| keyof | keyof | 用法：keyof获取对象中的属性名。 在对象中不存在的属性，编辑器不会有提示，输出结果是undefined。如果想提示，可以用keyof来提取属性名做限制：type Person = { name: string; age: number; location: string; }const alex: Person = { name: 'alex', age: 20, location: "北京" }function getValueByKey(obj:any, key: keyof Person) { const value = obj[key]; return value; }const age = getValueByKey(alex, 'age')const email = getValueByKey(alex, 'email')console.log(age)console.log(email) |
| 类型查找 | lookup types | 从数据中提取类型来做限制type RequestData = { payment: { creditCartNumber: string } }function getPayment(): RequestData["payment"] { return { creditCartNumber: '1234567890' } } |
| 类型映射 | Mapped Types | Readonly是内置函数，具体如下：export type Readonly = { readonly [key in keyof T]: T[key] }使用如下：type Point = { x: string; y: number; z: number; }const center: Readonly = { x: "0", y: 0, z: 0 }center.x = 100; |
| 映射修饰符 | Mapped Modifier | 1、readony和？都可以看做是修饰符 2、 -readonly 会去掉readonly修饰符 -？ 会去掉？修饰符 3、 Parttial是内置函数，具体如下：export type Partial = { [P in keyof T]?: T[P]; } |
总结就先到这吧！ 今日寄语：
春风有信，花开有期。
