TS（typeScript）进阶

1.利用keyof将某个interface里的索引全部变为只读，不允许修改（或者全部变为可选/必有）

例子：

interface Person {
    
    
  name?: string
  age: number
  gender: number
}
// 只读
type ReadOnlyType<T> = {
    
       // T 就是要修改的interface Person
  readonly [P in keyof T]: T[P]
}
// 可选
type MayType<T> = {
    
    
  [P in keyof T]?: T[P]
}

// 必有
type MustType<T> = {
    
    
  [P in keyof T]-?: T[P]
}

新增可选 语法糖 Partial 必选语法糖 Required

type MayType = Partial<T> （和上面keyof实现的等效）
type MustType = Required<T>

2.利用keyof将某个interface里的索引全部转为联合类型

例子：

interface Person {
    
    
  name: string
  age: number
  gender: number
}

type ReadOnlyType = keyof Person 

// type ReadOnlyPerson = 'name' | 'age' | 'gender'

3.利用&将两个interface组成一个新的interface，这个新的interface里面必须包含前两个interface的所有索引，缺一不可 ( | 二选一，用得多就不列举了)

例子：

interface Person {
    
    
  name: string
}

interface Son {
    
    
 age: string
}

type NewInterface = Person & Son

// type NewInterface = {
    
    
//    name: string;
//    age: number;
// }

4.利用pick从一个interface中选择索引生成新的interface

类型推导：

// Pick的定义
type Pick<T, K extends keyof T> = {
    
     [P in K]: T[P]; }

例子：

interface Person {
    
    
  name: string
  age: string
  c: string
}


type NewInterface = Pick<Person, 'name' | 'age'>

// type NewInterface = {
    
    
//    name: string;
//    age: string;
// }

5.利用Omit从一个interface中排除部分择索引生成新的interface

类型推导：

// Pick的定义
type Omit<T, K extends string | number | symbol> = {
    
     [P in Exclude<keyof T, K>]: T[P]; }

例子：

interface Person {
    
    
  name: string
  age: string
  c: string
}


type NewInterface = Omit<Person, 'name' | 'age'>

// type NewInterface = {
    
    
//    c: string;
// }

6. 利用InstanceType从一个类里面获取interface

类型推导：

// InstanceType的定义
type InstanceType<T extends abstract new (...args: any) => any> = T extends abstract new (...args: any) => infer R ? R : any

例子：

class A {
    
    
  name: string
  age: string
  c: string
  constructor(name: string, age: string, c: string) {
    
    
    this.name = name
    this.age = age
    this.c = c
  }
}

type NewInterface = InstanceType<typeof A>

// type NewInterface = {
    
    
//    name: string;
//    age: string;
//    c: string;
// }

7. 利用ConstructorParameters从类中获取构造函数constructor的类型

类型推导：

type ConstructorParameters<T extends abstract new (...args: any) => any> = T extends abstract new (...args: infer P) => any ? P : never

例子：

class Person {
    
    
  name: string;
  age: number;
  constructor(name: string, age: number) {
    
    
    this.name = name;
    this.age = age;
  }
}
​
type PT=ConstructorParameters<typeof Person>
// type PT = [name: string, age: number]
​
type ET =ConstructorParameters<ErrorConstructor>
// type ET = [message?: string]
​
type NT =ConstructorParameters<null>
// type NT = unknown[]
​
type AT =ConstructorParameters<any>
// type AT = unknown[]

8. 利用Parameters从函数的参数中推导出类型

类型推导：

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never

例子：

const fn = (a: number, b: string) => {
    
    
    console.log(a);
}

type A = Parameters<typeof fn>
// type A = [a: number, b: string]
const a:A = [1,'1'] 

9. 利用ReturnType从函数的参数中推导出类型

类型推导：

type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never

例子：

const fn = (a: number, b: string) => {
    
    
    console.log(a);
    return [1,'1']
}

type A = ReturnType<typeof fn>
// type A = (string | number)[]
const a:A = [1,'1'] 

看得差不多可以去实践一下

TS进阶实战