TS学习——type与interface的异同点
引:在学习TS时发现type和interface都可以设置类型/接口,那么他们俩有什么区别呢?又应该怎么选择呢?其实在使用时除了写法不同,他们的作用都是一样的。接下来我们看一下他们有什么异同点吧!
一、相同点
type和interface都可以用来定义接口/类型:
使用type定义:
type exampleObj = {
name: string
age: number
}
type exampleFun = (name:string,age:number) => void;
使用interface定义:
interface exampleObj {
name: string
age: number
}
interface exampleFun {
(name:string,age:number): void;
}
type和interface都支持继承,且可以支持互相继承,但具体表现形式上面会有区别
type继承是通过&实现的
type typaA = {
name: string
}
interface interfaceA {
name: string
}
type typeB = typaA & {
age: number
}
type typeC = interfaceA & {
age: number
}
interface继承是通过extends实现的
type typaA = {
name: string
}
interface interfaceA {
name: string
}
interface interfaceB extends typaA {
age: number
}
interface interfaceC extends interfaceA {
age: number
}
二、不同点
type可以通过 typeof 操作符来定义
const name = "Alice";
type NameType = typeof name;
const newName: NameType = "Bob"; // 正确
// const newName: NameType = 123; // 错误,类型不匹配
const user = {
id: 1,
name: "Alice",
age: 30,
};
type UserType = typeof user;
const newUser: UserType = {
id: 2,
name: "Bob",
age: 25,
};
type可以申明 联合类型
type typaA = {
name: string
}
type typeB = {
age: number
}
type typeC = typaA | typeB
type可以申明 元组类型
type typaA = {
name: string
}
type typeB = {
age: number
}
type typeC = [typaA , typeB]
interface可以进行声明合并,但type重复定义会报错,因此是无法实现声明合并的
interface interfaceA {
name: string
}
interface interfaceA {
age: number
}
/*
interfaceA实际结果是:
interfaceA {
name: string
age: number
}
*/