TypeScript之接口

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

作者:zxl20070701原文地址:https://segmentfault.com/a/1190000043340489

%s 个评论

要回复文章请先登录注册