typescript - TypeScript 中的接口(interface)与类型

Question

TypeScript 中的这些语句(interface vs type)有什么区别？

interface X {
    a: number
    b: string
}

type X = {
    a: number
    b: string
};

Answer 1

2019更新

---

当前答案和 official documentation已经过时了。对于那些刚接触 TypeScript 的人来说，如果没有示例，所使用的术语就不清楚了。以下是最新差异的列表。

1。对象/函数

两者都可用于描述对象的形状或函数签名。但语法不同。

界面

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

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

类型别名

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

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

2。其他类型

与接口(interface)不同，类型别名还可以用于其他类型，例如基元、联合和元组。

// primitive
type Name = string;

// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };

// union
type PartialPoint = PartialPointX | PartialPointY;

// tuple
type Data = [number, string];

3。扩展

两者都可以扩展，但同样，语法不同。此外，请注意接口(interface)和类型别名并不相互排斥。接口(interface)可以扩展类型别名，反之亦然。

接口(interface)扩展接口(interface)

interface PartialPointX { x: number; }
interface Point extends PartialPointX { y: number; }

类型别名扩展类型别名

type PartialPointX = { x: number; };
type Point = PartialPointX & { y: number; };

接口(interface)扩展类型别名

type PartialPointX = { x: number; };
interface Point extends PartialPointX { y: number; }

类型别名扩展接口(interface)

interface PartialPointX { x: number; }
type Point = PartialPointX & { y: number; };

4。实现

一个类可以以完全相同的方式实现接口(interface)或类型别名。但是请注意，类和接口(interface)被视为静态蓝图。因此，它们不能实现/扩展命名联合类型的类型别名。

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

5。声明合并

与类型别名不同，接口(interface)可以定义多次，并将被视为单个接口(interface)(合并所有声明的成员)。

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