乐趣区

关于typescript:TypeScript之接口

jiezi

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

退出移动版