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 不能被 `extends` 和 `implements`。

实际上在扩展和实现上二者已经没有区别，甚至可以混用，比如让一个 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，其更加灵活自动的类型合并可应对未知的复杂使用场景。

TypeScript: type alias 与 interface

区别点之一：Type Alias 不会创建新的类型，体现在错误信息上。

区别点之二：type alias 不能被 `extends` 和 `implements`。

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

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

类型合并

结论

相关资料

你可能感兴趣的:(TypeScript: type alias 与 interface)

TypeScript: type alias 与 interface

区别点之一：Type Alias 不会创建新的类型，体现在错误信息上。

区别点之二：type alias 不能被 extends 和 implements。

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

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

类型合并

结论

相关资料

你可能感兴趣的:(TypeScript: type alias 与 interface)

区别点之二：type alias 不能被 `extends` 和 `implements`。