Typescript 中的 interface 与 type alias

387 阅读2分钟

Typescript 与 Javascript

了解 TypeScript 的人都知道,TypeScript 是 Javascript 的超集,它具备 Javascript 中的所有功能(JS 代码无需修改依旧可以和 TypeScript 一起运行),并且可以编译成 JavaScript。同时,TypeScript 额外为我们提供了类型系统,进行类型检查(在变量、函数参数、函数返回值后面加上:数据类型,不符合规则的时候会直接报错)

接口 interface 与类型别名 type alias

在Typescript 中,声明类型(主要用来描述一个类、对象或者函数)。

声明类型有两种方式:第一种是接口(interface),第二种是类型别名 (type alias)

先来看看它们各自的定义方式:

interface:

// 对象
interface Demo {
    name: string
    age: number
}

// 函数
interface doSomthing {
 (name: string, age: number): void;
}

type:

// 对象
type Demo = {
    name: string
    age: number
};

// 函数
type doSomthing = (name: string, age: number): void;

官方对于这两种声明方式的区别是这样的描述的:

image.png

意思是:

  • 接口可以在extends或implements子句中命名,但对象类型文字的类型别名不能。
  • 一个接口可以有多个合并声明,但对象类型文字的类型别名不能。

两种声明方式的异同

  • 都可以 extends (拓展)

比如接口拓展接口:接口拓展类型别名,类型别名拓展接口,类型别名拓展类型别名(当接口和类型别名不是互斥时,接口可以扩展类型别名,反之亦然)

image.png
  • interface 会创建一个新的类型名称,而 type alias 只是一个引用,它不会创建新的类型名称(没有产生新的类型实例)

  • 类型合并:多个同名的 interface 最终会合并成一个,而 type alias 不会合并,会进行报错:

    type Demo { string; // [x] Duplicate identifier 'Demo'.ts }

关于 Typescript 的其它具体细节可参考 Typescript中文文档