TypeScript系统学习

基础使用

1. 既是变量声明空间，也是类型声明空间
2. 类型分类：

1. 基本类型：也就是JavaScript中的七种基本类型
2. 对象类型：对象、数组、函数
3. typescript新增类型：any, never, void, unknown, enum

3. 联合类型和交叉类型：类型间的或跟与
4. 断言（as）非空断言（!.）
5. 数组类型定义：type[]，Array<string>
6. 元组类型定义：形式上类似JavaScript中的解构赋值

let arr: [number, string] = [1, 'str'];
arr[2] = 'test'; // ts error

7. 索引签名：

1. 比如后端返回的数据，字段不可能枚举完全

type ObjType = {
  a: string
  b: number
  [index: string]: any
}
const obj: ObjType = {
  a: '11',
  b: 22,
  c: false,
}

2. 也可以给数组设置类型

type ArrayType = {
  [index: number]: any
}
const arr: ArrayType = ['111', 222, false]

8. 函数重载和可调用注解

type FunType = {
  (n: number): number
  key?: string
}
let fun: FunType = (n) => n
fun.key = 'test'

9. 枚举类型（enum）：自定义枚举变量，优化代码可读性，其本质也是一个包装的JavaScript对象
10. 一般在交叉类型的具体内部逻辑中，需要判断实际变量所属类型，利用利用typeof、instanceof、in或是字面量类型来进行判断

接口

• 接口和类型的差异

1. 接口的目标只能用在对象当中
2. 接口可以合并
3. 接口具备继承能力（和Java抽象类差不多）
4. 接口不能映射

字面量类型 keyof typeof

• type的值可以直接存储为一种类型，比如h标签的所有类型值

type HTYPE = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' |

• keyof可以获取一个对象类型的所有关键字

interface A {
  a: string;
  b: number
}
const v: keyof A = // 'a' | 'b'

const obj = {
  a: '111',
  b: 222,
}
const v: keyof typeof obj = // 'a' | 'b'

泛型

1. 函数和接口结合使用

interface A<T> {
  (n?: T): n
  default?: T
}

const fun1: A<string> = (n) => n
fun1(‘111’)
fun1.default = ‘222’

2. 类（class）中使用

class A<T> {
  public n!: T
}

const instance = new A<string>()
instance.n = ‘111’

3. 泛型约束

很多时候，泛型的“T”是已经知道的集中范围内的，就可以对泛型加以约束（extends）

type I = string

class A<T extends I> {
  public n!: T
}
const instance = new A<string>()
instance.n = ‘111’

类

1. 接口（implements）

interface A {
  a: string
  b: number
  fun: (c: string, d: number) => void
}

class B implements A {
  a!: string
  b!: number
  fun: (c: string, d: number) => {}
}

2. 结合泛型

class A<T> {
  a: T
  constructor(a: T) {
    this.a = a
  }
}

new A<string>(‘aaa’)

interface A<T> {
  a: T
  b: number
  fun: (c: T, d: number) => void
}

class B implements A<string> {
  a!: string
  b!: number
  fun: (c: string, d: number) => {}
}

映射

类似于对一个已有类型的“二次开发”

1. 一个例子：对一个已有类型对象的值都设置为只读的

type A = {
  a: string
  b: string
}

type B<T> = {
  readonly [P in keyof T]: T[P]
}
type C = B<A>

2. 一个例子：对于DOM自带的DOMRect类型进行二次自定义

/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly) */
interface DOMRectReadOnly {
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/bottom) */
  readonly bottom: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/height) */
  readonly height: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/left) */
  readonly left: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/right) */
  readonly right: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/top) */
  readonly top: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/width) */
  readonly width: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/x) */
  readonly x: number;
  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRectReadOnly/y) */
  readonly y: number;
  toJSON(): any;
}
/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/DOMRect) */
interface DOMRect extends DOMRectReadOnly {
  height: number;
  width: number;
  x: number;
  y: number;
}

// - remove assign value (-readonlu or -?)...
type EditableDOMRect = {
  -readonly [K in keyof DOMRect]: DOMRect[K];
};

// EditableDOMRect === ↓
type EditableDOMRect = {
  height: number;
  width: number;
  x: number;
  y: number;
  bottom: number;
  left: number;
  right: number;
  top: number;
  toJSON: () => any;
}

条件类型 infer

type C = A extends B ? {} : []
type Exclude<T, U> = T extends U ? never : T

内置工具类型

typescript内置部分类型（具体可以利用编辑器转到定义处查看）

比如完成上述映射第一个例子可以写成

type D = Readonly<A>

常用的如下：

type B = Partial<A>

type B = Readonly<A>

type B = Pick<A, 'a' | 'b'>

type A = Record<'a' | 'b', string>
type A = Record<keyof C, string>

type B = Required<A>

type B = Omit<A, 'a' | 'b'>

type B = Exclude<string | number, string>

type B = Extract<string | number, string>

type B = NonNullable<string | null | undefined>
// B -> string

type FUN = (n: string, m: number) => void
type A = Parameters<FUN>

const test: A = [‘111’, 222];

type FUN = (n: string, m: number) => void
type A = ReturnType<FUN>

const test: A = // void

1. infer关键字 extends关键字

推断类型

type A<T> = T extends Array<infer U> ? U : T

type B = A<Array<string>> // string
type C = A<number> // number