1、type和interface的区别
type和interface都可以用来表示接口,但是也有差异,下面我们来总结一下:
相同点
- type和interface的相同点:都是用来定义对象或函数的形状。
interface demo{
name: string
age: number
}
interface demoFunc { (name:string,age:number): void
}
type demo= {
name: string
age: number
}
type demoFunc= (name:string,age:number) => { }
- 支持继承,也可以互相继承。interface是通过extends实现的,type是通过&实现的。
type aa = {
name: string
}
interface bb {
name: string
}
type cc = aa & {
age: number
}
type cc = bb & {
age: number
}
interface dd extends aa {
age: number
}
interface dd extends bb {
age: number
}
type和interface的不同点
typeof 类型别名可以用于其它类型 (联合类型、元组类型、基本类型(原始值)),interface不支持
type可以定义 基本类型的别名,如 type myString = string
type可以通过 typeof 操作符来定义,如 type myType = typeof someObj
type可以申明 联合类型,如 type unionType = myType1 | myType2
type可以申明 元组类型,如 type yuanzu = [myType1, myType2]
interface 可以多次定义 并被视为合并所有声明成员 type 不支持
interface可以 声明合并,这种情况下,如果是type的话,就会报 重复定义 的警告,因此是无法实现 声明合并 的。
interface peoples {
name: string
}
interface peoples {
age: number
}
interface peoples {
sex: string
}
/*
peoples 实际为 {
name: string
age: number
sex: string
}
*/
3 type 能使用 in 关键字生成映射类型,但 interface 不行。
type Keys = 'aaa' | 'bbb';
type DudeType = {
[key in Keys]: string;
};
const test: DudeType = {
firstname: 'aaa',
surname: 'bbb',
};
4 type和interface 的默认导出方式不同
// inerface 支持同时声明,默认导出 而type必须先声明后导出
export default interface Person{
name: string;
}
// 同一个js模块只能存在一个默认导出哦
type Person2 = {name: string}
export default Config2