前言
在上一篇文章中我们学习了TS
中的数组和元组,本篇文章我们主要了解TS
中的interface
接口。
interface
接口介绍
interface 是一种类型约定,中文译为“接口”。使用了这个interface
的对象,就拥有了指定的类型结构。
interface Person {
firstName: string;
lastName: string;
}
上面示例中,定义了一个接口Person
,它指定一个对象模板,拥有属性firstName
和lastName
。任何实现这个接口的对象,都必须部署这两个属性。
如以下实例,变量p
的类型就是接口Person
,所以必须符合Person
指定的结构,否则就会报错。
const p:Person = {
firstName: 'Li',
lastName: 'Xu',
};
interface 的使用
在interface
接口中,一般有着以下几类成员。
- 对象属性
- 对象的属性索引
- 对象方法
- 函数
对象属性
示例:
interface Point {
x: number;
y: number;
}
如果属性是可选的,就在属性名后面加一个问号。
interface Foo {
x?: string;
}
如果属性是只读的,需要加上readonly
修饰符。
interface A {
readonly a: string;
}
对象的属性索引
interface A {
[Key: string]: number;
}
上面示例中,[Key: string]
就是属性的字符串索引,表示属性名只要是字符串,都符合类型要求。属性索引共有string
、number
和symbol
三种类型。
对象方法
写法如下:
// 写法一
interface A {
f(x: boolean): string;
}
// 写法二
interface B {
f: (x: boolean) => string;
}
// 写法三
interface C {
f: { (x: boolean): string };
}
这三种写法都定义了一个接受布尔类型参数并返回字符串类型的函数。
函数
interface
也可以用来声明独立的函数。
interface Add {
(x:number, y:number): number;
}
const myAdd:Add = (x,y) => x + y;
interface
的继承
interface
可以继承其他类型。
interface
继承interface
interface
可以使用extends
关键字,继承其他interface
。
interface Shape {
name: string;
}
interface Circle extends Shape {
radius: number;
}
extends
关键字会从继承的接口里面拷贝属性类型,这样就不必书写重复的属性。
而且interface
还允许多重继承,如以下例子。
interface Style {
color: string;
}
interface Shape {
name: string;
}
interface Circle extends Style, Shape {
radius: number;
}
如果子接口与父接口存在同名属性,那么子接口的属性会覆盖父接口的属性。但是子接口与父接口的同名属性必须是类型兼容的,不能有冲突。
interface Foo {
id: string;
}
interface Bar extends Foo {
id: number; // 报错
}
interface
继承type
interface
可以继承type
命令定义的对象类型。如果type
命令定义的类型不是对象,interface 就无法继承。
type Country = {
name: string;
capital: string;
}
interface CountryWithPop extends Country {
population: number;
}
interface
继承class
class A {
x:string = '';
y():boolean {
return true;
}
}
interface B extends A {
z: number
}
interface
与type
的区别
interface
命令与type
命令作用类似,都可以表示对象类型。
很多对象类型既可以用 interface 表示,也可以用 type 表示。而且,两者往往可以换用,几乎所有的 interface 命令都可以改写为 type 命令。
相同点
都能为对象类型起名。
type Country = {
name: string;
capital: string;
}
interface Country {
name: string;
capital: string;
}
不同点
type
能够表示非对象类型,而interface
只能表示对象类型。interface
可以继承其他类型,type
不支持继承。- 同名
interface
会自动合并,同名type
则会报错。也就是说,TypeScript 不允许使用type
多次定义同一个类型。 interface
不能包含属性映射,type
可以。this
关键字只能用于interface
。- type 可以扩展原始数据类型,interface 不行。