interface和type的区别

interface

接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

interface people {
  name: string;
  age: number;
}
let p:people = { name: '北鸟南游', age: 18 }

接口属性具有以下特性

可选属性

interface people {
  name: string;
  age?: number;
}

只读属性

interface people {
  name: string;
  readonly age: number;
}

定义无法确定属性的接口

// 这个通过接口people创建的实例就可以添加其他属性
interface people {
    name: string;
    age?: number;
    [propName: string]: any
}

定义函数

interface add {
  (a:number, b:number):number
}

类接口

类实现接口

interface Animal {
  legs: number,
  run(type:string):string;
}
class Dog implements Animal {
  legs: number;
  run(type:string):string{
    return 'run use' + this.legs + type;
  }
}
class Bird implements Animal {
  legs: number;
  run(type:string):string{
    return 'run use' + this.legs + type;
  }
}

接口继承接口

interface router{
  name: string;
  link: string;
}
interface componets{
  name: string;
  props: Record<string, unknown>
}
interface APP extends router, componets{
  time: Date;
}

type类型别名

type相当于给类型起了一个名字

起别名并不是创建了一个新的类型。type可以作用于原始类型、联合类型、元组以及其他任何类型。

type Name = string; // 基本类型
type NameResolver = () => string; // 函数
type NameOrResolver = Name | NameResolver; // 联合类型

类型别名可以是范型，可以添加类型参数，并且在类型别名的右侧传入。

type Components<T> = { value:T }

可以在类型别名的属性里引用自己。

type Components<T> = { 
    value: T,
  comp: Components<T>
}

可以用交叉类型使用，类型别名扩展属性使用&

type LinkedList<T> = T & { next: LinkedList<T> };
interface Dom {
    name: string;
}
var dom: LinkedList<Dom>;
var s = dom.name;
var s = dom.next.name;
var s = dom.next.next.name;
var s = dom.next.next.next.name;

相同点

都可以描述对象或者函数

interface定义对象或函数

// 定义对象形式接口
interface IPerson{
  name:string;
  age:number;
}
// 定义函数形式接口
interface SetPerson{
    (name:string, age:number) : void;
}

type定义对象或函数

// 定义对象形式类型别名
type TPerson = {
    name:string,
  age:number
}
// 定义函数形式类型别名
type SetPerson = (name:string, age:number) : void;

其他type类型别名

类型别名比接口具有更大的适用性，可以定义基本类型、联合类型、元组。

// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
// dom
let div = document.createElement('div');
type B = typeof div;

都允许扩展extends

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多，但是两者语法不同。

interface extends interface

interface Name { 
 name: string; 
}
interface User extends Name { 
 age: number; 
}

type 扩展 type要使用&

type Name = {
    name : string
}
type Person = Name & { age : number}

interface extends type

type Name = {
    name:string
}
interface Person extends Name{
    age:number
}

type 扩展 interface要使用&

interface Name {
    name:string
}
type Person = Name & {
    age:number
}

总结：interface扩展属性使用extends，type扩展属性使用&

应用

给type类型对象扩展属性，项目中应用

import type { RouteConfig } from 'vue-router';
// 给RouteConfig类型扩展属性
const newRoutes : Array<RouteConfig & Record<string, any>> = []

将对象定义为类型

const { dashboradCode } = routerParam;
// dashboradCode是对象，通过typeof转化为类型
const data: typeof dashboradCode = JSON.parse(routerParam);

不同点

type可以声明基本类型别名，联合类型，元组等类型

// 基本类型别名
type height = number;
type name = string;
// 联合类型
interface Dog {
    wang()
}
interface Cat{
    miao()
}
type Pet = Dog | Cat;
// 具体定义数组每个位置的类型
type Pet = [ Dog, Cat ]

type语句中可以使用 typeof 获取实例的类型进行赋值

// 当你想获取一个变量的类型时，使用 typeof
let div = document.createElement('div');
type B = typeof div

type其他操作

type StringOrNumber = string | number; 
type Text = string | { text: string }; 
type NameLookup = Dictionary<string, Person>; 
type Callback<T> = (data: T) => void; 
type Pair<T> = [T, T]; 
type Coordinates = Pair<number>; 
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface 可以声明合并而 type 不行

声明接口时，如果接口已经存在，则属性会进行合并。就是说接口可以重复定义。
type类型别名重复定义，会报错。

interface Person{
    name:string
}
interface Person{
    age:number
}
// 接口Person最终类型name和age两个属性

type language = {
  id:number;
}
// ts(2300)重复的标志错误
type language = {
  name:string;
}

type可以计算属性，接口不可以

type类型别名可以使用in关键字生成映射类型。

• 类型变量key会依次绑定type的每个属性
• 字符串字面量keys，包含了要迭代的属性名集合
• 属性类型的定义 ```typescript type router = “name” | “props” | “children”; type Route = {

} const r: Route = { name: “route”, props: “up”, children: ‘many’ } // 定义接口使用in则报错 // interface Route { // [key in keys]: string // }

<a name="eMowf"></a>
### 作为默认值导出
接口可以直接定义并导出
```typescript
export default interface Config {
  name: string
}

type类型别名不可以直接定义导出

// 会报错
// export default type Config1 = {
//   name: string
// }
//正确的使用类型别名方式，先定义再导出
type Config2 = {
    name: string
}
export default Config2

类class可以实现接口和类型别名【除了联合类型外】

类型别名联合类型是不确定类型。类和接口被认为是静态的，实现联合类型时报错。

interface Point {
  x: number;
  y: number;
}
class SomePoint implements Point {
  x: 1;
  y: 2;
}
type Point2 = {
  x: number;
  y: number;
};
class SomePoint2 implements Point2 {
  x: 1;
  y: 2;
}
type PartialPoint = { x: number; } | { y: number; };
// FIXME: can not implement a union type
// class SomePartialPoint implements PartialPoint {
//  x: 1;
//  y: 2;
// }

参考文档：
https://pawelgrzybek.com/typescript-interface-vs-type/
https://stackoverflow.com/questions/37233735/interfaces-vs-types-in-typescript