迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

TypeScript 中为对象动态添加属性

作者:迹忆客 最近更新:2023/01/08 浏览次数:

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

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

const obj: 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;
}

const obj: 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;
}

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

// ⛔️ Error: 类型 'string' 不会分配给类型 'number'.ts(2322)
obj.age = '100';

上面的示例运行结果如下

TypeScript 中为对象动态添加属性

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

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

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

const obj: Record<string, any> = {
  webname: '迹忆客',
};

obj.website = "www.jiyik.com";

obj.author = 'jiyik';

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

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

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

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 },
};

// 类型“number”不可分配给类型 “string”.ts(2322)
employees.tom.role = 100;

employees.tom.hello = 'world';

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

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

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

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

发布时间:2023/03/19 浏览次数:182 分类:TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便