TS(typeScript)进阶

8 篇文章 0 订阅

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进阶实战

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值