都可以定义 Objects / Functions

interface 和 type 都可以定义 object 或者 functions 类型，但是语法不同。

Interface

  1. interface Point {
  2.   x: number;
  3.   y: number;
  4. }
  6. interface SetPoint {
  7.   (x: number, y: number): void;
  8. }

Type alias

  1. type Point = {
  2.   x: number;
  3.   y: number;
  4. };
  6. type SetPoint = (x: number, y: number) => void;

其他类型

不像 interface ，type alias 还可以用来定义其他类型比如原始类型、组合类型还有元组类型。

  1. // primitve
  2. type Name = string;
  4. // object
  5. type PartialPointX = { x: number; };
  6. type PartialPointY = { y: number; };
  8. // union
  9. type PartialPoint = PartialPointX | PartialPointY;
  11. // tuple
  12. type Data = [number, string];

Extend

interface 和 type alias 都可以继承，但是语法不同。注意，interface 和 type alias 两者不是互斥的， type 可以扩展 type alias ，反之亦然。

interface extends interface

  1. interface PartialPointX { x: number; };
  2. interface Point extends PartialPointX { y: number; }

type alias extends type alias

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

interface extends type alias

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

type alias extends interface

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

implements

类可以 implement interace 或 type alias ，但是不能 implement / extent 一个联合类型的 type alias 。

  1. interface Point {
  2.   x: number;
  3.   y: number;
  4. }
  6. class SomePoint implements Point {
  7.   x = 1;
  8.   y = 2;
  9. }
  11. type Point2 = {
  12.   x: number;
  13.   y: number;
  14. }
  16. class SomePoint2 implements Point2 {
  17.   x = 1;
  18.   y = 2;
  19. }
  21. type PartialPoint = { x: number; } | { y: number; };
  23. // FIXME: can not implement a union type
  24. class SomePartialPoint implements PartialPoint {
  25.   x = 1;
  26.   y = 2;
  27. }

声明合并

interface 可以被定义多次并最终合并成一个 interface ， type alias 就不行

  1. // These two declarations become:
  2. // interface Point { x: number; y: number; }
  3. interface Point { x: number; }
  4. interface Point { y: number; }
  6. const point: Point = { x: 1, y: 2 };

选用动机

  • 在定义公共 API （如编辑一个库）时使用 interface ，这样可以方便使用者继承接口；
  • 在定义组件属性（Props）和状态（State）时，建议使用 type ，因为 type 的约束性更强。

参考文档：