以下代码展示了一个典型的场景：
const fn = (a: { [key: string]: number | string }) => {
console.log(a);
};
interface FooInterface {
id: number;
name: string;
}
type FooType = {
id: number;
name: string;
}
const fooInterface: FooInterface = { id: 1, name: 'name' };
const fooType: FooType = { id: 1, name: 'name' };
fn(fooType); // No error
fn(fooInterface); // Error: Argument of type 'FooInterface' is not assignable to parameter of type '{ [key: string]: string | number; }'.
// Index signature for type 'string' is missing in type 'FooInterface'.正如错误信息所示，fn(fooInterface) 会导致一个类型错误，提示 FooInterface 类型缺少字符串索引签名。而 fn(fooType) 却能正常工作。
原因分析：隐式索引签名与声明合并
造成这种差异的关键在于接口和类型别名处理索引签名的方式不同。接口不会隐式地包含索引签名，这意味着 TypeScript 会严格检查接口是否显式地声明了索引签名。类型别名则没有这种限制，只要其结构满足类型定义即可。
更深层的原因与接口的声明合并（Declaration Merging）特性有关。TypeScript 允许在不同的地方多次声明同一个接口，编译器会将这些声明合并成一个单一的接口定义。为了保证声明合并的安全性，TypeScript 要求接口必须显式地声明索引签名，以确保所有合并后的接口都满足索引签名的约束。
解决方案：显式声明索引签名
要解决上述错误，只需在 FooInterface 中显式地添加一个索引签名即可：
interface FooInterface {
id: number;
name: string;
[key: string]: string | number; // 添加索引签名
}通过添加 [key: string]: string | number;，我们告诉 TypeScript FooInterface 允许包含任意字符串类型的键，其对应的值可以是 string 或 number 类型。这样，fn(fooInterface) 就能正常工作了。
示例代码：完整解决方案
const fn = (a: { [key: string]: number | string }) => {
console.log(a);
};
interface FooInterface {
id: number;
name: string;
[key: string]: string | number;
}
type FooType = {
id: number;
name: string;
}
const fooInterface: FooInterface = { id: 1, name: 'name' };
const fooType: FooType = { id: 1, name: 'name' };
fn(fooType);
fn(fooInterface); // No error总结与注意事项
- 当你需要在 TypeScript 中定义具有动态键的类型时，需要考虑索引签名。
- 接口在作为函数参数时，如果函数参数需要索引签名，必须显式地在接口中声明索引签名。
- 类型别名在这方面更加灵活，不需要显式声明索引签名，只要其结构满足类型定义即可。
- 理解接口的声明合并特性有助于你更好地理解 TypeScript 的类型系统。
通过理解接口和类型别名在处理索引签名上的差异，你可以编写更健壮、更易于维护的 TypeScript 代码。记住，显式地声明索引签名可以避免潜在的类型错误，并确保你的代码符合 TypeScript 的类型安全原则。
