Typescript 中的 interface 与 type 异同点

总结: 如果是非对象类型的声明使用 type，如果是对象类型的声明那么使用 interface。

• 在TypeScript中，interface 和 type 都是用来定义自定义类型的关键字

// interface 使用 interface 定义
interface Person { name: string; }

// type 使用关键字 type 定义
type Person = { name: string; }

• interface 接口类型只能用来声明对象；type 类型使用范围更广，不仅支持 interface 定义的对象结构，还支持基本类型、联合类型、交叉类型、元组等任何需要手写的类型

// interface
interface Person {
      age: number,// 确定属性
      name?: string,// 可选属性（加问号即可）
      [propName: string]: any,// 任意属性
      readonly sex: string,// 只读属性
}

// type
type num = number; // 基本类型
type stringOrNum = string | number; // 联合类型
type person = {name: string}; // 对象类型
type user = person & { age: number } // 交叉类型
type data = [string, number]; // 元组
type fun = () => void; // 函数类型

// 使用 in 关键字生成映射类型
type keys = 'firstname' | 'lastname';
type nameTypes = {
  [key in Keys]: string;
};
const test: nameTypes = {
  firstname: 'Ge',
  lastname: 'Jasmine',
}

•  两者都可以被继承，但语法不同

// interface 继承 interface
interface Person{
    name: string
}
interface Student extends Person { stuNo: number }

// interface 继承 type
type Person{
    name: string
}
interface Student extends Person { stuNo: number }

// type 继承 type
type Person{
    name: string
}
type Student = Person & { stuNo: number }

// type 继承 interface
interface Person{
    name:string
}
type Student = Person & { stuNo: number }

• interface 可以多次声明，即可以重复的对某个接口来定义属性和方法； 而 type 定义的是别名，别名是不能重复的

interface Person {
  name: string    
  age: number
}
interface Person {
  address: string
}
const personInfo: Person = {
  name: 'zimo',
  age: 18,
  address: '北京'
}

• interface 可以被类实现

 class Person implements IPerson {}

• 默认导出方式不同

// inerface 支持同时声明，默认导出
export default interface name {
  name: string;
};

// type 必须先声明后导出
type typeName = {name: string};
export default typeName