typescript handbook 學習筆記3

概述

這是我學習typescript的筆記。寫這個筆記的緣由主要有2個，一個是熟悉相關的寫法；另外一個是理清其中一些晦澀的東西。供之後開發時參考，相信對其餘人也有用。html

學習typescript建議直接看中文文檔或英文文檔。我是看的英文文檔。git

interfaces接口

類接口

interface SquareConfig {
    //標準寫法
    label: string;
    //可選屬性
    color?: string;
    //只讀屬性
    readonly x: number;
    //缺省屬性
    [propName: string]: any;
}

//使用接口
function createSquare(config: SquareConfig): {color: string; area: number} {
    //用config.color這個形式調用
}

//跳過額外屬性檢查的方法一：類型斷言(強制跳過)
let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

//跳過額外屬性檢查的方法二：賦給變量(自動跳過)
let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

其它接口

//函數接口，參數名不重要
interface SearchFunc {
    (a: string, b: string): boolean;
}

//使用函數接口，注意參數中的： string能夠省略。
let mySearch: SearchFunc;
mySearch = function(source: string, substring: string): boolean {
    let result = source.search(substring);
    return result > -1;
}

//可索引的接口(數字索引)
interface StringArray {
    [index: number]: string;
}

//使用可索引接口
let myArray: StringArray;
myArray = ['Bob', 'Fred'];
let myStr: string = myArray[0];

//使用數字索引+字符串索引時，數字索引的類型須要是字符串索引的類型的子類型
iterface NumberDictionary {
    [index: string]: number; //字符串索引
    readonly [index: number]: number; //只讀數字索引，必須爲number的子類型
    length: number; //ok
    name: string; //error
}

實現接口

接口只會檢查類的實例屬性，不會檢查類的靜態屬性。因此不會檢查constructor。若是constructor要用接口檢查的話，須要額外給它定義一個接口，以下所示：ide

//額外定義constructor接口
interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface;
}

interface ClockInterface {
    tick();
}

function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

繼承接口

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

//繼承用extends，實現類用implements。
interface Square extends Shape, PenStroke {
    sideLength: number;
}

//接口的另外一種寫法。實現一個對象。爲何不用：？
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合接口

//既能夠當作函數接口，又能夠當作類接口
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

//當作函數接口
let counter01 = <Counter>function(start: number) {};

//當作類接口
let counter02 = <Counter>{};
counter02.interval = 2;
counter02.reset();

繼承類的接口

class Control {
    private state: any;
}

interface SelectableControl extends Control {
    select(): void;
}

//error，須要先繼承Control才能實現接口SelectableControl
class Image implements SelectableControl {
    select() { }
}

//OK
class Button extends Control implements SelectableControl {
    select() { }
}