走进 Typescript （2）接口

typescript-cover-image.jpg

接口

在 javascript 中，函数接收参数，因为 javascript 一门动态语言没有一套完整的类型系统，对于复杂的应用开发中我们需要确定知道传入参数的类型。

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

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

可选属性

我们用接口来描述一个接口，通过接口描述类型，有些属性可能并不是必须的，可以通过在属性名后面添加?表示该属性不一定必须实现

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

编译时会报错，表示我们无法

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.

函数类型

之前在大家对接口的理解用于描述类型，可以开阔一下思路接口也可以用于描述函数的形状。都知道 interface 是定义类型，函数在 javascript 中也是一种类型，所以我们可以通过interface 来描述函数

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

可排序类型

和函数类型差不多，可排序类型类似我们熟悉的 direction 类型，我们不但可以指定数字型类型作为 key 也可以选择 string 类型做为 key。

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

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

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

接口的继承(扩展)

接口的扩展与类的扩展类似，而且接口支持多扩展。

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

接口对类的扩展

在我们熟悉 java 语言通常都是类实现接口，接口是无法区扩展类。要想实现继承某个类的接口，需要先继承该类。我们这里 Button 需要先继承 Control 然后才能实现 ClickableControl 接口，因为接口ClickableControl 继承了 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 真实世界中丰富的类型，因为 javascript 天生的灵活性，我们可能遇到遇到一些类型的组合。有些时候一对象需要能够扮演函数和对象两个角色

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