前言
真正的理解interface 和 type 之间到底有啥区别, 分别在什么场景下使用
一、类型别名 type
类型别名用来给一个类型起个新名字,使用 type 创建类型别名,类型别名不仅可以用来表示基本类型,还可以用来表示对象类型、联合类型、元组和交集。
二、接口 interface
接口是命名数据结构(例如对象)的另一种方式;与type 不同,interface仅限于描述对象类型。
三、两者之间的异同
1.相似之处:
1.1都可以描述 Object和Function
两者都可以用来描述对象或函数,但语法不同:
代码如下(示例):
type
type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void;
interface
interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; }
1.2.二者都可以被继承
值得注意的是,接口和类型别名并不互斥。类型别名可以继承接口,反之亦然。只是在实现形式上,稍微有些差别。
代码如下(示例):
// interface 继承 interface interface Person{ name:string } interface Student extends Person { stuNo: number } // interface 继承 type type Person = { name:string } interface Student extends Person { stuNo: number } // type 继承 type type Person = { name:string } type Student = Person & { stuNo: number } // type 继承 interface interface Person{ name:string } type Student = Person & { stuNo: number }
1.3实现 implements
类可以实现interface 以及 type(除联合类型外)
interface ICat{ setName(name:string): void; } class Cat implements ICat{ setName(name:string):void{ // todo } } // type type ICat = { setName(name:string): void; } class Cat implements ICat{ setName(name:string):void{ // todo } }
上面提到了特殊情况,类无法实现联合类型, 是什么意思呢?
type Person = { name: string; } | { setName(name:string): void }; // 无法对联合类型Person进行实现 // error: A class can only implement an object type or intersection of object types with statically known members. class Student implements Person { name= "张三"; setName(name:string):void{ // todo } }
2.不同之处:
2.1type优势
1. 定义基本类型别名
type可以定义基本类型别名, 但是interface无法定义,如:
type userName = string type stuNo = number ...
2. 声明联合类型
type可以声明联合类型, 例如:
type Student = {stuNo: number} | {classId: number}
3. 声明元组
type可以声明 元组类型:
type Data = [number, string];
4. 索引签名问题
如果你经常使用TypeScript, 一定遇到过相似的错误:
Type 'xxx' is not assignable to type 'yyy'
Index signature is missing in type 'xxx'.
看个例子来理解问题:
interface propType{ [key: string] : string } let props: propType type dataType = { title: string } interface dataType1 { title: string } const data: dataType = {title: "订单页面"} const data1: dataType1 = {title: "订单页面"} props = data // Error:类型“dataType1”不可分配给类型“propType”; 类型“dataType1”中缺少索引签名 props = data1
原因:由于interfac可以进行声明合并,所以总有可能将新成员添加到同一个interface定义的类型上,也就是说interface定义的类型是不确定的;而type一旦声明类型,就无法更改它们。因此,索引签名是已知的。
2.2interface优势
1. 声明合并
如果你多次声明一个同名的接口,TypeScript 会将它们合并到一个声明中,并将它们视为一个接口。这称为声明合并, 例如:
interface Person { name: string } interface Person { age: number } let user: Person = { name: "Tolu", age: 0, };
这种情况下,如果是type的话,重复使用Person是会报错的:
type Person { name: string }; // Error: 标识符“Person”重复。ts(2300) type Person { age: number }
总结
官方推荐用 interface,其他无法满足需求的情况下用 type。
但联合类型 和 交叉类型 是很常用的,所以避免不了大量使用 type 的场景,一些复杂类型也需要通过组装后形成类型别名来使用。
所以,如果想保持代码统一,还是可选择使用 type。通过上面的对比,类型别名 其实可涵盖 interface 的大部分场景。
编写三方库时使用interface,其更加灵活自动的类型合并可应对未知的复杂使用场景。