TypeScript的一些高级方法

85 阅读2分钟

1. Partial

Partial的作用是将一个类型中的所有属性转化为可选属性

如图

interface IPerson {
  name: string
  age: number
}

// 例如
const p1:IPerson = {
  name: 'ctwood',
  age: 18
} 

这里少写一个属性都是会报错的(PS: 当然你也可以使用可选符号)

const p2: Partial<IPerson> = {
  name: 'ctwood'
  // age: 18  // 这个属性写不写都不会报错
}

以上的操作相当于

interface IType {
  key1: string
  key2: number
}
转化为了

interface IType2 {
  key1?: string | undefined
  key2?: number | undefined
}

与Partial相对应的就是Required二者的用法相同,结果相反。Partial是将一个类型中的所有属性转化为可选属性,而Required则是将一个类型中的所有属性转化为必选属性

2. Pick

Pick的作用是从一个类型的属性中挑选一或多个属性赋给当前参数,pick本身也具有挑选的意思。

// 这是一个常规的对象类型
interface IPerson {
  name: string
  age: number
  height: number
}
// 现在我们要从中取出一个或几个类型 该怎么做呢
// 这是最初的类型
const p1: IPerson = {
  name: 'ctwood'
  age: 18
  height: 1.88
}
// 这是取后的类型
const p1WithPick: Pick<IPerson, 'name'> {
  name: 'ctwood',
}

const p2WithPick: Pick<IPerson, 'name' | 'age'> {
  name: 'ctwood',
  age: 18
}

pick方法在只取一个属性的时候直接在范型的第二个参数后使用字符串类型即可,取多个的时候使用联合类型。

3. Record

Record的作用是将一个类型的属性映射到另一个类型,接收两个类型参数,第一个是key的类型,第二个是value的类型。我们直接上代码演示:

// value的类型
interface IPerson {
  name: string
  age: number
  height: number
}

// key的类型
type IPersonKey = 'ctwood' | '_ctwood'

const p1: Record<IPersonKey, IPerson> = {
  ctwood: {
    name: 'ctwood'
    age: 18
    height: 1.88
  },
  _ctwood: {
    name: '_ctwood'
    age: 17
    height: 1.87
  },
}

Record其实我们也可以实现一个,它的原理并不复杂:
type Record<K extends string | symbol, T> = {[P in K]: T}

4. ReadOnly和ReadonlyArray

这个比较简单一笔带过了,就是将一个类型的属性转化为只读属性.

也就是说后续这些属性不能被修改:

type Readonly<T> = { readonly [K in keyof T]: T[K]}

ReadonlyArray顾名思义则是针对数组使用的:

Readonly<string[]> === ReadonlyArray<string>