在 TypeScript 中從介面建立物件
Shuvayan Ghosh Dastidar
2023年1月30日
- 在 TypeScript 中分配已建立物件中的所有欄位
-
在 TypeScript 中使用
as關鍵字設定空物件 -
在 TypeScript 中使用
as關鍵字僅設定必需的屬性 -
在 TypeScript 中使用
Partial、Omit和Pick型別建立物件 -
在 TypeScript 中使用
?使介面中的屬性成為可選的運算子
與純 JavaScript 相比，TypeScript 中的介面提供了一種嚴格的型別支援結構。使用者可以設計介面或存在於使用者匯入的第三方庫中。
大多數時候，使用者希望根據第三方庫中提供的介面定義建立一個物件來訪問第三方庫提供的方法和功能。
本文將重點介紹從介面定義建立物件。
在 TypeScript 中分配已建立物件中的所有欄位
與介面定義相關的所有屬性都可以直接分配給新建立的物件。下面的程式碼段演示了這一點。
interface Animal {
legs : number ;
eyes : number ;
name : string ;
wild : boolean ;
};
const dog : Animal = {
legs : 4,
eyes : 2,
name : 'Dog',
wild : false
};
現在可以從 dog.name 或 dog.wild 等物件訪問屬性。
在 TypeScript 中使用 as 關鍵字設定空物件
可以使用 as 關鍵字初始化空物件，稍後可以設定其屬性。下面的程式碼段演示了這一點。
interface Animal {
legs : number ;
eyes : number ;
name : string ;
wild : boolean ;
};
const dog : Animal = {} as Animal;
dog.legs = 4;
dog.name = "Dog";
console.log(dog);
輸出：
{
"legs": 4,
"name": "Dog"
}
因此初始化了一個型別為 Animal 的空物件，並設定了屬性 legs 和 name。列印物件時，它只顯示設定的屬性。
在 TypeScript 中使用 as 關鍵字僅設定必需的屬性
可以使用 as 關鍵字直接設定所需的屬性。as 關鍵字強制編譯器識別物件是某種型別，即使物件中的所有欄位都沒有設定。
interface Animal {
legs : number ;
eyes : number ;
name : string ;
wild : boolean ;
};
const dog : Animal = {
legs : 4,
name : 'Dog',
} as Animal;
在 TypeScript 中使用 Partial、Omit 和 Pick 型別建立物件
Partial 型別用於使介面的所有屬性都是可選的。當建立物件只需要某些介面屬性時，使用 Pick 型別。
Omit 型別用作 Pick 型別的反面 - 從介面中刪除某些屬性，同時根據需要保留所有其他屬性。
interface Animal {
legs : number ;
eyes : number ;
name : string ;
wild : boolean ;
};
const dogOnlyWithName : Pick<Animal, 'name'> = {
name : "Dog"
};
const dogWithoutWildFlagAndEyes : Omit<Animal, "wild" | "eyes"> = {
legs : 4,
name : "Dog"
}
const dogWithAllOptionalTypes : Partial<Animal> = {
eyes: 2
};
在 TypeScript 中使用 ? 使介面中的屬性成為可選的運算子
介面中的一些屬性可以用 ? 標記為可選的。運算子。對於使用者定義的介面，這是一個可行的選擇，但在從第三方庫匯入的介面的情況下無法實現。
interface Animal {
legs : number ;
eyes? : number ;
name : string ;
wild? : boolean ;
};
const dog : Animal = {
legs : 4,
name : 'Dog'
};
