在 TypeScript 中為物件動態分配屬性

Shuvayan Ghosh Dastidar 2023年1月30日
  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