TypeScript 中的介面與型別
Shuvayan Ghosh Dastidar
2023年1月30日
2022年5月18日
TypeScript 是 Microsoft 維護的一種程式語言，是 JavaScript 的超集，支援強型別。TypeScript 對於擁有大型程式碼庫的組織變得非常有用。
TypeScript 有助於防止在 JavaScript 錯誤推斷型別的情況下不可避免的執行時錯誤。
支援 TypeScript 的適當工具和 IDE 可以建議程式碼完成、檢測型別中的錯誤、自動修復錯誤等等。TypeScript 可以在介面和型別的幫助下提供所有這些支援。
本文重點介紹介面和型別的各個方面以及何時使用它們。TypesSript 中有一些基本型別使用介面和型別被構造。
TypeScript 中介面和型別的相似之處
以下程式碼段顯示了 TypeScript 中的介面示例。
interface Point {
x : number;
y : number;
}
interface Circle{
center : Point;
radius : number;
}
const circle : Circle = {
center : {
x : 2,
y : 3
},
radius: 5
}
console.log(`Circle = [center :{${circle.center.x}, ${circle.center.y}}, \
radius : ${circle.radius} ]`)
現在我們可以使用 Types 實現相同的構造。以下程式碼段顯示了這一點。
type Point = {
x : number;
y : number;
}
type Circle = {
center : Point;
radius : number;
}
兩種構造都將給出相同的輸出。
輸出：
Circle = [center :{2, 3}, radius : 5 ]
屬性名稱中的簡單拼寫將使編譯失敗並防止執行時錯誤。
TypeScript 中介面和型別的區別
型別和介面都可以擴充套件其他型別，從而支援強型別 OOP 正規化。
但是，擴充套件的語法是不同的。以下程式碼段顯示了這是如何實現的。
type PointType = {
x : number
y : number
}
interface RadiusType {
radius : number
}
// valid
type Circle = RadiusType & PointType;
// valid
interface Circle extends RadiusType, PointType {}
// use it as
const circle : Circle = {
x : 3,
y : 4,
radius : 3
};
TypeScript 中的介面和類充當靜態藍圖，因此不能在型別定義中使用 union 運算子擴充套件型別別名。例如：
type Animal = string;
type Living = bool;
type AnimalOrLiving = Animal | Living;
// will show error in compilation
interface Creature extends AnimalOrLiving {}
// will show error in compilation
class Creature extends AnimalOrLiving {}
最後，TypeScript 中的介面支援宣告合併，這不適用於型別別名。多次宣告的介面會合併為一個，而多次宣告型別別名會出錯。
它在生成公共 API 的情況下變得有用，以便消費者可以通過再次宣告 API 來進一步新增 API。例如：
interface Animal {
type: string
}
interface Animal {
legs : number
}
interface Animal {
eyes : number
}
// use it as
const Dog : Animal = {
type : 'dog',
legs : 2,
eyes : 2
}
まとめ
因此，總而言之，在 TypeScript 中使用型別和介面時需要牢記一些細微的差異。
在設計 API 庫或宣告物件時首選介面。在宣告常量和作為函式的返回型別時，型別更受青睞。
Author: Shuvayan Ghosh Dastidar
相關文章 - TypeScript Interface
- TypeScript 中的介面型別檢查
- 在 TypeScript 中使用巢狀屬性擴充套件介面
- TypeScript 中的介面與類
- TypeScript 中的介面預設值
- 在 TypeScript 中從介面建立物件