TypeScript逆变 ：条件、推断和泛型的应用

news/2023/12/9 19:13:49 标签: typescript, ubuntu, javascript, 前端

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），我们可以使用以下代码来区分这三种情况：0，1，0 | 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，其中包含了函数 fn 和 options 参数。我们使用数组解构赋值将这两个参数提取出来。

我们已经完成了类型定义的重新定义以及函数的改造，现在让我们来看看是否能够得到预期的类型推断和错误。

3 第一次翻车

1.png

每个调用都报错了。一个方案是在调用的时候指定泛型参数，但这样做就很麻烦，并且毫不意外地被大佬嫌弃了。那就开始对 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

这里用上了any 和 unknown，给泛型T指定为带有任意参数的函数类型。应该避免使用万能类型 any，因为它绕过了类型检查，降低了类型安全性。然而在此处，我们无法替换 any 为 unknown，类型的位置影响逆变协变，函数参数通常处于逆变的位置，子类型（更具体的类型）不能赋值给父类型（更宽泛的类型）。而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>?]

http://www.niftyadmin.cn/n/5040585.html

相关文章

竞赛选题 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

竞赛选题 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…
阅读更多...
nvm下载安装教程

nvm下载安装教程

前言 nvm 官网地址&#xff1a;https://nvm.uihtm.com 一、nvm 下载 进入 nvm github 地址&#xff0c;下载最新版本&#xff1a;https://github.com/coreybutler/nvm-windows/releases 点击选择当前最新版本。 滑动到底部&#xff0c;点击 nvm-setup.exe 下载安装文件。 接…
阅读更多...
Idea操作Git合并另一个分支的部分提交

Idea操作Git合并另一个分支的部分提交

现有master、dev两个分支&#xff0c;master有提交1、2、3、4、5、6、7&#xff0c;dev是从master提交的3拉出来的分支&#xff08;Reset Current Branch to Here…&#xff0c;Mixed模式&#xff09;&#xff0c;有提交1、2、3&#xff0c;现在的需求是dev分支只需要合并maste…
阅读更多...
力扣刷题-数组-另一种双指针-有序数组的平方

力扣刷题-数组-另一种双指针-有序数组的平方

给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排序。 示例 1&#xff1a; 输入&#xff1a;nums [-4,-1,0,3,10] 输出&#xff1a;[0,1,9,16,100] 解释&#xff1a;平方后&#xff0c;数组变为 [1…
阅读更多...
YOLOv5，YOLOv8添加ASFF（自适应空间特征融合）

YOLOv5，YOLOv8添加ASFF（自适应空间特征融合）

ASFF&#xff1a;Adaptively Spatial Feature Fusion (自适应空间特征融合) 论文来源&#xff1a;Learning Spatial Fusion for Single-Shot Object Detection 代码地址&#xff1a;ASFF 1.背景 不同特征尺度之间的不一致性是基于特征金字塔的单阶段检测器的主要缺陷。 本文…
阅读更多...
云可观测性：提升云环境中应用程序可靠性

云可观测性：提升云环境中应用程序可靠性

随着云计算的兴起和广泛应用&#xff0c;越来越多的企业将其应用程序和服务迁移到云环境中。在这个高度动态的环境中&#xff0c;确保应用程序的可靠性和可管理性成为了一个迫切的需求。云可观测性作为一种解决方案&#xff0c;针对这一需求提供了有效的方法和工具。本文将介绍…
阅读更多...
【UE 粒子练习】07——创建动画拖尾类型粒子

【UE 粒子练习】07——创建动画拖尾类型粒子

效果 步骤 1. 将动画序列“Idle_ModifyBones”添加到场景中 2. 新建一个材质&#xff0c;命名为“Mat_AnimTrails” 材质混合模式设置为半透明&#xff0c;着色模型设置为无光照&#xff0c;设置材质为双面 材质节点如下 3. 新建一个粒子系统&#xff0c;命名为“P_AnimTrail”…
阅读更多...
JavaScript学习记录 | DOM事件流 事件冒泡-事件捕获-事件委托

JavaScript学习记录 | DOM事件流 事件冒泡-事件捕获-事件委托

目录 DOM事件流常见面试题事件冒泡与事件捕获事件冒泡使用场景事件捕获使用场景事件冒泡和事件捕获区别 事件委托 - 利用事件冒泡机制事件委托应用场景支持事件委托的事件事件委托的优缺点 DOM事件流 DOM事件流的三个阶段&#xff1a;捕获阶段 -> 目标阶段 -> 冒泡阶段 …
阅读更多...
用户与权限管理

用户与权限管理

文章目录 用户与权限管理1. 用户管理1.1 MYSQL用户1.2 登录MySQL服务器1.3 创建用户1.4 修改用户1.5 删除用户1.6 修改密码1. 修改当前用户密码2. 修改其他用户密码 1.7 MYSQL8密码管理 2. 权限管理2.1 权限列表2.2 授予权限的原则2.3 授予权限2.4 查看权限2.5 收回权限 3. 权限…
阅读更多...
Vue 使用vue-cli构建SPA项目（超详细）

Vue 使用vue-cli构建SPA项目（超详细）

目录 一、什么是vue-cli 二&#xff0c;构建SPA项目 三、 运行SPA项目 前言&#xff1a; 在我们搭建SPA项目时候&#xff0c;我们必须去检查我们是否搭建好NodeJS环境 cmd窗口输入以下指令&#xff1a;去检查 node -v npm -v 一、什么是vue-cli Vue CLI&#xff08;Vu…
阅读更多...
C语言基础知识点（九）数据类型溢出

C语言基础知识点（九）数据类型溢出

char a101; int sum200; a27;suma; printf("%d\n",sum); 参考答案&#xff1a;D 72. char类型的范围是-128---127&#xff0c;当a27 &#xff0c;之后a的值超出可表示范围会变为-128. a为char型,-128~127,a101,a27后溢出a-128: a127时不溢出 01111111(127补码)…
阅读更多...
5款精挑细选的软件，助你事半功倍

5款精挑细选的软件，助你事半功倍

​ 在工作的时候&#xff0c;大家都喜欢通过一些好用有效率的工具&#xff0c;来让工作更加快速地完成&#xff0c;今天给大家带来的这5款软件&#xff0c;更是一款比一款还要惊喜&#xff01; 1.在线文件转换——Aconvert ​ Aconvert 是一款在线文件转换服务&#xff0c;它…
阅读更多...
QT--day5

QT--day5

注册 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H#include <QMainWindow> #include<QPushButton> #include<QLineEdit> #include<QLabel> #include <QMessageBox> #include<QString> #include<QSqlDatabase> …
阅读更多...
《Clean Code》

《Clean Code》

整洁代码 文章目录 一、命名1.1 变量1.2 函数Rule 11.【推荐】先整体后细节 1.3 类 二、格式三、条件语句四、对象和数据结构 一、命名 以业务为导向命名[operateMaxSaleQtyLogs] > 以技术命名[operateMaxSaleQtyLogList] > 随意命名 [logList] 1.1 变量 Rule 1. 【推…
阅读更多...
Linux- execve()

Linux- execve()

execve() 是 Linux/UNIX 中的 exec 函数家族中的一个&#xff0c;它允许进程执行一个新的程序。具体地&#xff0c;execve() 替换当前进程的映像为新的程序映像。 函数原型如下&#xff1a; int execve(const char *pathname, char *const argv[], char *const envp[]);pathn…
阅读更多...
【建议收藏】5个神级AI提示词网站，让AI工具效率拉满

【建议收藏】5个神级AI提示词网站，让AI工具效率拉满

HI&#xff0c;同学们&#xff0c;我是赤辰&#xff0c;本期是赤辰第9篇AI工具类教程&#xff0c;文章底部准备了粉丝福利&#xff0c;看完可以领取&#xff01; 今天给大家推荐五款非常好玩的AI提示词资源网站&#xff0c;完全免费&#xff0c;无需魔法&#xff0c;直接复制粘…
阅读更多...
最新文章

Copyright @ 2022~2023