如何为接受可变数量特定模式元组的TypeScript函数定义类型

解决方案 #

你可以通过泛型+映射元组类型实现需求，不需要固定参数数量，也不需要用链式调用：

可变参数版本 #

function f<T extends string, U extends `${T}${T}`>(arg: [T, U]) {}

// g函数的类型定义
function g<T extends string[]>(...args: { [K in keyof T]: [T[K], `${T[K]}${T[K]}`] }) {}

// 测试
f(['a', 'aa']) // 校验通过
f(['a', 'ab']) // 符合预期抛出类型错误

g(
  ['a', 'aa'], // 校验通过
  ['b', 'bb'], // 校验通过
  ['c', 'ab']  // 触发编译错误，符合预期
)

单个数组参数版本 #

如果需要传入一个数组而非可变参数，只要调整参数定义即可，核心逻辑完全一致：

function g<T extends string[]>(args: { [K in keyof T]: [T[K], `${T[K]}${T[K]}`] }) {}

// 调用方式
g([
  ['a', 'aa'],
  ['b', 'bb'],
  ['c', 'ab'] // 同样触发编译错误
])

实现原理 #

这里的泛型T是由所有入参元组的第一个元素类型组成的数组，通过映射类型遍历T的每一个索引位置，对对应位置的入参元组添加约束：第二个元素必须是第一个元素重复两次的模板字符串类型，TypeScript会自动推导每个位置的类型并完成校验。

内容的提问来源于stack exchange，提问作者Natasha