在 TypeScript 中為物件動態分配屬性
Shuvayan Ghosh Dastidar
2023年1月30日
2022年5月18日
-
在 TypeScript 中使用
as關鍵字向物件新增動態屬性 -
在 TypeScript 中使用
Partial型別為物件動態新增屬性 -
在 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 是強制性的，而其他可選欄位可以在需要時新增。
Author: Shuvayan Ghosh Dastidar
