TypeScript: type alias 与 interface

官方文档中有关于两者对比的信息，隐藏在 TypeScript Handbook 中，见 <a href="https://www.typescriptlang.org/docs/handbook/advanced-types.html" rel="nofollow"><code>Interfaces vs. Type Aliases</code></a> 部分。 但因为这一部分很久没更新了，所以其中描述的内容不一定全对。 比如， <h3>区别点之一：Type Alias 不会创建新的类型，体现在错误信息上。</h3> <blockquote> 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. </blockquote> 不完全正确。直接通过 type 定义的初始类型，是会创建相应的类型名称的。 什么意思呢。就是说，不是使用 <code>&</code>, <code>|</code> 等操作符创建的 union type 及 intersection type。 <div class="highlight highlight-source-js"><pre>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" };</pre></div>

注意这里错误信息使用的是类型 <code>Person</code> 而不是对应的 plain object 对象。 <h3>区别点之二：type alias 不能被 <code>extends</code> 和 <code>implements</code>。</h3> 实际上在扩展和实现上二者已经没有区别，甚至可以混用，比如让一个 class 同时实现 interface 和 type alias 定义的类型。 <div class="highlight highlight-source-js"><pre>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) {} }</pre></div>

<h3>区别点之三：type alias 不能扩展和实现其他类型</h3> 不完全正确。因为通过正交操作符（intersection type） <code>&</code> 可以达到 <code>extends</code> 的目的。 <div class="highlight highlight-source-js"><pre>interface Person { name: string; }

interface Job { title: string; }

type EmployeeType = Person & Job;

class Employee implements EmployeeType { constructor(public name = "Nobody", public title = "Noone") {} }</pre></div>

上面可以看到，两者大部分情况下不用过多区分。 在使用了 union type 的时候，一些区别才开始显现。其实也算不得区别，因为只有 type alias 可通过 union type 定义。 <h3>当 type 包含 union type 时，该类型是不能被实现和扩展的。</h3> <div class="highlight highlight-source-js"><pre>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) }</pre></div>

因为 union type 描述的是一个或者的状态，一个类不可能即是此类型也是另外种类型。interface 也不可能继承一个类型还不确定的类型。 <h3>类型合并</h3> 最明显的一点区别，是在进行类型合并（<a href="https://www.typescriptlang.org/docs/handbook/declaration-merging.html" rel="nofollow">Declaration Merging</a>）的时候，type alias 是不会被合并的，而同名的多个 interface 会合并成一个。 <div class="highlight highlight-source-js"><pre>interface Person { name: string; } interface Person { age: number; }

const person: Person = { name: "Bob", age: 9 };</pre></div>

对于 type alias，存在同名时直接报错。 <div class="highlight highlight-source-js"><pre>type Person { // [x] Duplicate identifier 'Person'.ts(2300) name: string; } type Person { // [x] Duplicate identifier 'Person'.ts(2300) age: number; }</pre></div> 明白这点对于三方库的作者来说很重要。假如你写了个 npm 包，导出的是 type，则使用者无法通过简单定义同名类型来进行扩充。 所以，写库的时候，尽量使用 interface。 <h3>结论</h3> 官方推荐用 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，其更加灵活自动的类型合并可应对未知的复杂使用场景。 <h3>相关资料</h3> <ul> <li><a href="https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c" rel="nofollow">Interface vs Type alias in TypeScript 2.7</a></li> <li><a href="https://www.typescriptlang.org/docs/handbook/advanced-types.html" rel="nofollow">TypeScript Handbook</a></li> <li><a href="https://kendaleiv.com/typescript-constructor-assignment-public-and-private-keywords/" rel="nofollow">TypeScript Constructor Assignment: public and private Keywords</a></li> </ul> </td> </tr> </tbody> </table>

原文出处：https://www.cnblogs.com/Wayou/p/type_alias_vs_interface.html

来源：oschina

链接：https://my.oschina.net/u/4388800/blog/3267187

标签

highlight

javascript

SMI