为 TypeScript 中的对象动态添加属性

在 TypeScript 中为对象动态添加属性

Dynamically add Properties to an Object in TypeScript

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

索引.ts


interface Person {
  [key: string]: any;
}

const obj: Person = {};

obj.name = 'Tom';
obj.age = 30;

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

示例中的索引签名意味着当一个对象被索引为 astring时，它将返回一个any类型的值。

{[key: string]: string}您可能还会在示例中看到索引签名。它代表一个键值结构，当用 a 索引时string返回一个 type 的值string。

如果字符串键的值any在索引签名中设置为，您可以向任何类型的对象添加属性，因为任何东西都比any.

索引.ts


interface Person {
  [key: string]: any;
  age: number;
  name: string;
  country?: string;
}

const obj: Person = {
  name: 'Tom',
  age: 30,
};

obj.country = 'Chile';

obj.language = 'TypeScript';

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

例如，如果我尝试将age属性设置为 a string，类型检查器会抛出错误，因为它需要一个number.

索引.ts


interface Person {
  [key: string]: any;
  age: number;
  name: string;
  country?: string;
}

const obj: Person = {
  name: 'Tom',
  age: 30,
};

// ⛔️ Error: Type 'string' is not
// assignable to type 'number'.ts(2322)
obj.age = '100';

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

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

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

索引.ts


const obj: Record<string, any> = {
  name: 'Tom',
};

obj.age = 30;

obj.country = 'Chile';

我们键入上面的对象以具有 type 的键和 type 的string值
any。

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

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

索引.ts


interface EmployeeData extends Record<string, any> {
  role: string;
  salary: number;
  color?: string;
}

const employees: Record<string, EmployeeData> = {
  tom: { role: 'accountant', salary: 10, color: 'blue' },
  alice: { role: 'manager', salary: 15 },
};

// ⛔️ Type 'number' is not
// assignable to type 'string'.ts(2322)
employees.tom.role = 100;

// ✅ still works
employees.tom.hello = 'world';

该接口EmployeeData从Record具有字符串键和any类型值的构造类型扩展而来。

3该接口为我们预先知道的属性设置了特定类型。

如果我们尝试将role,salary或color属性设置为不兼容的类型，则会出现错误。

–