TypeScript 初識 - 接口

gnehc 發布于2019-08-26 10:56 / 1528人閱讀

摘要：接口的作用是聲明變量的結構和方法，但不做具體的實現。這兩個使用場景不同。額外的屬性檢查從字面上的意思看，其實就是對接口未定義的屬性進行檢查。上面的例子，定義了接口，它具有索引簽名。它不會幫你檢查類是否具有某些私有成員。

接口的作用是聲明變量的結構和方法，但不做具體的實現。通常，接口會強制對所有成員進行類型檢查，包括數量和類型：

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
};

可選屬性

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

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

let name: Name;
name = {
    // 只有 first 也不會報錯
    first: "John"
};

只讀屬性

一些對象屬性只能在對象剛剛創建的時候修改其值。可以在屬性名前用 readonly 來指定只讀屬性：

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

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

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 針對一個對象的屬性，const 針對的是一個變量。這兩個使用場景不同。

額外的屬性檢查

從字面上的意思看，其實就是對接口未定義的屬性進行檢查。

當一個變量實現接口時，變量中存在了接口未定義的屬性時，TypeScript 會進行報錯：

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

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

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

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

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

函數類型

可以使用接口表示函數類型，需要給接口定義一個調用簽名：

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

和變量類型的接口不同，函數的參數名不需要與接口定義的名字相匹配。函數的參數會逐個進行檢查，要求對應位置上的參數類型是兼容的：

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

如果沒有指定類型，TypeScript 的類型系統會推斷出參數類型，因為函數直接賦值給了 SearchFunc 類型變量：

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

可索引的類型

可索引類型具有一個索引簽名，它描述了對象索引的類型，還有相應的索引返回值類型。

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

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

let myStr: string = myArray[0];

上面的例子，定義了 StringArray 接口，它具有索引簽名。這個索引簽名表示了當用 number 去索引 StringArray 時會得到 string 類型的返回值。

TypeScript 支持兩種索引簽名：字符串和數字。可以同時使用兩種類型的索引，但是數字索引的返回值必須是字符串索引返回值類型的子類型。其實，這相當于 JavaScript 對象的 key，數字類型會轉換成字符串類型再取值。

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

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

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

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

類類型

類可以使用 implements 關鍵字實現某一個接口：

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;
    }
}

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

繼承接口

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

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;

混合類型

一個對象可以同時具有多種類型。一個例子就是，一個對象可以同時做為函數和對象使用，并帶有額外的屬性：

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;

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106847.html

TypeScript 初識 - 類

摘要：抽象類抽象類做為其它字類的基類使用，一般不會直接被實例化。抽象類中可以包含具體實現，接口不能。抽象類在運行時是可見的，可以通過判斷。接口只能描述類的公共部分，不會檢查私有成員，而抽象類沒有這樣的限制。一個普通的類 class Greeter { greeting: string; constructor(message: string) { this....

鄒強 2019-08-26 10:57 評論0 收藏0
TypeScript 初識

摘要：當你陷在一個中大型項目中時應用日趨成為常態，沒有類型約束類型推斷，總有種牽一發而動全身的危機和束縛。總體而言，這些付出相對于代碼的健壯性和可維護性，都是值得的。目前主流的都為的開發提供了良好的支持，比如和。參考資料中文文檔文章博客地址：http://pinggod.com/2016/Typescript/ TypeScript 是 JavaScript 的超集，為 JavaScrip...

iliyaku 2019-08-19 18:47 評論0 收藏0
TypeScript 初識 - 內置對象

摘要：自帶的內置對象都可以直接在中當作定義好的類型。的內置對象標準提供了常用的內置對象等。在不需要額外引入就可以直接使用這些內置對象用寫不是內置對象的一部分，想要寫時提示，需要引入第三方聲明文件 JavaScript 自帶的內置對象都可以直接在 TypeScript 中當作定義好的類型。 TypeScript 核心庫的定義文件 TypeScript 核心庫的定義文件定義了所有瀏覽器環境需要用...

lordharrd 2019-08-26 10:44 評論0 收藏0
TypeScript 初識 - 基礎

摘要：安裝通過命令進行安裝創建文件文件名以擴展名結尾編譯通過命令行進行編譯通過運行任務的方式進行編譯下使用顯示運行任務，選擇構建進行編譯。安裝通過 npm 命令進行安裝： $ npm i -g typescript 創建 ts 文件 Typescript 文件名以 ts 擴展名結尾： function hello(value: string) { console.log(`hel...

CODING 2019-08-26 10:43 評論0 收藏0
TypeScript 初識 - 函數

摘要：函數類型函數返回值類型我們可以給每個參數添加類型之后再為函數本身添加返回值類型。能夠根據返回語句自動推斷出返回值類型，所以通常可以省略它匿名函數完整函數類型完整的函數類型包含兩部分參數類型和返回值類型。函數是 JavaScript 的第一等公民，函數在 JavaScript 中可以實現抽象層、模擬類、信息隱藏和模塊等等。TypeScript 在一定基礎上擴展了函數的功能。函數類型 ...

ARGUS 2019-08-26 11:00 評論0 收藏0