typescript中interface和type的区别

1. 语法不同

两者都可以用来描述对象或函数的类型，但是语法不同。

// interface
interface Point {
  x: number;
  y: number;
}

interface SetPoint {
  (x: number, y: number): void;
}


// type
type Point = {
  x: number;
  y: number;
};

type SetPoint = (x: number, y: number) => void;

2. interface可以定义多次，并将被视为单个接口

多次声明同名的type会报错

// These two declarations become:
// interface Point { x: number; y: number; }
interface Point { x: number; }
interface Point { y: number; }

const point: Point = { x: 1, y: 2 };

3. 继承的方式不同

interface通过extends继承，而type类型别名通过类型交叉继承。interface可以继承类型别名，类型别名也可以和interface交叉生成新的类型。即：接口和类型别名不是互斥的。

1. interface 继承另一个interface

interface PartialPoint {
  x: number;
}

interface Point extends PartialPoint { 
  y: number;
}

2. 类型别名type 继承 类型别名type

type PartialPoint = {
  x: number;
};

type Point = PartialPoint & { y: number; };

3. interface 继承 类型别名

type PartialPoint = {
  x: number;
};

interface Point extends PartialPoint {
  y: number;
}

4. 类型别名 继承 interface

interface PartialPoint { 
  x: number;
}

type Point = PartialPoint & { 
  y: number;
};

4. 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;

5. Type可以计算属性，生成映射类型

type 能使用 in 关键字生成映射类型，但 interface 不行。也就是type可以主动的做类型体操操作，而interface只能被动的做。

语法与索引签名的语法类型，内部使用了 for .. in。 具有三个部分：

• 类型变量 K，它会依次绑定到每个属性。
• 字符串字面量联合的 Keys，它包含了要迭代的属性名的集合。
• 属性的结果类型。

type Keys = "firstname" | "surname"

type DudeType = {
[key in Keys]: string
}

const test: DudeType = {
firstname: "Pawel",
surname: "Grzybek"
}

// 报错
//interface DudeType2 {
//  [key in keys]: string
//}