如何在TypeScript中定义含动态格式键的接口？

这个需求其实挺常见的，好在TypeScript从4.1版本开始支持模板字面量类型，刚好能完美解决这种「特定格式动态键」的约束问题，咱们直接来看实现方案：

首先，先定义一个类型来描述那些符合格式的动态键：

// 约束键必须是 "dynamicInput" 开头后跟任意数字的字符串
type DynamicInputKey = `dynamicInput${number}`;

然后用这个类型作为接口的索引签名，再加上必填的name字段：

interface FormData {
  // 必填的名字字段
  name: string;
  // 所有符合 DynamicInputKey 格式的键都是可选的字符串类型
  [key: DynamicInputKey]: string | undefined;
}

接下来咱们验证一下这个类型的效果，看看它是不是符合你的预期：

合法的使用场景 #

const validForm: FormData = {
  name: "张三",
  dynamicInput1: "第一个动态输入值",
  dynamicInput100: "第一百个动态输入值"
};

这个对象完全符合类型约束，不会有任何报错。

非法的使用场景 #

如果尝试添加不符合格式的键，TypeScript会直接报错提示：

// 错误：`test` 不是 FormData 允许的属性
const invalidForm1: FormData = {
  name: "李四",
  test: "非法字段"
};

// 错误：`dynamicInput` 后面没有数字，不符合格式要求
const invalidForm2: FormData = {
  name: "王五",
  dynamicInput: "缺少数字后缀"
};

访问动态键的类型提示 #

当你访问合法的动态键时，TypeScript会正确推断它的类型为string | undefined（因为这些字段是可选的）：

// 类型是 string | undefined
validForm.dynamicInput1;
// 即使这个键没在对象里定义，类型依然是 string | undefined
validForm.dynamicInput999;

这样既满足了「无限个符合格式的可选字段」的需求，又能严格禁止其他非法键，完美匹配你想要的效果～

内容来源于stack exchange