陌小路的个人博客 陌小路的个人博客
首页
  • 技术专区

    • 面试
    • Vue
    • Electron
    • TypeScript
    • Serverless
    • GraphQL
  • 我的秋招之旅
  • 2019年终总结
Todo
收藏夹
关于作者
GitHub

陌小路

前端切图仔
首页
  • 技术专区

    • 面试
    • Vue
    • Electron
    • TypeScript
    • Serverless
    • GraphQL
  • 我的秋招之旅
  • 2019年终总结
Todo
收藏夹
关于作者
GitHub
  • Vue

  • React

  • 面试

  • Electron

  • Serverless

  • GraphQL

  • TypeScript

    • type 与 interface 的异同
      • 相同点
        • interface
        • type
      • 拓展方式
        • interface
        • type
        • 是否可以进行相互拓展呢?
      • 不同点
        • interface
        • type
      • 总结
    • typescript 内置类型实现
  • RxJS

  • 工程化

  • Webpack

  • Nestjs

  • WebRTC & P2P

  • Docker

  • Linux

  • Git

  • Svelte

  • 踩坑日记

  • 其他

  • technology
  • TypeScript
陌小路
2020-11-05

type与interface的异同

可能对于许多初学者来说,经常容易陷入一个纠结的境遇当中,我到底应该怎么在type和interface这两者之间做出抉择,对于百度上的各个文章的众说纷纭,我们总需要翻阅许多文章或许才能找寻到相对合理的解释,那么他们之间的爱恨情仇到底如何来分析才能更加生动易于理解呢。

# 相同点

二者皆可用于描述对象和函数类型,约束或注解特定的参数或属性,但从实现上来看,两者语法存在一定的差异。

# interface

# 描述对象

interface Person {
    name: string;
    age: number;
    getUserInfo: (name: string, age: number) => string 
}

const tom:Person = { name: 'tom', age: 12, getUserInfo(name, age) { return name + age } };
1
2
3
4
5
6
7

# 描述函数

interface initPerson {
    (name: string, age: number): object
}

let getNewPerson: initPerson;

getNewPerson = function(name, age) {
    return { name, age }
}
1
2
3
4
5
6
7
8
9

# type

# 描述对象

type User = {
    name: string;
    age: number;
    getUserInfo: (name: string, age: number) => string 
}

const jack:User = { name: 'jack', age: 10, getUserInfo(name, age) { return name + age } };
1
2
3
4
5
6
7

# 描述函数

type initUser = (name: string, age: number) => object;

let getNewUser: initUser;

getNewUser = function(name: string, age: number) {
    return { name, age }
}
1
2
3
4
5
6
7

# 拓展方式

实现的效果差不多,具体实现方式存在差异,所以这里还是区分一下吧

# interface

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

interface Man extends Person {
    sex: number
}

const realMan: Man = { 
    name: 'Tom',
    age: 42,
    sex: 1
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

一旦继承一个接口,那么被继承的接口具备的属性也将被合并进来。在规范对象或函数的形状的时候,就需要满足合并后的接口规范。

不仅如此,这里还需要考虑一个问题,如果想要继承一个接口,那么属性必须相互兼容。

# type

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

type mergeType = User &  {sex: number }

const realMan: mergeType = { 
    name: 'Tom',
    age: 42,
    sex: 1
}

1
2
3
4
5
6
7
8
9
10
11
12
13

在具体规范变量形状上来说,两者实现的效果还是差不多的。

# 是否可以进行相互拓展呢?

答案是肯定的,在拓展方式上还是一样的。


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

type User =  {
    sex: number;
}

type typeMerge = User & Person;

interface interfaceMerge extends User {};

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 不同点

# interface

相较于type而言,interface比较明显的优点就在于,interface能进行声明合并:


interface Person1 {
    name: string;
}

interface Person1 {
    sex: number;
}

1
2
3
4
5
6
7
8
9

这上面两句声明将会合并成一个,实现的效果就可以等同于下面的代码:

interface Person2 {
    name: string;
    sex: number
}
1
2
3
4

# type

对于type方式来说,他具备的能力就比较多了:

  • 基本类型别名
  • 联合类型
  • 元组类型
  • 使用typeof动态获取类型并进行赋值

上述都是列出来的都是interface不具备的能力,不仅如此,type还可以用于进行一些复杂的类型定义。

type Foo = number | string;
type Foo1 = [string, number];

const str = 112;
type Foo2 = typeof str;

type Coordinates = Pair<number>;  
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };
1
2
3
4
5
6
7
8

# 总结

就整个对比来说,type能做的事情似乎比interface要多,但是从官方推荐来看,尽量还是能用interface来实现的就尽量用interface吧。

如果还存在其他疑问的,可以翻阅官方文档 进行查看。

编辑
上次更新: 2022/08/14, 12:08:00
实战
typescript 内置类型实现

← 实战 typescript 内置类型实现→

最近更新
01
npm 踩坑日记
03-21
02
Github Actions 快速入门
01-08
03
Linux 服务器部署
01-02
更多文章>
Theme by Vdoing | Copyright © 2020-2023 STDSuperman | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式