接口就是定義一個類型，比如一個json數據或一個函數等，描述其具體的結構就可以使用接口來規範。

基礎説明

先來看個例子：

interface MyDataType {
    name: string,
    age: number
}

我們定義了一個json的數據格式，可以且只可以包含值是字符串的name屬性和值是數字的age屬性，下面是一個正確的例子：

let myData: MyDataType={
    name:"小明",
    age:19
};

可選屬性

假如我們認為age是可選的，也就是 {name:"小明"} 也是正確的值，那麼就可以這樣調整：

interface MyDataType {
    name: string,
    age?: number
}

只讀屬性

如果你希望name不被後續修改，也就是隻讀的，可以這樣修改：

interface MyDataType {
    readonly name: string,
    age: number
}

如果一個數組類型 Array 希望標記是隻讀的，可以使用新類型 ReadonlyArray 進行代替。

函數類型

比如我們想定義一個函數，傳遞一個字符串和一個數字，返回一個字符串：

interface DoitFunc {
    (name: string, age: number): string
}

下面是一個正確的例子：

let doit: DoitFunc = function (name: string, age: number): string {
    return "姓名：" + name + "，年齡：" + age;
}

可索引的類型

基礎使用

也就是那些可以通過 索引 得到值的類型，典型的就是json和數組。

interface MyDataType {
    [index: number]: string
}

温馨提示：比如這裏的index可以是任意合法的標誌符，具體是什麼並沒有什麼意義。

比如下面的值就是合法的：

let myData: MyDataType = ["小明", "小強"];

或

let myData: MyDataType = {};
myData[0] = "小明";
myData[1] = "小強";

多類型屬性

索引除了是數字外，還可以是字符串，定義和上面是類似的。此外，也可以同時定義索引可以是字符串或數字：

interface MyDataType {
    [key1: number]: string;
    [key2: string]: string;
}

下面是一個正確的例子：

let myData: MyDataType = {};
myData[0] = "小明";
myData[1] = "小強";
myData['key'] = "小麗";

雖然可以同時使用兩種類型的索引，但需要注意：數字索引的返回值必須是字符串索引返回值類型的子類型。

類類型

比如我們希望定義的類都有一個屬性currentTime表示當前時間，那我們可以定義一個類接口，然後所有的類都實現這個接口。

定義

interface ClockInterface {
    currentTime: Date;
}

使用

class Clock implements ClockInterface {
    currentTime: Date;
    constructor() { 
        this.currentTime=new Date();
    }
}

繼承接口

比如和ClockInterface相比，我們有一個DateInterface接口，多了一個獲取保存的currentTime值的方法getValue：

定義

interface DateInterface extends ClockInterface {
    getValue(): Date;
}

使用

class MyDate implements DateInterface {
    currentTime: Date;
    getValue() {
        return this.currentTime;
    }
    constructor() {
        this.currentTime = new Date();
    }
}

混合類型

比如jQuery，他既是函數，也可以作為對象使用上面的屬性或方法。

定義

interface jQueryType {
    (selector: string): any;
    version: string;
    ajax(method: string, url: string, data: any, callback: Function): void
}

使用

let myJQuery = <jQueryType>function (selector: string): any {
    // todo
    return [];
};
myJQuery.version = '1.0.0';
myJQuery.ajax = function (method: string, url: string, data: any, callback: Function): void {
    // todo
};

這樣獲取的myJQuery本身是一個方法，同時有一個屬性version和一個方法ajax。