TypeScript - 接口（ Interface）

[TOC]

學(xué)習(xí)目標(biāo)

• 理解接口的概念
• 學(xué)會(huì)通過(guò)接口標(biāo)注復(fù)雜結(jié)構(gòu)的對(duì)象

接口

前面我們說(shuō)到，TypeScript 的核心之一就是對(duì)值（數(shù)據(jù)）所具有的結(jié)構(gòu)進(jìn)行類(lèi)型檢查，除了一些前面說(shuō)到基本類(lèi)型標(biāo)注，針對(duì)對(duì)象類(lèi)型的數(shù)據(jù)，除了前面提到的一些方式意外，我們還可以通過(guò)： Interface （接口），來(lái)進(jìn)行標(biāo)注。

接口：對(duì)復(fù)雜的對(duì)象類(lèi)型進(jìn)行標(biāo)注的一種方式，或者給其它代碼定義一種契約（比如：類(lèi)）

接口的基礎(chǔ)語(yǔ)法定義結(jié)構(gòu)特別簡(jiǎn)單

interface Point {
    x: number;
    y: number;
}

上面的代碼定義了一個(gè)類(lèi)型，該類(lèi)型包含兩個(gè)屬性，一個(gè) number 類(lèi)型的 x 和一個(gè) number 類(lèi)型的 y，接口中多個(gè)屬性之間可以使用 逗號(hào) 或者 分號(hào) 進(jìn)行分隔

我們可以通過(guò)這個(gè)接口來(lái)給一個(gè)數(shù)據(jù)進(jìn)行類(lèi)型標(biāo)注

let p1: Point = {
    x: 100,
    y: 100
};

注意：接口是一種 類(lèi)型 ，不能作為 值 使用

interface Point {
    x: number;
    y: number;
}

let p1 = Point; //錯(cuò)誤

當(dāng)然，接口的定義規(guī)則遠(yuǎn)遠(yuǎn)不止這些

可選屬性

接口也可以定義可選的屬性，通過(guò) ? 來(lái)進(jìn)行標(biāo)注

interface Point {
    x: number;
    y: number;
    color?: string;
}

其中的 color? 表示該屬性是可選的

只讀屬性

我們還可以通過(guò) readonly 來(lái)標(biāo)注屬性為只讀

interface Point {
    readonly x: number;
    readonly y: number;
}

當(dāng)我們標(biāo)注了一個(gè)屬性為只讀，那么該屬性除了初始化以外，是不能被再次賦值的

任意屬性

有的時(shí)候，我們希望給一個(gè)接口添加任意屬性，可以通過(guò)索引類(lèi)型來(lái)實(shí)現(xiàn)

數(shù)字類(lèi)型索引

interface Point {
    x: number;
    y: number;
    [prop: number]: number;
}

字符串類(lèi)型索引

interface Point {
    x: number;
    y: number;
    [prop: string]: number;
}

數(shù)字索引是字符串索引的子類(lèi)型

注意事項(xiàng)

索引簽名參數(shù)類(lèi)型必須為 string 或 number 之一，但兩者可同時(shí)出現(xiàn)

interface Point {
    [prop1: string]: string;
    [prop2: number]: string;
}

當(dāng)同時(shí)存在數(shù)字類(lèi)型索引和字符串類(lèi)型索引的時(shí)候，數(shù)字類(lèi)型的值類(lèi)型必須是字符串類(lèi)型的值類(lèi)型或子類(lèi)型

interface Point1 {
    [prop1: string]: string;
    [prop2: number]: number;    // 錯(cuò)誤
}
interface Point2 {
    [prop1: string]: Object;
    [prop2: number]: Date;  // 正確
}

總結(jié)

• 接口語(yǔ)法與使用
• 可選屬性
• 只讀屬性
• 任意屬性 - 索引屬性
  • 數(shù)字索引
  • 字符串索引