如何在typescript中为一个对象分配动态属性

2,830 阅读2分钟

Dynamic properties in typescript and javascript

在javascript中,你可以使用对象语法创建一个对象并动态地分配属性

你可以访问这些动态属性

console.log(employee.name) // john

如果你在Typescript中使用上述代码。

var employee = {};
employee.name= "john";

console.log(employee.name)

它给出了以下错误

Property 'name' does not exist on type '{}'.

在Typescript中,声明的变量是类型化的,这意味着声明的变量应该有一个类型,并在编译时引起错误。

它在编译时提供类型安全以避免错误。

在这种情况下,如何为一个对象添加动态属性?

如何在typescript中为一个对象添加动态属性

我们有多种方法可以做到

-使用任何类型

在这里,声明一个类型为any 的对象,它接受任何类型的数据。

var employee: any= {};
employee.name= "john";

console.log(employee.name)

你必须写一段代码将任意类型转换为所需类型,并增加额外的时间来完成。这没有遵循类型安全的原则,并且违背了在typescript中这样做的目的。

  • 使用接口索引类型签名

索引类型签名允许你用声明的类型来存储键值和值。

interface Employee {
    [key: string]: any
}

上面,接口被声明为键和值类型string any

创建一个接口的对象,如下所示

你可以只分配字符串键和任何值

obj.name="ram"
obj.salary=5000
console.log(obj) //{ "name": "ram",  "salary": 5000}

你可以用简短的语法内联索引签名

var obj: {[k: string]: any} = {};
obj.name="ram"
obj.salary=5000
console.log(obj) //{ "name": "ram",  "salary": 5000}

-使用Record类型

类型脚本介绍Record是一个对象,其键类型为K,值类型为T。

这个对象可以存储string key和valueany type

var emp1: Record = {}
emp1.name="ram"
emp1.salary=5000
console.log(emp1)

这是一种更简洁的类型安全和对象继承的方式。创建一个具有共同属性的基础接口

interface BaseObject{
id: string,
name: string,
}

你可以通过在基接口上扩展额外的必要属性来创建一个新的接口

interface Employee extends BaseObject {
   salary: string;
}

创建一个接口的对象,你可以添加属性

var emp1: Employee= {};
emp1.name= "john";

这为用户扩展对象的行为提供了一种更简洁和可重复使用的方法。

结论

综上所述,你学到了在typescript中向对象添加动态属性的多种方法,并举例说明。

  • 任何类型
  • 索引类型
  • 记录类型
  • 扩展接口

在重用和类型安全方面,我更喜欢把它扩展为一个可重用的、更干净的对象。