TypeScript tricks 技巧

Question

Utility Types

Omit

Omit 可以忽略 对象类型 中的某些属性

type User = {
  name: string
  age: number
  id: string
}

type SimpleUser = Omit<User, "name" >

等同于

type SimpleUser = {
     age: number;
     id: string;
}

自身实现,利用 Exclude 剔除属性

type OwnOmit<T , P extends keyof T> = {
  [K in Exclude<keyof T, P>]: T[K]
}

Pick

Pick 的功能和 Omit 相反， Pick 筛选出 对象类型 中需要的属性

type SimpleUser = Pick<User, "name" >

等同于

type SimpleUser = {
     name: string;
}

本身的实现也很简单

type OwnPick<T , P extends keyof T> = {
  [K in P]: T[K]
}

Exclude

Omit 的实现有用到 Exclude, 它的作用就是将第一个类型中，符合第二个类型中条件的类型剔除

对于 对象类型等，第二个类型是第一个类型的子集也可以达到效果

type TextExclude = Exclude<'number' | 'age', 'age'> // 'number'

自身实现

type MyExclude<T, U> = T extends U ? never : T

Extract

Extract 的功能和 Exclude 相反, 它的作用就是将第一个类型中，符合第二个类型筛选的类型保留

type TextExclude = Exclude<'number' | 'age', 'age'> //  'age'

自身实现

type MyExclude<T, U> = T extends U ? T:  never

Partial

Partial 可以让 对象类型 的每个属性变为可选

type UserPartial = Partial<User>

等同于

type UserPartial = {
    name?: string | undefined;
    age?: number | undefined;
    id?: string | undefined;
}

自身实现

type OwnPartial<T> = {
  [K in keyof T]?: T[K]
}

Required

Required 可以让 对象类型 的的每个属性都变为必须

type UserRequired = Required<UserPartial>

等同于

type UserRequired = {
    name: string;
    age: number;
    id: string;
}

Required 的实现 使用了 -? ，语法奇怪但是很好理解

type OwnRequired<T> = {
  [K in keyof T]-?: T[K]
}

Record

Record 可以定义 对象类型 键和值的类型

type A = Record<string, {name: string}>

自身实现

type OwnRecord<Key extends number | string | symbol , Value> = {
  [key in Key]: Value
}

ReturnType

ReturnType 可以返回 函数类型 的返回值类型

function test(username: string, password: string) {
  return { username, password }
}

type TestReturnType = ReturnType<typeof test>

等同于

type TestReturnType = {
    username: string;
    password: string;
}

自身实现

type OwnReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R: unknown

Parameters

Parameters 可以返回 函数类型 的参数类型

function test(username: string, password: string) {
  return { username, password }
}

type TestParameterType = Parameters<typeof test>

等同于

type TestParameterType = [username: string, password: string, age: number]

它的实现也是通过 infer 来进行实现

type OwnParameters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : unknown

Awaited

对于 async 函数或者返回一个 promise 值时， 我们可以通过 Awaited 得到未被 Promise 包裹的类型

async function testUser() {
  return 2
}  


type TestUserResult1 = ReturnType<typeof testUser> // Promise<number>

type TestUserResult = Awaited<ReturnType<typeof testUser>> // number

interface 与 type 区别

1. interface 只能表示对象[函数也是对象哦]，type 都可以
2. interface 可以声明合并
3. type 使用 & 合并
4. 由于声明语句不同， interface 可以直接 export default 声明一起用，type 只能先声明再导出

tsconfig.json

npx tsc --init

生成 tsconfig.json

遇到问题汇总

1. Element 类型不存在 style 属性

使用 HTMLElement 即可。

||= ,&&=,??=

看开源项目时，看到 ||= 的写法，其实从语法上就能大概知道意思。这个语法能够简写很多东西

let b = {}

if(!b.a} {
    b.a = []
}
b.a.push(1)

例如我们对 对象某个属性添加元素时，要先判断是否是数组。利用 ||= 代码就简洁的多

b.a ||= []
b.a.push(1)

除了 ||= ,还有 &&= , ??= .

let b: Record<string, undefined | any[] | number> = {}

b.a ||= [] // b.a || b.a = []
b.c &&= [] // b.c && b.c = []
b.d ??= [] // b.d !== null && b.d !== undefined ? b.d : []