在TypeScript中，為了可以約束物件定義，提供了兩個新的特性，介面和類型別名。

TypeScript中的介面

在強型別語言中，都有介面的概念，那麼TypeScript中的介面是如何使用的呢？

介面定義形式如下：

interface test {
    name: string,
    value: number
}

上述介面，定義了一個test介面，該介面可以約束兩個欄位的資料型別，分別是name和value。而介面的使用主要有三個方面：實現、繼承和約束。

實現介面

通過用類來實現介面，就實現了介面約束類中必須定義的欄位，實現介面的關鍵字是implements，接下來，我們定義一個類來實現上述介面：

class TestClass implements test {
    name: string;
    value: number;
}

如果類中缺少了屬性name和value，就會報錯，我們就可以用test介面來約束實現介面類中的屬性。

繼承介面

介面之間，還可以進行繼承，用來使得該介面擁有被繼承介面的屬性和方法。比如有如下兩個介面：

interface ColorInterface {
    color: string;
}

interface LineInterface {
    width: number;
}

在上面我們定義了兩個介面，分別表示顏色和線條的寬度，如果我們想要定義一條直線的類別，那麼我們可以定義如下介面繼承：

interface StrightLineInterface extends ColorInterface, LineInterface {
    height: number
}

此時此刻，介面StrightLineInterface便擁有了color和width屬性，TypeScript中類只能實現一個介面，但是介面可以通過繼承實現多型。

介面約束

除了被實現和繼承，介面還可以用來約束物件或者函式型別。

比如我們後臺獲取的資料需要遵循特定型別，我們才能使用，我們就可以用介面來約束我們獲取的資料型別。

比如，我們獲取的資料是一個包含id，name的物件資料，那麼我們可以定義如下介面：

interface List {
    id: number,
    name: string,
    age?: number, // 可選屬性表示list中，可有可無的屬性
}

interface Result {
    data: List
}

我們在使用result的時候，就可以用Result介面來約束它的格式：

function use(result: Result) {
    result.data.map(x => {
        // 操作程式碼
    })
}

介面還可以約束可變引數的物件，可變引數就是我們不知道物件中有多少個屬性，但是我們知道屬性的類別，可以用如下方式約束：

interface NameArray {
    [x: number]: string
}

該介面表示我們接受約束的物件必須是數字下標，而值必須是string型別的value物件。

除此之外，介面還可以約束函式：

interface Add {
    (x: number, y: number): number
}

let add: Add = (a, b) => a + b;

介面約束Props和State

介面還可以約束React中的Props和State的型別，如下所示：

interface Props {
    name: string,
    data: string[]
}

interface State {
    [x: string]: string
}

class Comp extends React.Component<Props, State> {
    // 第一個表示props的型別約束，第二個表示state的型別約束，如果沒有props，我們可以設定為{}
}

類型別名

上面提到的介面可以做的一些事情，而類型別名，主要就是對物件或者函式起到約束作用，特性沒有介面多。

type Add = (x: number, y: number) => number;

let add: Add = (a, b) => a + b;

而類型別名是早起TypeScript做型別約束的主要形式，後來引入介面之後，TypeScript推薦我們儘可能的使用介面來規範我們的程式碼。

而兩者也都是TSC編譯器做型別判定的時候有作用，我們可以在playground裡面看到，當我們寫一個介面或者是一個類型別名定義一個物件或者方法的時候，並未有任何編譯成的es5程式碼出現。

總結

這一小節主要講述了類型別名和介面的用法，以及兩者的區別。

TypeScript中，如果再相同功能點的頂一下，推薦使用interface去定義資料型別。

我的部落格地址：http://www.gaoyunjiao.fun/?p