Typescript中type和interface到底有何区别
使用过ts的伙伴都知道,在一些类型定义,使用type和interface都可以实现相同的效果,但是我们在使用中其实很少会去关注他们的区别点,今天趁着有空,我来学习总结一哈
-
相同点
- 都可以用来描述一个对象或者函数
// interface interface Info { name:string; age:number; }; interface SetInfo { (name:string,age:number):viod }; // type type UserInfo = {name:string; age:number}; type SetUserInfo = (name:string,age:number):viod;
- 都允许扩展
// interface 扩展 interface interface Name { name: string; } interface Info extends Name { age:number } // interface 扩展 type type Name = { name: string; } interface Info extends Name { age:number } // type 扩展 type type Name = { name: string; } type Info = Name & {age: number} // type 扩展 interface interface Name { name: string; } type Info = Name & {age: number}
区别是,interface使用关键字extends扩展,type使用&符号连接
-
不同之处
- interface支持声明合并
interface Info { name: string; } interface Info { age: number; } // 实际上的接口Info是 { name: string; age: number; }
- type不但可以声明基本类型别名,除此之外还可以申明联合类型、元祖等类型
// 基本类型别名 type Name = string; // 联合类型 type Name = string; type Age = number; type Info = Name | Age // 元祖类型 type Name = string; type Age = number; type Info = [Name , Age]
- type的其它用法
// 泛型变量 type Callback<T> = (data: T) => void; // Pair是一个泛型变量 type Pair<T> = [T, T]; // 下面这个就相当于type Coordinates = [number, number]; Coordinates是一个接受number参数类型的数组 type Coordinates = Pair<number>;