TypeScript 疑难杂症

本文会定期更新，我遇到的觉得值得分享的 TypeScript 问题都会优先更新在 TypeScript 疑难杂症 里

------- 别光顾着收藏，给孩子赏几个赞吧！-------

限制传入对象必须包含某些字段

用于给某个处理特定对象的函数来限制传入参数，尤其是当对象的某些字段是可选项的时候，比如说： test 函数接受的参数类型为：

interface Param {
  key1?: string
  key2?: string
}

这种情况下调用方传入 {} 也可通过类型检测。如果对字段类型没有严格要求，只希望限制必须包含某些字段可以这么做：

type MustKeys = 'key1' | 'key2'
function test<T extends MustKeys extends keyof T ? any : never>(obj: T) {}
test({})
test({ key1: 'a' })
test({ key1: 'a', key2: 1 })

善用 infer 来做类型“解构”

比如你想获取某个被 Promise 包装过的原类型

type PromiseInnerType<T extends Promise<any>> = T extends Promise<infer P>
  ? P
  : never
type Test = PromiseInnerType<Promise<string>> // Test 的类型为 string

其实上面就是 infer 的通常用途。举一反四，任意工具类型都可以用上述原理来做类型“解构”。比如，你还可以写一个 ReturnType 的 Promise 版本，用于获取 Promise 函数的"解构类型"

type PromiseReturnType<T extends () => any> = ReturnType<T> extends Promise<
  infer R
>
  ? R
  : ReturnType<T>

async function test() {
  return { a: 1 }
}

type Test = PromiseReturnType<typeof test> // Test 的类型为 { a: number }

如果你用 React 的话，不难想到可以利用上述原理从一个组件中获取 PropsType。不过，现在你可以直接使用 React.ComponentProps 来拿到

将联合类型转成交叉类型

// https://stackoverflow.com/a/50375286/2887218
type UnionToIntersection<U> = (U extends any
  ? (k: U) => void
  : never) extends ((k: infer I) => void)
  ? I
  : never

// { a: string } | { b: number } => { a: string } & { b: number }
type Test = UnionToIntersection<{ a: string } | { b: number }>

将交叉类型“拍平”

这个一般用于希望调用方能得到更清爽的类型提示，比如你的某个函数的参数类型限制为：

type Param = { a: string } & { b: number } & { c: boolean }

在调用的时候，实时提示会巨长，不方便查看，所以你可以用如下工具类型：

type Prettify<T> = [T] extends [infer U] ? { [K in keyof U]: U[K] } : never
type Param = Prettify<{ a: string } & { b: number } & { c: boolean }>

Param 将等同于如下类型：

type Param = { a: string; b: number; c: boolean }

从一个函数数组中获取所有函数返回值的合并类型

函数数组为：

function injectUser() {
  return { user: 1 }
}

function injectBook() {
  return { book: '2' }
}

const injects = [injectUser, injectBook]

如何实现一个工具类型来获取上面这个injects数组中每个函数返回值的合并类型呢？即： { user: number, book: string }

type UnionToIntersection<U> = (U extends any
  ? (k: U) => void
  : never) extends ((k: infer I) => void)
  ? I
  : never
type Prettify<T> = [T] extends [infer U] ? { [K in keyof U]: U[K] } : never
type InjectTypes<T extends Array<() => object>> = T extends Array<() => infer P>
  ? Prettify<UnionToIntersection<P>>
  : never

type Test = InjectTypes<typeof injects> // Test 的类型为 { user: number, book: string }

利用上面的原理，你可以很容易地实现这个需求：

实现一个 getInjectData 函数，它接受若干个函数参数，返回值为这些函数返回对象的合并结果

function getInjectData<T extends Array<() => any>>(injects: T): InjectTypes<T> {
  const data: any = {}
  for (let inject of injects) Object.assign(data, inject())
  return data
}
getInjectData([injectUser, injectBook]) // { user: number, book: string }

...args 函数不定参数 + 泛型

接着上面的getInjectData继续看，有个小缺点是你必须得给它传一个数组，而不能传不定参数（如果你用下面的方式实现的话：

function getInjectData<T extends () => any>(...injects: T[]): InjectTypes<T[]> {
  const data: any = {}
  for (let inject of injects) Object.assign(data, inject())
  return data
}
getInjectData(injectUser, injectBook) // Argument of type '() => { book: string; }' is not assignable to parameter of type '() => { user: number; }'

原因是 TypeScript 会取第一个参数作为 injects 数组元素的类型。解决方案是：

function getInjectData<T extends Array<() => any>>(
  ...injects: T
): InjectTypes<T> {
  const data: any = {}
  for (let inject of injects) Object.assign(data, inject())
  return data
}
getInjectData(injectUser, injectBook) // { user: number, book: string }

原理是 TypeScript 会为使用了不定参数运算符的每个参数自动解包数组泛型和其一一映射

引用某个类型的子类型

type Parent1 = { fun<T>(): T }
type Parent2 = { [key: string]: number }
type Child1 = Parent1['fun']
type Child2 = Parent2['']

但是好像没有办法直接“固化”上面fun函数的泛型，就像这样：

type Child1 = Parent1['fun']<number>

如果找到好办法我再来更新吧。。

动态更改链式调用的返回值类型

type Omit<T, K> = Pick<T, Exclude<keyof T, K>> // TypesScript 3.5 已自带

class Chain<T = number> {
  fun1() {
    return this as Omit<this, 'fun1'>
  }

  fun2(arg: T) {
    return (this as unknown) as Chain<string>
  }

  fun3() {
    return this
  }
}

如上代码，希望实现调用 fun1 后，不能再调用 fun1，调用 fun2 后，之后 fun2 只允许传 string。

然后 测试一下 会发现在调用完 fun2 后，fun1 又可以调用了，并不符合预期。怎么永久剔除掉 fun1 呢？如下代码：

type Omit<T, K> = Pick<T, Exclude<keyof T, K>> // TypesScript 3.5 已自带

class Chain<T = number> {
  fun1<P extends Partial<Chain<T>>>(this: P) {
    return this as Omit<P, 'fun1'>
  }

  fun2<P extends Partial<Chain<T>>>(this: P, arg: T) {
    return (this as unknown) as Pick<
      Chain<string>,
      Extract<keyof P, keyof Chain<string>>
    >
  }

  fun3<P>(this: P) {
    return this
  }
}

不过坏处是所有对外的方法你都得显示声明一遍 this 的类型才可以维持这份 "动态类型"。尤其是在方法内部需要调用 this 中的其他数据时候，往往得各种 as any。如果你有更好的办法，欢迎留言~

操作两个字段相近的对象

const obj1 = { a: 1, b: 2, c: 3 }
const obj2 = { a: 1, b: 2, d: 3 }
const keys = ['a', 'b']
for (let key of keys) {
  console.log(obj1[key])
  console.log(obj2[key])
}

上述代码在开启了 noImplicitAny 后是会报错的，那除了 @ts-ignore 如何正确地声明 keys 的类型呢？如下代码：

const obj1 = { a: 1, b: 2, c: 3 }
const obj2 = { a: 1, b: 2, d: 3 }
const keys: Array<keyof typeof obj1 & keyof typeof obj2> = ['a', 'b']

这个问题相对简单些，当时想着 @ts-ignore 能支持 block 就好了，可惜目前为止还没支持，可以关注这个 issue

让对象的类型就是它的“字面类型”

const obj = { a: 1, b: '2' }

上面的代码显然 obj 的类型会被自动推导成：

interface Obj {
  a: number
  b: string
}

但有时候希望 obj 的类型就是它的字面意思：

interface Obj {
  a: 1
  b: '2'
}

可以这样：

const obj = { a: 1, b: '2' } as const

const assertions

如何让泛型不被自动推导，让泛型为必填项

class Test<P> {
  constructor(data: P) {}
}
new Test({ a: 1 }) // P 会被自动推导成 { a: number }

有些时候我们希望别人在使用 Test 这个类的时候必须得显式传入一个泛型才能使用。可以这样：

type NoInfer<T> = [T][T extends any ? 0 : never]
class Test<P = void> {
  constructor(
    data: NoInfer<P> & (P extends void ? 'You have to pass in a generic' : {}),
  ) {}
}

new Test({ a: ' ' }) // err Argument of type '{ a: string; }' is not assignable to parameter of type 'void & "You have to pass in a generic"'.
new Test<{ a: string }>({ a: ' ' }) // ok

利用 NoInfer 这个工具类，泛型函数也同理：

type NoInfer<T> = [T][T extends any ? 0 : never]
function test<P = void>(
  data: NoInfer<P> & (P extends void ? 'You have to pass in a generic' : {}),
) {}

test(1)
test<number>(1)