TypeScript 中的介面與型別

Shuvayan Ghosh Dastidar 2023年1月30日 2022年5月18日
  1. TypeScript 中介面和型別的相似之處
  2. TypeScript 中介面和型別的區別
  3. まとめ
TypeScript 中的介面與型別

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 庫或宣告物件時首選介面。在宣告常量和作為函式的返回型別時,型別更受青睞。

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 Interface

相關文章 - TypeScript Type