如何在TypeScript类型中指定数组的最大长度（含多可选类型场景）

实现方案 #

TS本身没有原生的「数组最大长度」类型约束，你可以通过元组联合的方式实现该需求，有两种常用写法：

方案1：小N场景直接手写元组（适用于你当前N=2的场景） #

直接把长度0、1、2的元组做联合即可，写法简单无额外依赖：

type ValidValue = 'X' | 'Y';

type MyType = {
  // 联合所有长度≤2的元组类型
  arr: [] | [ValidValue] | [ValidValue, ValidValue]
}

方案2：通用工具类型实现（适合N可配置的通用场景） #

如果需要灵活调整最大长度N，可以先封装递归工具类型生成对应的数组约束：

// 工具类型：生成元素为T、长度为Length的固定元组
type TupleOf<T, Length extends number, Acc extends T[] = []> = 
  Acc['length'] extends Length ? Acc : TupleOf<T, Length, [...Acc, T]>;

// 工具类型：生成元素为T、最大长度为Max的数组类型
type MaxLengthArray<T, Max extends number> = 
  Max extends 0 ? [] : TupleOf<T, Max> | MaxLengthArray<T, Max - 1>;

// 业务类型定义
type ValidValue = 'X' | 'Y';
type MyType = {
  // 最大长度设置为2即可
  arr: MaxLengthArray<ValidValue, 2>
}

效果验证 #

// 合法写法
const demo1: MyType = { arr: [] }
const demo2: MyType = { arr: ['X'] }
const demo3: MyType = { arr: ['X', 'Y'] }

// 报错：长度超过2，类型不匹配
const demo4: MyType = { arr: ['X', 'Y', 'X'] }

补充说明 #

你也可以用ValidValue[] & { length: 0 | 1 | 2 }的交叉类型写法实现，但该写法对数组方法的返回值推导、类型收窄的支持不如元组联合完善，更推荐使用上文的元组联合方案。

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