如何用TypeScript元组校验数组值的指定顺序？

当然可以用TypeScript元组实现这个需求。元组的特性就是固定长度、固定索引对应固定类型，正好能满足你对数组元素顺序的严格校验要求。

原来的Names[]是数组类型，它只限制元素必须是Names联合类型的成员，但完全不关心元素的顺序和数组长度，所以错误顺序的数组不会触发类型报错。

修改方案 #

• 定义一个固定顺序的元组类型，明确每个索引对应的具体值
• 将ChildProps中的names类型从Names[]替换为这个元组类型

修改后的代码示例 #

// 定义固定顺序的元组类型
type RequiredNameSequence = ['hello', 'world', 'morning'];

const correctSequence: RequiredNameSequence = ['hello', 'world', 'morning'];
// 下面这行代码会触发TypeScript错误，因为顺序不符合元组要求
const inCorrectSequence: RequiredNameSequence = ['world', 'hello', 'morning'];

const Component = () => {
    return (
        <>
            <Child names={correctSequence} />
            {/* 这里传入错误顺序的数组也会直接报错 */}
            <Child names={inCorrectSequence} />
        </>
    )
}

type Names = 'hello' | 'world' | 'morning'

interface ChildProps {
    // 替换为元组类型
    names: RequiredNameSequence;
}

const Child = ({names}: ChildProps) => {}

额外说明 #

如果不想显式给变量指定元组类型，也可以用as const断言让TypeScript自动推断出元组类型：

const correctSequence = ['hello', 'world', 'morning'] as const;
// 此时correctSequence的类型被推断为readonly ['hello', 'world', 'morning']
// 如果ChildProps的names类型定义为readonly RequiredNameSequence，也可以兼容这种情况

这样修改后，任何不符合索引0为"hello"、索引1为"world"、索引2为"morning"顺序的数组，都会被TypeScript在编译阶段检测到错误，完全满足你的校验需求。

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