TypeScript-进阶知识

// 联合类型和类型保护
interface Dog {
  fly: Boolean
  bark: () => {}
}
interface Bird {
  fly: Boolean
  sing: () => {}
}
function trainAnial(animal: Dog | Bird) { // 使用 '|' 操作符表示联合类型
  if (animal.fly) {
    (animal as Bird).sing() // 使用 'as' 进行类型断言
  } else {
    (animal as Dog).bark() // 使用 'as' 进行类型断言
  }
}
除了上面使用 'as' 类型断言的方式进行类型保护还可以使用 in、typeof、instanceof语法去做类型保护 // interface 不能使用 instanceof
----------------------------------------------------------------------------------------------
// 枚举
enum Status {
  OFFLINE = 1, // 不赋值默认从 0 开始
  ONLINE,
  DELETE
}
// 常量枚举可以提升性能，还有一种是计算枚举不能写 const
const enum Status {
  OFFLINE = 1, // 不赋值默认从 0 开始
  ONLINE,
  DELETE
}
function getResult(status) {
  if (status === Status.OFFLINE) {
    return 'OFFLINE'
  } else if (status === Status.ONLINE) {
    return 'ONLINE'
  } else if (status === Status.DELETE) {
    return 'DELETE'
  }
  return 'ERROR'
}
console.log(getResult(Status.OFFLINE)) // OFFLINE
console.log(getResult(1)) // OFFLINE
枚举和数组使用方式差不多, 可以使用下标方式取值
Status[1] === OFFLINE
Status[2] === ONLINE
Status[3] === DELETE
----------------------------------------------------------------------------------------------
// 泛型 generic 泛指的类型
1. 函数:
    function join<T, P>(first: T, second: Array<P>) : T { // Array<P> === P[]
      return first
    }
    const join = <T, P>(first: T, second: Array<P>): T => {
      return first
    }
    join<number, string>(1, ['2'])
    T 指的是泛型的名称, 随便定义, 上面函数的意思是它接收一个任意类型的数据, 返回值也是任意类型
    在调用函数的时候可以显式的声明是 <number> 类型, 也可以让 ts 自行推断, 即不声明
    函数中可以写多个泛型, 调用时可以写 'interface'
    Array<P> 表示接收数组, 里面的每一项是泛型, 也可以写成 P[]
    泛型约束，可以给泛型通过 extends 继承 interface 实现泛型约束
    function join<T extends { x: number }>(params: T): T { return params }
2. 类:
    interface Item {
      name: string
    }
    class DataManager<T extends Item>{ // class DataManager<T extends number | string>
      constructor(private data: T[]) {}
      getItem(index: number): string {
        return this.data[index].name
      }
    }
    const data = new DataManager({ name: 'chenj'  })
3. keyof: 相当于 Object.keys()，得到的是键的联合类型
    interface Person {
      name: string
      age: number
      gender: string
    }
    class Teacher {
      constructor(private info: Person) {}
      getInfo<T extends keyof Person>(key: T) {
        return this.info[key]
      }
    }
----------------------------------------------------------------------------------------------
// 命名空间 namespace
namespace components {
  class Header {
    constructor() {
      console.log('Header')
    }
  }
  export class Footer {
    constructor() {
      console.log('Footer')
    }
  }
}
///<reference path='./components.ts /> 使用三个斜杠表示引用关系结合第 4 点
namespace Home {
  export class Page {
    constructor() {
      new components.Footer()
    }
  }
}
1. 如果不使用 'namespace' 编译的后的代码会多出很多全局变量
2. 而使用了 'namespace' 只有加了 export 的才能通过 Home.Footer 进行访问
3. 可以写多个命名空间, 但是之间不需要在代码里声明引用关系，
   但是需要在 tsconfig.json 文件中配置 outFile 使得编译成一个输出文件而不是每个文件都输出
   配置了 outFile 就不能使用 commonjs 和 ES6 模块规范
4. 如果是不同的文件则需要通过 <reference> 引入
----------------------------------------------------------------------------------------------
// import 模块化
1. 和 js 的模块化一样, 需要配合 webpack 进行 amd 或其他模块规范的解析
2. 使用命名空间会导致变量查找麻烦问题, 可以使用模块化进行模块拆分
----------------------------------------------------------------------------------------------
// parcel 编译 ts
1. parcel 相当于是 webpack 的 devServer
2. npm install parcel@next
3. 在 package.json 的 script 中写 "dev": "parcel index.html"
4. 在 html 中可以直接引用 ts 文件
----------------------------------------------------------------------------------------------
// .d.ts 理解
1. 在 ts 中引入 js 写的npm包需要安装 @type/包名 的依赖即 .d.ts 文件
2. 在 .d.ts 文件中使用 declare 关键字定义全局变量或函数或对象
    declare var $: (param: () => void) => void // 全局变量
    declare function $(selector: () => void): void // 全局函数
    declare namespace $ { // 全局对象
      namespace fn {
        class init {}
      }
    }
3. 模块化
    declare module 'jquery' {
      var $: (param: () => void) => void // 全局变量
      function $(selector: () => void): void // 全局函数
      namespace $ { // 全局对象
        namespace fn {
          class init {}
        }
      }
      export = $
    }
----------------------------------------------------------------------------------------------
// 装饰器, 本身是一个函数, 通过 @ 符合使用, 可能会报错是实验性语法, 需要打开 tsconfig.json 的配置
// @ 后的函数相当于是把类扩展了, 接收的参数就是装饰的类
// @decorator class A {} 相当于 class A {} A = decorator(A) || A
1. 类的装饰器
    普通写法
      function decorator1(constructor: any) { // 类的装饰器接收的参数是构造函数
        constructor.prototype.getName = () => {
          console.log('chenj')
        }
        console.log('decorator1')
      }
      function decorator2(constructor: any) { // 类的装饰器接收的参数是构造函数
        constructor.prototype.getName = () => {
          console.log('chenj')
        }
        console.log('decorator2')
      }
      @decorator1 @decorator2 class Test {
        name: string
        constructor(name: string) {
          this.name = name
          console.log('name')
        }
      }
      会先输出 'name' 再输出 'decorator2' 再输出 'decorator1', 执行顺序从右往左, 从下往上
      跟实例化没关系, 没实例化也会执行, 执行一次, 在构造函数之后
    高级写法
      function decorator() {
        return function<T extends new (...args: any[]) => any>(constructor: T) {
          return class extends constructor {
            name = 'chenj'
          }
        }
      }
      const Test = decorator()(
        class {
          name: string
          constructor(name: string) {
            this.name = name
          }
        }
      )
2. 类的方法装饰器
    方法分为普通方法和静态方法, 都会接收三个参数 target、key即方法名、descriptor相当于属性描述符
    普通方法的第一个参数 target 对应的是类的 prototype
    静态方法的第一个参数 target 对应的是类的构造函数
    function getNameDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
      descriptor.writable = true
      descriptor.value = function() {
        return 'chenj'
      }
    }
    class Test {
      name: string
      constructor(name: string) {
        this.name = name
      }
      @getNameDecorator getName() {
        return this.name
      }
    }
3. 类的方法的参数装饰器
    只接收两个参数, 没有 descriptor
    function paramDecorator(target: any, key: string, paramIndex: number) {
      console.log(target)
      console.log(key)
      console.log(paramIndex)
    }
    class Test {
      getName(@paramDecorator name: string) {
        console.log(name)
      }
    }
3. 类的getter、setter装饰器
    和类的方法装饰器差不多, 跟普通方法一样接收三个参数
    function visitDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
      descriptor.writable = false
    }
    class Test {
      private _name: string
      constructor(name: string) {
        this._name = name
      }
      get name() {
        return this._name
      }
      @visitDecorator
      set name(name: string) {
        this._name = name
      }
    }
4. 类的属性装饰器
    只接收两个参数, 没有 descriptor
    function nameDecorator(target: any, key: string): any {
      target[key] = 'chenj2' // 这样修改的是原型上的 name 而不是实例上的 name
      const descriptor: PropertyDescriptor = {
        writable = false
      }
      return descriptor
    }
    class Test {
      @nameDecorator
      name = 'chenj'
    }
----------------------------------------------------------------------------------------------
// 加号和减号
1. '-?是去掉类型中属性后面的?，整个Required的实际效果是去掉T类型中所有属性键后面的?，让所有属性变成必填的'
2. 示例：
  type Required<T> = {
    [P in keyof T]-?: T[P]
  }
  type Person = {
    name: string;
    age?: number;
  }

  // 结果：{ name: string; age: number; }
  type result = Required<Person>
----------------------------------------------------------------------------------------------
// keyof 和 in
1. keyof和in经常会连在一起使用，当它们连在一起使用时，通常表示一个迭代的过程
2. 在TS中，keyof T这段代码表示获取T类型中所有属性键，这些属性键组合成一个联合类型，例如：
  type Person = {
    name: string;
    age: number;
  }
  // 'name' | 'age'
  type result = keyof Person
3. TS中的keyof T，它有点类似JavaScript中的Object.keys()，它们的共同点都是获取属性键的集合，
   只不过keyof T得到的结果是一个联合类型，而Object.keys()得到的是一个数组
4. in操作符的右侧通常跟一个联合类型，可以使用in来迭代这个联合类型，如下：
  // 仅演示使用
  in 'name' | 'age' | 'sex'
  'name' // 第一次迭代结果
  'age'  // 第二次迭代结果
  'sex'  // 第三次迭代结果
5. 根据keyof和in的特点，我们可以撰写一些辅助工具，这里以Readonly为例
  type Readonly<T> = {
    readonly [P in keyof T]: T[P]
  }
  type Person = {
    name: string;
    age: number;
  }
  // 结果：{ readony name: string; readonly age: number; }
  type result = Readonly<Person>
----------------------------------------------------------------------------------------------
// typeof
1. TS中的typeof，可以用来获取一个JavaScript变量的类型，通常同于获取一个对象或者一个函数的类型，如下：
  const add = (a: number, b: number): number => {
    return a + b
  }
  const obj = {
    name: 'AAA',
    age: 23
  }

  // 结果：(a: number, b:number) => number
  type t1  = typeof add
  // 结果：{ name: string; age: number; }
  type t2 = typeof obj
----------------------------------------------------------------------------------------------
// never
1. never类型表示永远不会有值的一种类型
2. 如果一个函数抛出了一个错误，那么这个函数就可以用never或者void来表示其返回值，如下：
  function handlerError(message: string): never {
    throw new Error(message)
  }
  function handlerError(message: string): void {
    throw new Error(message)
  }
3. 关于never的另外一个知识点是：如果一个联合类型中存在never，那么实际的联合类型并不会包含never，如下：
  // 定义
  type test = 'name' | 'age' | never
  // 实际
  type test = 'name' | 'age'
----------------------------------------------------------------------------------------------
// extends
1. extends关键词，一般有两种用法：类型约束和条件类型
2. 类型约束
  1. 类型约束经常和泛型一起使用：
    // 类型约束
    U extends keyof T
  2. keyof T是一个整体，它表示一个联合类型。U extends Union这一整段表示U的类型被收缩在一个联合类型的范围内
3. 条件类型
  1. 常见的条件类型表现形式如下:
    T extends U ? 'Y' : 'N'
  2. 我们发现条件类型有点像JavaScript中的三元表达式，事实上它们的工作原理是类似的，例如：
    type res1 = true extends boolean ? true : false                  // true
    type res2 = 'name' extends 'name'|'age' ? true : false           // true
    type res3 = [1, 2, 3] extends { length: number; } ? true : false // true
    type res4 = [1, 2, 3] extends Array<number> ? true : false       // true
  3. 在条件类型中，有一个特别需要注意的东西就是：分布式条件类型，如下：
    // 内置工具：交集
    type Extract<T, U> = T extends U ? T : never;
    type type1 = 'name'|'age'
    type type2 = 'name'|'address'|'sex'

    // 结果：'name'
    type test = Extract<type1, type2>

    // 推理步骤
    'name'|'age' extends 'name'|'address'|'sex' ? T : never
    step1： ('name' extends 'name'|'address'|'sex' ? 'name' : never) => 'name'
    step2:  ('age' extends 'name'|'address'|'sex' ? 'age' : never)   => never
    result: 'name' | never => 'name'
----------------------------------------------------------------------------------------------
// infer
1. infer关键词的作用是延时推导，它会在类型未推导时进行占位，等到真正推导成功后，它能准确的返回正确的类型
2. 为了更好的理解infer关键词的用法，我们使用ReturnType这个例子来说明，ReturnType是一个用来获取函数返回类型的工具
  type ReturnType<T> = T extends (...args: any) => infer R ? R : never

  const add = (a: number, b: number): number => {
    return a + b
  }
  // 结果: number
  type result = ReturnType<typeof add>
3. 上述代码解释
  1. T extends (...args: any) => infer R：如果不看infer R，这段代码实际表示：T是不是一个函数类型
  2. (...args: any) => infer R：这段代码实际表示一个函数类型，其中把它的参数使用args来表示，
     把它的返回类型用R来进行占位。 如果T满足是一个函数类型，那么我们返回其函数的返回类型，也就是R；
     如果不是一个函数类型，就返回never
----------------------------------------------------------------------------------------------
// & 符号
1. 在TS中有两种类型值得我们重点关注：联合类型和交叉类型
2. 联合类型一般适用于基本类型的"合并"，它使用|符号进行连接，如下：
  type result = 'name' | 1 | true | null
3. 而交叉类型则适用于对象或者函数的"合并"，它使用&符号进行连接，如下：
  type result = T & U
4. T & U表示一个新的类型，其中这个类型包含T和U中所有的键，这和JavaScript中的Object.assign()函数的作用非常类似
----------------------------------------------------------------------------------------------
// ts 内置的方法
1. Pick（选取）
  1. Pick表示从一个类型中选取指定的几个字段组合成一个新的类型，用法如下：
    type Person = {
      name: string;
      age: number;
      address: string;
      sex: number;
    }
    // 结果: { name: string; address: string; }
    type PickResult = Pick<Person, 'name' | 'address'>
  2. 实现方式
    type MyPick<T, K extends keyof T> = {
      [P in K]: T[P]
    }
2. Readonly（只读）
  1. Readonly是用来让所有属性变为只读，其用法为：
    type Person = {
      readonly name: string;
      age: number;
    }

    // 结果：{ readonly name: string; readonly age: number; }
    type ReadonlyResult = MyReadonly<Person>
  2. 实现方式
    type MyReadonly<T> = {
      readonly [P in keyof T]: T[P]
    }
3. Exclude（排除）
  1. Exclude是排除的意思，它从T类型中排除属于U类型的子集，可以理解成取T对于U的差集，用法如下：
    // 结果：'name'|'age'
    type ExcludeResult = Exclude<'name'|'age'|'sex', 'sex'|'address'>
  2. 实现方式
    type MyExclude<T, U> = T extends U ? never : T
4. Parameters（函数的参数类型）
  1. Parameters是用来获取一个函数的参数类型的，其中获取的结果是一个元组，用法如下：
    const add = (a: number, b: string): void => {}
    // [number, string]
    type result = MyParameters<typeof add>
  2. 实现方式
    type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer R) => any ? R : never
5. Partial（可填）和 Required（必填）
  1. Partial和Required一个是让所有属性可填、另外一个是让所有属性必填，用法如下：
    type Person = {
      name: string;
      age?: number;
    }

    // 结果: { name?: string; age?: number; }
    type PartialResult = MyPartial<Person>

    // 结果: { name: string; age: number; }
    type RequiredResult = MyRequired<Person>
  2. 实现方式
    type MyPartial<T> = {
      [P in keyof T]?: T[P]
    }
    type MyRequired<T> = {
      [P in keyof T]-?: T[P]
    }
6. Record（构造）
  1. Record<K, T>用来将K的每一个键(k)指定为T类型，这样由多个k/T组合成了一个新的类型，用法如下：
    type keys = 'Cat'|'Dot'
    type Animal = {
      name: string;
      age: number;
    }
    type Expected = {
      Cat: {
        name: string;
        age: number;
      };
      Dog: {
        name: string;
        age: number;
      }
    }

    // 结果：Expected
    type RecordResult = Record<keys, Animal>
  2. 实现方式
    type MyRecord<k extends keyof any, T> = {
      [P in K]: T
    }
7. Extract（交集）
  1. Extract<T, U>用来取联合类型T和U的交集，用法如下：
    type Person = {
      name: string;
      age: number;
      address: string;
    }

    // 结果：'age'|'address'
    type ExtractResult = Extract<keyof Person, 'age'|'address'|'sex'>
  2. 实现方式
    type MyExtract<T, U> = T extends U ? T : never
8. ReturnType（函数返回类型）
  1. ReturnType<T>是用来获取一个函数的返回类型的，例如：
    function getRandom (): number {
      return Math.random()
    }
    // 结果：number
    type result = ReturnType<typeof getRandom>
  2. 实现方式
    type ReturnType<T> = T extends (...args: any) => infer R ? R : never
9. Omit（移除）
  1. Omit是移除的意思，它用来在T类型中移除指定的字段，用法如下：
    type Person = {
      name?: string;
      age: number;
      address: string;
    }

    // 结果：{ name?: string; age: number; }
    type OmitResult = Omit<Person, 'address'>
  2. 实现方式
    1. Omit可以借助在上面已经实现过的Pick和Exclude配合来实现，如下：
    // Omit实现
    type MyOmit<T, K> = MyPick<T, MyExclude<keyof T, K>>