乐趣区

关于程序员:TypeScript逆变-条件推断和泛型的应用

1 一个类型问题

有一个名为 test 的函数,它承受两个参数。第一个参数是函数 fn,第二个参数 options 受到 fn 参数的限度。乍一看,这个问题貌似并不简单,不是吗?糊业务的时候,这种不是常见的需要嘛。

“创立一个泛型类型 Test,以确保这两个参数之间存在束缚关系就完事了,睡醒再说”,就这样暗忖着,又昏昏沉沉睡过去,只有那 T extends unknown[]闯入我梦中,飘忽不定,不即不离,暗示着我再次翻车【看题时感觉简略,解题时头大如牛】的命运。

上面咱们先来看看题目:

type InjectorFunction<P> = () => P;

interface Options<P> {injector: InjectorFunction<P>;}

const fn1 = () => 1;
const fn2 = (p: number) => `number is: ${p}!`;
const fn3 = (p: string) => `hello ${p}!`;
const fn4 = (p?: string) => `hello ${p || 'fn4'}!`;

type Test<F extends (...args: any[]) => any = any> = (fn: F, options?: Options<Parameters<F>>) => void;

const test: Test = (fn, options) => {return fn(options?.injector?.());
}

// 定义 Test 函数的类型,使得上面类型成立
test(fn1);                                  // right
test(fn1, { injector: () => {}});          // error, dont need injector
test(fn2, { injector: () => 4 });           // right
test(fn3, { injector: () => 'world' });     // right
test(fn3);                                  // error, options.injector is required
test(fn4);                                  // right
test(fn4, { injector: () => 'test4' });     // right

在持续往下翻阅之前,先来 typescript playground 玩呀,兄弟们。也能够用来配合本文食用哦。

2 题目规定和解法

浏览代码中的正文,咱们能够得出以下题目形容和要求:

思考函数 test,它有两个参数。第一个参数必然是一个函数 fn,而第二个参数 options 受到 fn 束缚,其泛型参数是 fn的参数类型。

  • 如果 fn 没有参数,则 test 不能有第二个参数 options
  • 如果 fn 有一个参数 p,则 test 必须有第二个参数 options
  • 如果 fn 的参数 p 是可选的,则第二个参数 options 也是可选的。
  • options是个泛型 Options<T>T的类型是 fn 的参数 p的类型。

在察看前三个规定后,咱们初步得出了一个相似于上面构造的 test 函数,其中推断参数个数的局部须要提早:

type Test = (...arg: unknown[]) => unknown

咱们晓得,应用泛型类型或条件类型能够帮忙实现参数之间的束缚关系。而题目中曾经定义好的 Test 类型中,type Test<F extends (...args: any[]) => any = any> = (fn: F, options?: Options<Parameters<F>>) => void;options 间接定义为可选的,并不能合乎第一和第二条规定。

咱们须要创立一个名为 Args<T> 的工具类型,它用于动静生成 test 函数的参数。只管咱们目前应用泛型来形容这些参数,然而咱们能够应用伪代码 [FN, Opts] 来临时示意未实现的实现。具体而言,咱们将 fn 参数的类型称为 FN,将 options 参数的类型称为 Opts

type Test = <T>(...arg: Args<T>) => unknown

首先, T 必须是个数组,如果不是数组,那它就没存在的必要了,如果是,咱们先返回两个参数组成的数组好不啦。当初,能够用上后面起的小名了!略西!

type Args<T> = T extends unknown[] ? [FN, Opts] : never

其次,第一个参数必然是 fn,咱们须要判断它的参数形态。先从最简略的 fn 没有参数开始。

type Args<T> = T extends unknown[] ?
    T[0] extends () => number ? [() => number]: [FN, Opts] : never

下一步,咱们须要判断 T[0] 是个带有参数的函数。T[0](arg: SomeType) => unknown吗?如果是,咱们还要把 SomeType 增加到 [FN, Opts]。还记得前文第四个规定吗,小 Opts 是个泛型,是个参数和 FN参数统一的泛型。

在条件类型表达式中,infer 关键字用来申明一个待推断的类型变量,将其用于 extends 条件语句中。这样能够使 TypeScript 推断出特定地位的类型,并将其利用于类型判断和条件分支中。

因而,咱们能够用这个条件语句 T[0] extends (arg: infer P) => string 来示意T[0] 能够赋值给 (arg: infer P) => string。在这个条件语句中,咱们应用 infer P 来申明一个类型变量 P,它用于形容 fn 的参数类型以及 Options<T> 泛型的参数类型。

type Args<T> =
  T extends unknown[] ?
    T[0] extends () => number ? [() => number]:
    T[0] extends (arg: infer P) => string ? [(arg: P) => string, Options<P>] : [FN, Opts]
  : never

在这一步,咱们还须要解决一个问题,即如何判断参数是否为可选类型。

要获取函数的参数,咱们能够应用 TypeScript 内置的 Parameters 类型。

Parameters<T> 类型承受一个函数类型 T,并返回该函数类型的参数类型元组。通过查看 Parameters<T> 元组的长度和元素类型,咱们能够判断参数的个数和类型,并依据须要进行相应解决。

type GetParamsNum<T extends (...args: any) => any> = Parameters<T>['length'];

要判断参数形态是哪种,即有、无或薛定谔的有 / 无(即参数个数能够是 0,也能够是 1,或者是 0 | 1),咱们能够应用以下代码来辨别这三种状况:010 | 1

type GetParamShape<T> =
  [T] extends [0] ? "无" :
  [T] extends [1] ? "有" : "薛定谔的有 / 无"

综上所述,让咱们进一步合成这个分支:T[0] extends (arg: infer P) => string,Args 类型曾经齐全开展,咱们能够失去以下论断:

  • T[0] 可能赋值给 (arg: infer P) => string 时,咱们能够推断出参数类型 P 是函数 T[0] 的参数类型。
  • 通过 Parameters<T[0]>,咱们能够获取函数 T[0] 的参数类型元组。
  • 通过判断 [Parameters<T[0]>['length']] extends[1],咱们失去函数 T[0] 必然有一个参数的分支,从而返回预期的类型 [(arg: P) => string, Options<P>]
  • 如果条件不合乎,返回预期的类型 [(arg?: P) => unknown, Options<P>?],arg 是可选的,Options 也是可选的。

Args 类型的残缺定义如下:

type Args<T> =
  T extends unknown[] ?
  T[0] extends () => number ? [() => number]:
  T[0] extends (arg: infer P) => string ? [Parameters<T[0]>['length']] extends[1] ? [(arg: P) => string, Options<P>] : 
  [(arg?: P) => unknown, Options<P>?]
  : never  : never

当初,依据后面的 type Test = <T>(...arg: Args<T>) => unknown,让咱们对 test 函数进行进一步革新。

type Test = <T>(...arg: Args<T>) => unknown

const test: Test = (...args) => {const [fn, options] = args
  return fn(options?.injector?.())
}

在这个革新后的 test 函数中,咱们承受一个参数数组 args,其中蕴含了函数 fnoptions 参数。咱们应用数组解构赋值将这两个参数提取进去。

咱们曾经实现了类型定义的从新定义以及函数的革新,当初让咱们来看看是否可能失去预期的类型推断和谬误。

3 第一次翻车

每个调用都报错了。一个计划是在调用的时候指定泛型参数,但这样做就很麻烦,并且毫不意外地被大佬厌弃了。那就开始对 Test 进行进一步革新。

这次的革新将进一步简化 Args 类型,使其看起来更加高深莫测。它承受一个泛型参数 T,该参数是一个数组类型,示意函数的参数列表。依据不同的参数个数,咱们进行不同的类型转换:

  • 如果参数列表为空,即 T extends [],则示意函数没有参数。在这种状况下,test 没有其余参数,即 []
  • 如果参数列表只有一个元素 P,即 T extends [infer P],则示意函数只有一个参数。咱们将该参数的类型进行转换为 Options<P>,即一个带有 P 类型的 Options 类型的元组,即 [Options<P>]
  • 对于其余状况,咱们将整个参数列表定义为一个可选的 Options<string> 类型的元组,即 [Options<string>?]

最初,咱们定义了一个 Test 类型,它是一个高阶函数类型,承受一个函数 T 作为第一个参数,以及依据函数参数列表进行转换的元组类型 Args<Parameters<T>>。该类型示意函数的参数列表可能有多个,并且依据参数个数的不同利用不同的转换类型。当初,咱们就能够间接传入函数 fn 和它的参数来调用 Test 函数,不再须要在每次调用的时候指定 fn 类型。

type Args<T extends unknown[]> =
  T extends [] ? [] :
  T extends [infer P] ? [Options<P>] : [Options<T[0]>?]

type Test = <T extends (...arg: any[]) => unknown>(...args: [T, ...Args<Parameters<T>>]) => unknown

这里用上了 anyunknown,给泛型T 指定为带有任意参数的函数类型。应该防止应用万能类型 any,因为它绕过了类型查看,升高了类型安全性。然而在此处,咱们无奈替换 anyunknown类型的地位影响逆变协变,函数参数通常处于逆变的地位,子类型(更具体的类型)不能赋值给父类型(更宽泛的类型)。而unknown 是所有类型的父类型。

看广场吧,期待其它解法分享啊兄弟们。等你们来玩啊。

4 真正的规定

  • fn 没有参数时,options 是可选的,但没有 injector 字段。
  • fn 有参数且参数为必填时,options.injector 也是必填的,且injector 的返回类型为 fn 的参数类型。
  • fn 有参数但参数为可选时,options 是可选的,injector 也是可选的,且返回字符串。
  • options可能有其它属性,但具体是什么属性并没有明确指定。因而,咱们能够假如其余属性只有一个 weight 属性。

预期谬误如下所示:

// 定义 Test 函数的类型,使得上面类型成立
test(fn1);                                  // right
test(fn1, { weight: 10});                  // right
test(fn1, { injector: () => {}});          // error, dont need injector
test(fn2, { injector: () => 4 });           // right
test(fn3, { injector: () => 'world' });     // right
test(fn3);                                  // error, options.injector is required
test(fn3, { injector: () => 4 });           // error
test(fn4);                                  // right
test(fn4, { injector: () => 'test4' });     // right
test(fn4, { injector: () => undefined });   // error

为了合乎上述规定,咱们对泛型工具类型 Args进行了一些分支上的革新解决:

  • 如果 fn 参数列表为空,即 T extends [],则残余的参数列表定义为一个可选的 OtherOpts 类型的元组,即 [OtherOpts?]
  • 如果 fn 参数列表只有一个元素 P,即 T extends [infer P]。咱们将该参数的类型进行转换为 Options<P>,指定 options.injector 的返回类型为 fn 参数类型 P
  • 对于其它状况,咱们将整个参数列表定义为一个可选的 Options<string> 类型的元组,即 [Options<string>?]

Test 高阶函数类型放弃不变。

interface OtherOpts  {weight: number;}

type Args<T extends unknown[]> =
  T extends [] ? [OtherOpts?] :
  T extends [infer P] ? [Options<P>] : [Options<string>?]

本文由 mdnice 多平台公布

退出移动版