TypeScript 初識(shí) - 接口

gnehc 發(fā)布于2019-08-26 10:56 / 1543人閱讀

摘要：接口的作用是聲明變量的結(jié)構(gòu)和方法，但不做具體的實(shí)現(xiàn)。這兩個(gè)使用場(chǎng)景不同。額外的屬性檢查從字面上的意思看，其實(shí)就是對(duì)接口未定義的屬性進(jìn)行檢查。上面的例子，定義了接口，它具有索引簽名。它不會(huì)幫你檢查類是否具有某些私有成員。

接口的作用是聲明變量的結(jié)構(gòu)和方法，但不做具體的實(shí)現(xiàn)。通常，接口會(huì)強(qiáng)制對(duì)所有成員進(jìn)行類型檢查，包括數(shù)量和類型：

interface Name {
    first: string;
    second: string;
}

let name: Name;
name = {
    first: "John",
    second: "Doe"
};

name = {
    // Error: "second is missing"
    first: "John"
};

name = {
    // Error: "second is the wrong type"
    first: "John",
    second: 1337
};

可選屬性

帶有可選屬性的接口與普通的接口定義差不多，只是在可選屬性名字定義的后面加一個(gè) ? 符號(hào)：

interface Name {
    first?: string;
    second?: string;
}

let name: Name;
name = {
    // 只有 first 也不會(huì)報(bào)錯(cuò)
    first: "John"
};

只讀屬性

一些對(duì)象屬性只能在對(duì)象剛剛創(chuàng)建的時(shí)候修改其值。可以在屬性名前用 readonly 來指定只讀屬性：

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

TypeScript 具有 ReadonlyArray 類型，它與 Array 相似，只是把所有可變方法去掉了，因此可以確保數(shù)組創(chuàng)建后再也不能被修改：

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

readonly 針對(duì)一個(gè)對(duì)象的屬性，const 針對(duì)的是一個(gè)變量。這兩個(gè)使用場(chǎng)景不同。

額外的屬性檢查

從字面上的意思看，其實(shí)就是對(duì)接口未定義的屬性進(jìn)行檢查。

當(dāng)一個(gè)變量實(shí)現(xiàn)接口時(shí)，變量中存在了接口未定義的屬性時(shí)，TypeScript 會(huì)進(jìn)行報(bào)錯(cuò)：

interface Point {
    x: number;
    y?: number;
}
// error!
const myPoint: Point = { x: 1, z: 3 };

要想繞過檢查，最簡(jiǎn)單的方法就是使用類型斷言：

const myPoint: Point = { x: 1, z: 3 } as Point;

最佳的方法是定義接口的時(shí)候添加一個(gè)字符串索引簽名：

interface Point {
    x: number;
    y?: number;
    [propName: string]: any;
}

函數(shù)類型

可以使用接口表示函數(shù)類型，需要給接口定義一個(gè)調(diào)用簽名：

interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    const result = source.indexOf(subString);
    return result > -1;
};

和變量類型的接口不同，函數(shù)的參數(shù)名不需要與接口定義的名字相匹配。函數(shù)的參數(shù)會(huì)逐個(gè)進(jìn)行檢查，要求對(duì)應(yīng)位置上的參數(shù)類型是兼容的：

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
    let result = src.indexOf(sub);
    return result > -1;
};

如果沒有指定類型，TypeScript 的類型系統(tǒng)會(huì)推斷出參數(shù)類型，因?yàn)楹瘮?shù)直接賦值給了 SearchFunc 類型變量：

let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.indexOf(sub);
    return result > -1;
};

可索引的類型

可索引類型具有一個(gè) 索引簽名，它描述了對(duì)象索引的類型，還有相應(yīng)的索引返回值類型。

interface StringArray {
    [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];

上面的例子，定義了 StringArray 接口，它具有索引簽名。這個(gè)索引簽名表示了當(dāng)用 number 去索引 StringArray 時(shí)會(huì)得到 string 類型的返回值。

TypeScript 支持兩種索引簽名：字符串和數(shù)字。可以同時(shí)使用兩種類型的索引，但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型。其實(shí)，這相當(dāng)于 JavaScript 對(duì)象的 key，數(shù)字類型會(huì)轉(zhuǎn)換成字符串類型再取值。

字符串索引簽名能夠很好的描述 dictionary 模式，并且也會(huì)確保所有屬性與其返回值類型相匹配：

interface NumberDictionary {
    [index: string]: number;
    length: number; // 可以，length 是 number 類型
    name: string; // 錯(cuò)誤，name 的類型與索引類型返回值的類型不匹配
}

可以將索引簽名設(shè)置為只讀，這樣就防止了給索引賦值：

interface ReadonlyStringArray {
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error!

類類型

類可以使用 implements 關(guān)鍵字實(shí)現(xiàn)某一個(gè)接口：

interface Point {
    x: number;
    y?: number;
    getX(): number;
}

class MyPoint implements Point {
    constructor(x: number) {
        this.x = x;
    }

    x: number;

    getX(): number {
        return this.x;
    }
}

接口描述了類的公共部分，而不是公共和私有兩部分。它不會(huì)幫你檢查類是否具有某些私有成員。

繼承接口

接口之間可以相互繼承，并且一個(gè)接口還可以繼承多個(gè)接口，就是將一個(gè)接口里的成員復(fù)制到另一個(gè)接口中：

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合類型

一個(gè)對(duì)象可以同時(shí)具有多種類型。一個(gè)例子就是，一個(gè)對(duì)象可以同時(shí)做為函數(shù)和對(duì)象使用，并帶有額外的屬性：

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = function(start: number) {};
    counter.interval = 123;
    counter.reset = function() {};
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;