TypeScript 中为对象动态添加属性

Z时代
2024-01-10
分类：综合

使用索引签名为对象动态添加属性，例如 const obj: {[key: string]: any} = {}。当我们提前不知道类型属性的所有名称及其值的类型时，使用索引签名。


interface Person {
  [key: string]: any;
}
constobj: Person = {};
obj.name = 'Tom';
obj.age = 30;
console.log(obj);

运行示例

上面示例运行结果如下


{ name: 'Tom', age: 30 }

{[key: string]: any} 语法是 TypeScript 中的索引签名，当我们事先不知道类型属性的所有名称和值的类型时使用。

示例中的索引签名意味着当使用字符串索引对象时，它将返回任何类型的值。

我们可能还会在示例中看到索引签名 {[key: string]: string}。它表示一个键值对结构，当用字符串索引时返回字符串类型的值。

如果在索引签名中将字符串键的值设置为 any，则可以将属性添加到任何类型的对象，因为任何属性都比 any 更具体。


interface Person {
  [key: string]: any;
age: number;
name: string;
  country?: string;
}
constobj: Person = {
name: 'Tom',
age: 30,
};
obj.country = 'Chile';
obj.language = 'TypeScript';
console.log(obj);

运行示例

上面示例运行结果如下


{ name: 'Tom', age: 30, country: 'Chile', language: 'TypeScript' }

这是缩小我们提前知道的某些属性类型的好方法。

例如，如果我尝试将 age 属性设置为字符串，类型检查器会抛出错误，因为它需要一个数字。


interface Person {
  [key: string]: any;
age: number;
name: string;
  country?: string;
}
constobj: Person = {
name: 'Tom',
age: 30,
};
// ⛔️ Error: 类型 'string' 不会分配给类型 'number'.ts(2322)
obj.age = '100';

上面的示例运行结果如下

TypeScript 中为对象动态添加属性

我们已经将 age 属性设置为 number 类型，因此类型检查器可以帮助我们发现应用程序中的错误。

实现此目的的一种较新方法是使用 Record 实用程序类型。

使用 Record 实用程序类型为对象动态添加属性，例如 const obj：Record<string, any>。 Record 实用程序类型构造一个对象类型，其键和值是特定类型。


constobj: Record<string, any> = {
webname: '迹忆客',
};
obj.website = "www.jiyik.com";
obj.author = 'jiyik';

我们将上面的对象键入为具有字符串类型的键和任何类型的值。

我们传递给泛型的第一种类型是键的类型，第二种是值的类型。

如果我们提前知道某些值的类型，则可以在接口中指定它们以提高类型安全性。


interface EmployeeDataextendsRecord<string, any> {
role: string;
salary: number;
  color?: string;
}
constemployees: Record<string, EmployeeData> = {
tom: { role: 'accountant', salary: 10, color: 'blue' },
alice: { role: 'manager', salary: 15 },
};
// 类型“number”不可分配给类型 “string”.ts(2322)
employees.tom.role = 100;
employees.tom.hello = 'world';