接口就是定义一个类型,比方一个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。