ts中interface与type的区别_use an `interface` instead of a `type`

1.typeof 的类型别名可以用于其他的类型，比如 联合类型、元组类型、基本类型，interface只能表示function，object和class类型

// 基本类型
 
type person = string
 
// 联合类型
 
interface Dog {
 
 name: string;
 
}
 
interface Cat {
 
 age: number;
 
}
 
type animal = Dog | Cat
 
// 元组类型
 
interface Dog {
 
name: string;
 
}
 
interface Cat {
 
age: number;
 
}
 
type animal = [Dog, Cat]

2.type 的别名不可以多次定义会报错，而 interface 则可以多次定义，会将其视为合并到一起。

// ok
  interface aaa {
    age: Number;
  }
  interface aaa {
    name: string;
  }
 
  export const bbb = (params: aaa) => {
    ...
  }
 
  bbb({name: 'mm', age: 27})  // age和name属性都要有，否则就会报错
 
// 不ok  
// eslint提示：标识符“aaa”重复。ts(2300)。Use an `interface` instead of a `type`.
  type aaa = string | number;
  type aaa = {x: number, y: number};  

3.type 能用 in 关键字，而interface不行。

type Keys = "firstName" | "lastName" ;
 
type DudeType = {
    [key in Keys]: string;
}
 
const test: DudeType = {
    firstName: 'Anna',
    lastName: 'LMY',
}

4.默认导出的方式不同，inerface 支持同时声明，默认导出，而type必须先声明后导出

// 默认导出 不一致
export default interface{
    name: string;
    age: number;
}
 
type personInfo = [string, number];
export default personInfo;
 
// 分别导出 一致
export interface{
    name: string;
    age: number;
}
 
export type sizeType = 'small' | 'middle' | 'large' | undefined;

5..扩展方式不同，interface 用 extends 来扩展，而type 用 & 操作符扩展

// interface extends interface
interface Person {
  name: string
}
interface User extends Person {
  age: number
}
 
// interface extends type
type Person = {
  name: string
}
interface User extends Person {
  age: number
}
 
// type & type
type Person = {
   name: string
}
type User = Person & { age: number }
 
// type & interface
interface Person {
  name: string
}
type User = {age: number} & Person

6. type可以使用typeof获取实例类型

let div = document.createElement('div');
 
type B = typeof div