如何让TypeScript接口中两个数组属性长度一致？

当然可以，你需要借助泛型和类型约束来关联两个数组的长度，让TypeScript在编译阶段就检查二者长度是否一致。以下是具体实现方式：

方案1：泛型接口直接约束 #

定义一个带泛型参数的接口，用泛型N（代表数组长度）同时约束cat和kitten的长度：

interface FooProps<N extends number> {
  cat: string[] & { length: N };
  kitten: number[] & { length: N };
}

使用时需要显式指定长度，TypeScript会严格校验：

// 合法：两个数组长度都是2
const validFoo: FooProps<2> = {
  cat: ["英短", "布偶"],
  kitten: [2, 3]
};

// 报错：cat长度为1，不符合指定的2
const invalidFoo: FooProps<2> = {
  cat: ["英短"],
  kitten: [2, 3]
};

方案2：自动推导长度的工具函数 #

如果不想手动指定长度，可以写一个工具函数让TypeScript自动推导数组长度，使用更便捷：

function createFooProps<N extends number>(props: {
  cat: string[] & { length: N };
  kitten: number[] & { length: N };
}) {
  // 可选：添加运行时校验（编译时校验不覆盖运行时场景）
  if (props.cat.length !== props.kitten.length) {
    throw new Error("cat和kitten数组长度必须一致");
  }
  return props;
}

// 自动推导长度为3，无需手动指定
const autoValid = createFooProps({
  cat: ["橘猫", "狸花", "美短"],
  kitten: [1, 4, 2]
});

// 编译报错：长度不一致
const autoInvalid = createFooProps({
  cat: ["橘猫"],
  kitten: [1, 4]
});

原理说明 #

普通的string[]或number[]类型只约束数组元素类型，不限制长度。通过& { length: N }我们给数组类型附加了一个长度约束，再用泛型N把cat和kitten的长度绑定在一起，确保二者必须相等。

这种方式仅在编译阶段生效，如果需要运行时也能保证长度一致，记得在工具函数中添加长度检查逻辑。

内容的提问来源于stack exchange，提问作者four-eyes