typescript-cover-image.jpg

接口

在 javascript 中，函數(shù)接收參數(shù)，因?yàn)?javascript 一門動(dòng)態(tài)語(yǔ)言沒有一套完整的類型系統(tǒng)，對(duì)于復(fù)雜的應(yīng)用開發(fā)中我們需要確定知道傳入?yún)?shù)的類型。

interface Tut{
    title:string;
    category:string;
}

function showTutDetail(tut:Tut):void{
    console.log(` title : ${tut.title} `);
}

可選屬性

我們用接口來描述一個(gè)接口，通過接口描述類型，有些屬性可能并不是必須的，可以通過在屬性名后面添加?表示該屬性不一定必須實(shí)現(xiàn)

interface Toolbar{
    title?:string;
    color?:string;
}

function createActivity(toolbar:Toolbar):{ title:string}{
    let result = {title:"empty"}
    if(toolbar.title){
        result.title = toolbar.title;
    }
    return result;
}

console.log(createActivity({title:"detail"}));

接口只讀屬性

interface Tut{
    readonly title:string;
    readonly author:string;
}


let angularTut:Tut = { title:"angular base tut",author:"zidea"} 

angularTut.title = "angular tut upated";

編譯時(shí)會(huì)報(bào)錯(cuò)，表示我們無(wú)法

demof.ts:9:12 - error TS2540: Cannot assign to 'title' because it is a read-only property.

9 angularTut.title = "angular tut upated";
             ~~~~~


Found 1 error.

函數(shù)類型

之前在大家對(duì)接口的理解用于描述類型，可以開闊一下思路接口也可以用于描述函數(shù)的形狀。都知道 interface 是定義類型，函數(shù)在 javascript 中也是一種類型，所以我們可以通過interface 來描述函數(shù)

interface RenderEngine{
    (html:String, context:object):string;
}

let renderHtml:RenderEngine;
renderHtml = function(html:string,context:{ title:string }){
    return `render ${html} with ${context.title}`;
}

let rendredStr = renderHtml("<div>{{title}}</div>",{title:"title"});

console.log(rendredStr);

可排序類型

和函數(shù)類型差不多，可排序類型類似我們熟悉的 direction 類型，我們不但可以指定數(shù)字型類型作為 key 也可以選擇 string 類型做為 key。

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

let mArr:StringArray;
mArr = ["Angular","React","Vue"];

let mTut:string = mArr[0]
console.log(mTut);

接口的繼承(擴(kuò)展)

接口的擴(kuò)展與類的擴(kuò)展類似，而且接口支持多擴(kuò)展。

interface ITut{
    title:string;
}

interface IVideoTut extends ITut{
    playtime:number;
}

let angularVideoTut = <IVideoTut>{}
angularVideoTut.title ="angualr base";
angularVideoTut.playtime = 120;

interface Size{
    width:number;
    height:number;
}

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

interface Button extends Size, Position{
    text:string;
}


let confirmBtn = <Button>{};

confirmBtn.width = 36;
confirmBtn.height = 12;
confirmBtn.text = "ok";

console.log(confirmBtn);

接口對(duì)類的擴(kuò)展

在我們熟悉 java 語(yǔ)言通常都是類實(shí)現(xiàn)接口，接口是無(wú)法區(qū)擴(kuò)展類。要想實(shí)現(xiàn)繼承某個(gè)類的接口，需要先繼承該類。我們這里 Button 需要先繼承 Control 然后才能實(shí)現(xiàn) ClickableControl 接口，因?yàn)榻涌贑lickableControl 繼承了 Control 。

class Control{
    private state:any;
}

interface ClickableControl extends Control{
    click():void
}

class Button extends Control implements ClickableControl{
    click(){}
}

// class TextView implements ClickableControl{
//     private state:any;
//     click(){}
// }

let btn:Button = new Button();

混合類型

通過接口描述了 javascript 真實(shí)世界中豐富的類型，因?yàn)?javascript 天生的靈活性，我們可能遇到遇到一些類型的組合。有些時(shí)候一對(duì)象需要能夠扮演函數(shù)和對(duì)象兩個(gè)角色

interface Tut{
    (course:number):string;
    title:string;
    play():void;
}

function getTut():Tut{
    let tut = <Tut>function(course:string){};
    tut.title ="angular base";
    tut.play = function(){};
    return tut;
}

let tut = getTut();
tut(10);
tut.play();
tut.title