TS 类型体操还能这么玩，太秀了

关注

最新推荐文章于 2026-05-23 10:39:16 发布 · 3.4k 阅读

原创 ·

本内容遵循 CC 4.0 BY-SA 版权协议

TS类型体操技巧总结最近刷类型体操有点上瘾，本文算是最近刷类型体操的一些思考的集合。刷的时候感觉自己长脑子了，但是过段时间又好像没脑子了，还是得通过博客总结沉淀一下判断是否是 never 类型 typescript type IsNever<T> = [T] extends [never] ? true : false; type IsNever<T> = (() => T) ex... 阅读详情

最近在看 TypeScript 相关的内容，做了一下类型体操，真的太秀啦

递归、infer 满天飞，今天就来领略一下 TS 能做什么骚操作吧！

先放上本文的几个小标题，很骚

巧用数组上数学课
模版字符串为所欲为
中序遍历 TS 也能行
infer + 递归随意秒杀

下面开始军训体操

一、巧用数组上数学课

这一题是 TS 类型挑战中的 Greater Than

这道题需要我们实现 GreaterThan<T, U> 判断 T > U 是 true 还是 false

有几个特殊测试用例

GreaterThan<2, 1> //should be true
GreaterThan<1, 1> //should be false
GreaterThan<10, 100> //should be false
GreaterThan<111, 11> //should be true

看到这题，在 JS 中非常的简单，直接就能有答案，但是 TS 是没有计算能力的，也不支持大小判断

那么我们还能怎么做呢？巧用数组，通过数组的 length 来进行比较，

有两种可行的方法

第一种就是递归，但是通过实践我们会知道，当参数过大时，很容易爆栈
第二种方法就是构造两个长度为 T 和 U 的数组，通过数组判断哪个数组更长

这里我们先看第一种方法

递归法

可以采用递归来实现，前面我们也有说过了，数组的很容易爆掉，但是测试用例还算温柔，这题能过

思路是拿一个新数组，和 T,U 进行对比，哪个先追上新数组的长度，哪个就小
简单一点来说就是，两个不一样长的木棍放在一起，我们从一端开始不断往前走，先摸到的那个木棍就是短一点的

看到具体实现上

通过引入新的变量 R extends any[] = [] ,来进行辅助的计算，接着依次判断 T，U 和 R['length] 是否相等，这时候，如果 T 和 R['length] 相等了而 U 还没有相等，那就说明了 T < U ，如果都不相等，那就继续加大数组 R 的长度

怎么加大数组 R 呢？

递归的时候，往数组中多加一个值即可，GreaterThan<T, U, [...R, 1]> 这里的 1 就是塞进去把 length 整大的

这样就完成了这道大小判断

// 答案
type GreaterThan<T extends number, U extends number, R extends any[] = []> = T extends R['length']? false: U extends R['length']? true: GreaterThan<T, U, [...R, 1]>

构造数组

我们还有一种很巧妙的方法

先看几段小代码

[1, 1, 1, 1] extends [1, 1] ? true : false // false
[1, 1] extends [1, 1, 1] ? true : false // false

上面的例子中，两个数组长度不等，很显然都会返回 false

那么我们抽象一下，这同样会返回 false，因为很显然多了 ...any 嘛

// 伪代码
A extends [...A, ...any] ? true : false

那么我们就可以有这样的思路，例如比较 2 和 3

我们就可以比较数组 A[1, 1] 和数组B [1, 1, 1]

我们就可以这么来看，数组 B 可以表示为 [...A, 1] 所以 B 大于 A，A 没有办法这样表示 B 所以更小

显然我们这个思路没啥问题！

如何实现呢？关键在于怎么构造长度为 T 和 U 的数组

写一个生成长度为 N 的数组的方法，需要接受长度 T，还需要使用辅助变量 A 来保存当前的数组并作为返回值

采用递归的方式往数组中添加新的元素，这样数组的 ['length'] 就会不断的变长，当等于 T 时，就结束循环，返回数组 A

type newArr<T extends number, A extends any[] = []> = A['length'] extends T? A: newArr<T, [...A, '']>

验证一下，没啥毛病

type A = newArr<4> // type A = ["", "", "", ""]

接下来就好办了，我们比较这两个数组就好了，为了美观抽出一个 type 来，这个就是我们前面讲到的逻辑

type GreaterArr<T extends any[], U extends any[]> = U extends [...T, ...any] ? false : true

最后调用它进行比较,KO

type GreaterThan<T extends number, U extends number> = GreaterArr<newArr<T>, newArr<U>>

二、模版字符串为所欲为

这一节，来看看模版字符串在 TS 里有多骚

这一题是 3326 · BEM style string，我们需要实现 BEM 函数完成其规则拼接，不理他，直接看用例

type ClassNames1 = BEM<'btn', ['price']> // 'btn__price'
type ClassNames2 = BEM<'btn', ['price'], ['warning', 'success']> // 'btn__price--warning' | 'btn__price--success'
type ClassNames3 = BEM<'btn', [], ['small', 'medium', 'large']> // 'btn--small' | 'btn--medium' | 'btn--large'

不过就是根据参数的位置，用不同的符号进行连接，例如BEN<'aaa', ['b'], ['c']>

b 是第二个参数，那么就用 __ 来连接，c 是第三个参数就用 -- 来连接

这题怎么做呢，我们只需要根据不同的参数利用模版字符串定义不同的模版即可

但是你会发现我们传参是数组形式的，我们要的是一个个的，那就需要通过下标来将数组或者对象转成联合类型

// 数组转联合
T[number]
// 对象转联合
Object[keyof T]

特殊的，当字符串中通过这种方式申明时，会自动生成新的联合类型，例如这题下面的写法，

type BEM<B extends string, E extends string[], M extends string[]> = `${B}__${E[number]}--${M[number]}`

会得到 type A = "btn__price--warning" | "btn__price--success" 这样的结果

但是这并没有考虑到空数组的情况，因此需要做提前的判断，

type IsNever<T> = [T] extends [never] ? true : false
type IsUnion<U> = IsNever<U> extends true ? "" : U
type BEM<B extends string, E extends string[], M extends string[]> = `${B}${IsUnion<`__${E[number]}`>}${IsUnion<`--${M[number]}`>}`

模版字符串想拼啥就拼啥，酷！

三、中序遍历 TS 也能行

JS 实现中序遍历，你闭着眼睛就能写，那 TS 呢

这是我们的测试用例，我们需要实现 InorderTraversal 方法，来实现中序遍历

const tree1 = {val: 1,left: null,right: {val: 2,left: {val: 3,left: null,right: null,},right: null,},
} as const

type A = InorderTraversal<typeof tree1> // [1, 3, 2]

这题看上去很难，TS 怎么还能遍历树呢，其实是可以的，非常简单，和 JS 的思路是一致的，我们先看看 JS 是如何实现中序遍历的呢？

const inorderTraversal = (root) => {if(!root) return []const res = []while(root) {inorderTraversal(root.left)res.push(val)inorderTraversal(tree.right)}return res
}

JS 是在 root 为 null 时结束。对于 TS 来说，实现递归，需要 extends TreeNode 而不是 null 来结束

不能使用 null 来判断，是因为 TS 不能判断类型 T 是否符合 TreeNode 类型

在结束前，我们需要递归的调用这个方法，左中右的顺序

// 答案
interface TreeNode {val: numberleft: TreeNode | nullright: TreeNode | null
}
type InorderTraversal<T extends TreeNode | null> = [T] extends [TreeNode] ? ([...InorderTraversal<T['left']>,T['val'],...InorderTraversal<T['right']>]): []

四、infer + 递归随意秒杀

infer 可谓是 TS 中的大杀器，大多数题目都会涉及到它的使用，他可以很方便的帮我们推断出一个变量的类型，我们看看这道题

实现一个像 Lodash.without 函数一样的泛型 Without<T, U>，它接收数组类型的 T 和数字或数组类型的 U 为参数，会返回一个去除 U 中元素的数组 T。

type Res = Without<[1, 2], 1> // expected to be [2]
type Res1 = Without<[1, 2, 4, 1, 5], [1, 2]> // expected to be [4, 5]
type Res2 = Without<[2, 3, 2, 3, 2, 3, 2, 3], [2, 3]> // expected to be []

不用看题目啦，直接看用例，无非就是把第二个参数中的值，从数组中去掉

这题我们非常容易想，通过 infer 和递归来实现，用 infer 取出数组的第一项

如果能够被 U 包含，那就丢弃，也就是把剩余的递归，不保留这一项
如果不包含，那就用 [R, ...] 把它给留下，剩下的继续递归因此很有可能写下这样的代码

type Without<T, U> = T extends [infer R, ...infer F]? R extends U? Without<F, U>: [R, ...Without<F, U>]: T

但是发现只过了一个用例，问题在于 U 有可能是数组，也有可能是字符串，而单纯采用 extends 来判断只能处理字符串的情况

因此我们需要解决如何判断字符串和数组两种情况

可以采用数组转 Union 的方法来解决

type ToUnion<T> = T extends any[] ? T[number] : T
type B = ToUnion<['1','b']> // type B = "1" | "b"

这样无论是数字还是数组，都会转成联合类型，而联合类型很方便判断 extends 包含关系：

// 答案
type ToUnion<T> = T extends any[] ? T[number] : T
type Without<T, U> = T extends [infer R, ...infer F]? R extends ToUnion<U>? Without<F, U>: [R, ...Without<F, U>]: T