TypeScript: type alias 与 interface

官方文档中有关于两者对比的信息,隐藏在 TypeScript Handbook 中,见 Interfaces vs. Type Aliases 部分。

但因为这一部分很久没更新了,所以其中描述的内容不一定全对。

比如,

区别点之一:type alias 不会创建新的类型,体现在错误信息上。

One difference is, that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name.

不完全正确。直接通过 type 定义的初始类型,是会创建相应的类型名称的。

什么意思呢。就是说,不是使用 &, | 等操作符创建的 union type 及 intersection type。

type Person = {
  name: string;
  age: number;
};

// [x] Property 'age' is missing in type '{ name: string; }' but required in type 'Person'.ts(2741)
const bob: Person = { 
  name: "bob"
};

注意这里错误信息使用的是类型 Person 而不是对应的 plain object 对象。

区别点之二:type alias 不能被 extendsimplements

实际上在扩展和实现上二者已经没有区别,甚至可以混用,比如让一个 class 同时实现 interface 和 type alias 定义的类型。

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

interface PointInterface {
  a: number;
  b: number;
}

class Shape implements PointType, PointInterface {
  constructor(public a = 1, public b = 2, public x = 3, public y = 4) {}
}

区别点之三:type alias 不能扩展和实现其他类型

不完全正确。因为通过正交操作符(intersection type) & 可以达到 extends 的目的。

interface Person {
  name: string;
}

interface Job {
  title: string;
}

type EmployeeType = Person & Job;

class Employee implements EmployeeType {
  constructor(public name = "Nobody", public title = "Noone") {}
}

上面可以看到,两者大部分情况下不用过多区分。

在使用了 union type 的时候,一些区别才开始显现。其实也算不得区别,因为只有 type alias 可通过 union type 定义。

当 type 包含 union type 时,该类型是不能被实现和扩展的。

interface Triangle {
  area: number;
}

interface Square {
  width: number;
  height: number;
}

type ShapeType = Triangle | Square;

// [x] An interface can only extend an object type or intersection of object types with statically known members.ts(2312)
interface MyShape extends ShapeType; 


class Shape implements ShapeType{
// [x] A class can only implement an object type or intersection of object types with statically known members.ts(2422)
}

因为 union type 描述的是一个或者的状态,一个类不可能即是此类型也是另外种类型。interface 也不可能继承一个类型还不确定的类型。

类型合并

最明显的一点区别,是在进行类型合并(Declaration Merging)的时候,type alias 是不会被合并的,而同名的多个 interface 会合并成一个。

interface Person {
  name: string;
}
interface Person {
  age: number;
}

const person: Person = {
  name: "Bob",
  age: 9
};

对于 type alias,存在同名时直接报错。

type Person {  // [x] Duplicate identifier 'Person'.ts(2300)
  name: string;
}
type Person { // [x] Duplicate identifier 'Person'.ts(2300)
  age: number;
}

明白这点对于三方库的作者来说很重要。假如你写了个 npm 包,导出的是 type,则使用者无法通过简单定义同名类型来进行扩充。

所以,写库的时候,尽量使用 interface。

结论

官方推荐用 interface,其他无法满足需求的情况下用 type alias。

但其实,因为 union type 和 intersection type 是很常用的,所以避免不了大量使用 type alias 的场景,一些复杂类型也需要通过组装后形成 type alias 来使用。所以,如果想保持代码统一,可尽量选择使用 type alias。通过上面的对比,type alias 其实可函盖 interface 的大部分场景。

对于 React 组件中 props 及 state,使用 type alias,这样能够保证使用组件的地方不能随意在上面添加属性。如果有自定义需求,可通过 HOC (Higher-Order Components)二次封装。

编写三方库时使用 interface,其更加灵活自动的类型合并可应对未知的复杂使用场景。

相关资料