Typescript中type和interface到底有何区别

Typescript中type和interface到底有何区别

使用过ts的伙伴都知道，在一些类型定义，使用type和interface都可以实现相同的效果，但是我们在使用中其实很少会去关注他们的区别点，今天趁着有空，我来学习总结一哈

1. 相同点

   1. 都可以用来描述一个对象或者函数

   // 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;
   

   2. 都允许扩展

   // 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使用&符号连接

2. 不同之处

   1. interface支持声明合并

   interface Info {
     name: string;
   }
   
   interface Info {
     age: number;
   }
   
   // 实际上的接口Info是
   {
     name: string;
     age: number;
   }
   

   2. type不但可以声明基本类型别名，除此之外还可以申明联合类型、元祖等类型

   // 基本类型别名
   type Name = string;
   
   // 联合类型
   type Name = string;
   type Age = number;
   type Info =  Name | Age
   
   // 元祖类型
   type Name = string;
   type Age = number;
   type Info =  [Name , Age]
   

   3. type的其它用法

   // 泛型变量
   type Callback<T> = (data: T) => void;  
   // Pair是一个泛型变量
   type Pair<T> = [T, T]; 
   // 下面这个就相当于type Coordinates = [number, number]; Coordinates是一个接受number参数类型的数组
   type Coordinates = Pair<number>;