这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

学习TypeScript

关于TypeScript

2012.10 微软发布了TypeScript第一个版本

特性：

静态类型

1. 可读性增强：基于语法解析TSDoc，ide增强
2. 可维护性增强：在编译阶段暴露大部分错误，使得在多人合作的大型项目中，获得更好的稳定性和开发效率

JS超集

1. 兼容JS特性，支持共存
2. 支持渐进式引入与升级

基础数据类型

1. : string
2. : number
3. : boolean
4. : null
5. : undifined

对象类型

1. 只读类型：readonly id: number（不可在初始化外赋值）
2. 可选类型：id?: number
3. 约束属性、任意类型：[id: string]: any

函数类型

function add(x: number, y: number): number {
    return x + y;
}

数组类型

1. number[]
2. Array<>
3. 元祖表示 [number, string, ...]

其他

1. void
2. any
3. 枚举类型enum（未赋值或单赋值会自动递增）
4. 类型别名type
5. 类型断言as

泛型(不预先指定，使用时确定)

// 函数入参定义前使用简括号表示泛型
function getRepeatArr(target) {
    return new Array(100).fill(target);
}

type IGetRepeatArr = (target: any) => any[];

type IGetRepeatArrR = <T>(target: T) => T[];

// 接口、类、别名中，名称后使用简括号表示泛型
interface / class / type IX<T, U> {
    key: T;
    val: U;
}

泛型约束：

<T extends string>

默认类型

<T = number>

高级类型

1. 联合类型：id: number | string
2. 交叉类型： &
3. 类型保护、类型守卫
4. 对象Record<key, value>
5. Partial
6. keyof 获得取值对象中所有的key
7. in 取值中的一种可能
8. extends可作为类型推断

type IPartial<T extends Record<string, any>> = {
    [P in keyof T]?: T[P]
}

type IReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any

工程应用

1. web——tsconfig.js约束ts定义，webpack loader做语言转换
2. node——手动运行tsc编译，可加入script自动化注入

思考总结

对于现代开发过程中，ts已经逐渐成为了不可缺少开发语言。本次课程分入门和高级两大模块，入门为我们基础开发中需要具备的要求，高级为做较复杂类型定义的场景，因为时间有限，主要讲了几种常用到的高级类型。但是作者根据ts官方定义中高级类型如Partial源码这种形式的讲解让我受益较深。