Skip to main content

接口

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

什么是接口

在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。

TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

简单的例子

interface Person {
name: string;
age: number;
}

let tom: Person = {
name: 'Tom',
age: 25
};

上面的例子中,我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。这样,我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。

定义的变量比接口少了一些属性是不允许的:

interface Person {
name: string;
age: number;
}

let tom: Person = {
name: 'Tom'
};
// 类型 "{ name: string; }" 中缺少属性 "age",但类型 "Person" 中需要该属性。

多一些属性也是不允许的:

interface Person {
name: string;
age: number;
}

let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'

};
// 不能将类型“{ name: string; age: number; gender: string; }”分配给类型“Person”。
// 对象文字可以只指定已知属性,并且“gender”不在类型“Person”中。

可见,赋值的时候,变量的形状必须和接口的形状保持一致。

和类型别名区别

在 TypeScript 接口中有很多方式来声明变量的结构,比如之前的内联注解或者类型别名。

// 内联注解
let point: { x: number; y: number }
// 类型别名
type Point = { x: number; y: number }
// 接口
interface Point { x: number; y: number }

interface 的好处在于,如果有人创建了一个基于 Point 的库来添加新成员, 那么他可以轻松将此成员添加到 Point 的现有声明中:

interface Point {
x: number,
y: number
}

interface Point {
z: number
}

TypeScript 接口是开放式的,这是 TypeScript 的一个重要原则。

可选属性

有时我们希望不要完全匹配一个形状,那么可以用可选属性:

interface Person {
name: string;
age?: number;
}

let tom: Person = {
name: 'Tom'
};

let jerry: Person = {
name: 'jerry',
age: 18
};

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性:

interface Person {
name: string;
age?: number;
}

let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};
// 不能将类型“{ name: string; age: number; gender: string; }”分配给类型“Person”。
// 对象文字可以只指定已知属性,并且“gender”不在类型“Person”中。

可索引类型

我们也可以描述那些能够通过索引得到的类型,比如 a[10]Person["address"]

可索引类型具有一个索引签名,它描述了对象索引的类型,还有相应的索引返回值类型

interface Person {
name: string;
age?: number;
[propName: string]: any;
}

let tom: Person = {
name: 'Tom',
gender: 'male'
};

上面例子里,我们定义了 Person 接口,它具有索引签名。 这个索引签名表示了当用 string 去索引 Person 时会得到 any 类型的返回值。

tip

需要注意的是,一旦定义了可索引类型,那么确定属性和可选属性的类型都必须是它的类型的子集

interface Person {
name: string;
age?: number;
[propName: string]: string;
}

let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};
// 类型“number | undefined”的属性“age”不能赋给“string”索引类型“string”。
// 不能将类型“{ name: string; age: number; gender: string; }”分配给类型“Person”。
// 属性“age”与索引签名不兼容。
// 不能将类型“number”分配给类型“string”。

上例中,可索引类型的值允许是 string,但是可选属性 age 的值却是 numbernumber 不是 string 的子属性,所以报错了。

一个接口中只能定义一个可索引类型。如果接口中有多个类型的属性,则可以在可索引类型中使用联合类型:

interface Person {
name: string;
age?: number;
[propName: string]: string | number | undefined;
}

let tom: Person = {
name: 'Tom',
age: 25,
gender: 'male'
};

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}

let tom: Person = {
id: 1,
name: 'Tom',
gender: 'male'
};

tom.id = 2;
// 无法分配到 "id" ,因为它是只读属性。

上例中,使用 readonly 定义的属性 id 初始化后,又被赋值了,所以报错了。

注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候:

interface Person {
readonly id: number;
name: string;
age?: number;
[propName: string]: any;
}

let tom: Person = {
name: 'Tom',
gender: 'male'
};

tom.id = 2;
// 类型 "{ name: string; gender: string; }" 中缺少属性 "id",但类型 "Person" 中需要该属性。
// 无法分配到 "id" ,因为它是只读属性。

上例中,报错信息有两处,第一处是在对 tom 进行赋值的时候,没有给 id 赋值。

第二处是在给 tom.id 赋值的时候,由于它是只读属性,所以报错了。

函数类型

接口除了描述带有属性的普通对象外,也可以描述函数类型。

使用接口描述函数类型,我们需要先给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFunc {
(source: string, subString: string): boolean;
}

这样定义后,我们可以像使用其它接口一样使用这个函数类型的接口。

let mySearch: SearchFunc;
mySearch = function (source: string, subString: string) {
let result = source.search(subString);
return result > -1;
}

对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配。

let mySearch: SearchFunc;
mySearch = function (src: string, sub: string): boolean {
let result = src.search(sub);
return result > -1;
}

函数的参数会逐个进行检查,要求对应位置上的参数类型是兼容的。 即使你没有指定类型,TypeScript的类型系统会推断出参数类型和返回值类型。

let mySearch: SearchFunc;
mySearch = function(src, sub) {
let result = src.search(sub);
return result > -1;
}

参考文档

TypeScript入门教程

深入理解TypeScript