在 TypeScript 中为对象动态分配属性

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. 在 TypeScript 中使用 as 关键字向对象添加动态属性
  2. 在 TypeScript 中使用 Partial 类型为对象动态添加属性
  3. 在 TypeScript 中使用 ? 为对象动态添加属性的运算符
在 TypeScript 中为对象动态分配属性

TypeScript 是一种强类型语言,因此每个变量和对象都必须有一个类型。因此,很难为已定义的变量动态添加属性;但是,有一些方法可以做到这一点。

本教程将重点介绍如何将动态属性添加到对象。

在 TypeScript 中使用 as 关键字向对象添加动态属性

TypeScript 对每个变量都遵循严格的类型。但是,即使对象中不存在所有类型字段,也可以使用 as 关键字强制编译器将变量的类型推断为给定类型。

通过这种方式,可以进一步向对象添加动态属性。以下代码段显示了如何在空对象的情况下完成此操作。

interface Person {
    name : string;
    age : number;
    country : string;
    id : number;
}

// forcing the compiler to infer person as of type Person
var person : Person = {} as Person;

// dynamically adding types
person.id = 1;
person.country = "India";
person.name = "Ramesh";
console.log(person);

输出:

{
  "id": 1,
  "country": "India",
  "name": "Ramesh"
}

除了空对象之外,还可以存在某些字段,例如 var person : Person = { id : 1 } as Person

在 TypeScript 中使用 Partial 类型为对象动态添加属性

Partial 类型用于使接口的所有属性都是可选的。当创建对象只需要某些接口属性时,使用 Pick 类型。

Omit 类型用作 Pick 类型的反面 - 从界面中删除某些属性,同时根据需要保留所有其他属性。

interface Animal {
    legs : number ;
    eyes : number ;
    name : string ;
    wild : boolean ;
};

// we define a variable with partial types
var dogWithAllOptionalTypes : Partial<Animal> = {
    eyes: 2
};

// Now, further properties can be added to the object when needed

dogWithAllOptionalTypes.legs = 4;
dogWithAllOptionalTypes.wild = false;

在 TypeScript 中使用 ? 为对象动态添加属性的运算符

? 运算符的行为与 Partial 类型非常相似。用户必须使用 ? 明确地使类型或接口中的字段可选运算符。

以下是使用前面示例的代码段来展示实现。

interface Animal {
    legs : number ;
    eyes? : number ;
    name? : string ;
    wild? : boolean ;
};

var dog : Animal = {
    legs : 4
};

// Now further properties can be added to the object when needed
dog.eyes = 2;
dog.wild = false;

因此,在上面的示例中,字段 legs 是强制性的,而其他可选字段可以在需要时添加。

Shuvayan Ghosh Dastidar avatar Shuvayan Ghosh Dastidar avatar

Shuvayan is a professional software developer with an avid interest in all kinds of technology and programming languages. He loves all kinds of problem solving and writing about his experiences.

LinkedIn Website

相关文章 - TypeScript Object