一、为什么要学习TS
1、对比JS
| TypedScript | JavaScript |
|---|---|
| JS的超集，用于解决大型项目的代码复杂性 | 一种脚本语言 |
| 强类型，支持静态和动态模型 | 动态弱类型语言 |
| 可在编译期间发现并纠正错误 | 只能在运行时发现错误 |
| 不允许改变变量的数据类型 | 变量可以被赋成不同类型 |
TypeScript是JS的超集，即TS包含JS
- 包含于兼容所有JS特性， 支持共存
- 支持渐进式引入与升级
2、TS带来了什么
- 类型安全
- 下一代JS特性
- 完善的工具链
不仅是一门语言，更是生产力工具
3、TypeScript推荐
二、TS基础
1、基础类型
- boolean、number、string
- undefine、null
- any、unknow、void
- never
- 数组类型[]
- 元组类型tuple
2、函数类型
定义：TS定义函数类型时要定义输入参数类型和输出类型
输入参数：参数支持可选参数和默认参数
输出参数：输出可以自动推断，没有返回值时，默认void类型
函数重载：名称相同但参数相同，可以通过重载支持多种类型
3、interface
定义：接口是为了定义对象类型
特点：
- 可选属性： ?
- 只读属性： readonly
- 可以描述函数类型
- 可以描述自定义类型
接口非常灵活duck typing
4、类
定义：写法和JS差不多，增加了一些定义
特点：
- 增加了public、p定义rivate、protected修饰符
- 抽象类：
- 只能被继承，不能被实例化
- 作为基类，抽象方法必须被子类实现
- interface约束类，使用implements关键字
三、TS进阶
1、高阶类型
- 联合类型 |
- 交叉类型 &
- 类型断言
- 类型别名（type VS interface）
类型别名
定义：给类型起别名
相同点：
- 都可以定义对象和函数
- 都允许继承
差异点：
- interface是TS用来定义对象的，type是用来定义别名方便使用
- type可以定义基本类型，interface不行
- interface可以合并重复声明，type不行
2、什么时候需要泛型
关键点：可重用性
使用泛型来创建可重用的组件，这样一个组件可以支持多种类型的数据，用户可以以自己的数据类型来使用组件，即泛用性更强。
例如有一个函数，不使用泛型的话，必须挨个写出传参类型和返回类型（或者any）但如果使用泛型，就可以更为简便的写出传参类型
function p(arg : string | number):string | number{
console.log(arg)
return arg
}//只能传string和number
function p(arg : any):any{
console.log(arg)
return arg
}
function p<T>(arg : T):T{
console.log(arg)
return arg
}
1. 使用any
简单粗暴，任何类型都可以，但是失去了TS类型保护的优势。
2. 使用泛型
不预先指定具体的类型，而是在使用的时候指定类型限制。
泛型虽然也是任意类型，但是保证了传入类型和返回类型的一致性。
3、基础操作符
- 关键字keyof，获取所有键
- typeof,获取所有型
- extends,泛型约束
- T[K],索引访问
- 关键字in，遍历枚举类型
- 关键字 ?， 通过设定对象可选选项，即可自动推导出子集类型
4、常用工具类型
- Partial<T>:将类型属性变为可选
- Required<T>:将类型属性变为必选
- Readonly<T>:将类型属性变为只读
TypeScript提供了从旧类型中创建新类型的一种方式——映射类型。 在映射类型里，新类型以相同的形式去转换旧类型里每个属性。 （直接写就行，TS内置了）
四、实战
1、声明文件
- declare：三方书库需要类型声明文件
- .d.ts：定义文件声明
- @types:三方库TS类型包
- tsconfig.json:定义TS的配置
2、泛型约束后端接口类型
interface API{
'/b/d': {
id:number
},
'/b/c': {
id:number
comment:string
}
}
function request<T extends keyof API, obj :API[T]{
renturn axios.post(url,obj)
}
request('/b/c',{
id: 1
comment:'cd'
})
可能会出现的错误
-
路径错误
-
参数错误
不存在该参数，参数类型对应不上等
