Typescript 中的 interface 和 type 到底有什么区别详解

 更新时间:2019年06月18日 10:14:51   作者:七月流萤  
这篇文章主要介绍了Typescript 中的 interface 和 type 到底有什么区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
如果你想靠AI翻身,你先需要一个靠谱的工具!

interface VS type

大家使用 typescript 总会使用到 interface 和 type,官方规范 稍微说了下两者的区别

  • An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.
  • An interface can have multiple merged declarations, but a type alias for an object type literal cannot.

但是没有太具体的例子。

明人不说暗话,直接上区别。

相同点

都可以描述一个对象或者函数

interface

1
2
3
4
5
6
7
8
interface User {
 name: string
 age: number
}
 
interface SetUser {
 (name: string, age: number): void;
}

type

1
2
3
4
5
6
type User = {
 name: string
 age: number
};
 
type SetUser = (name: string, age: number): void;

都允许拓展(extends)

interface 和 type 都可以拓展,并且两者并不是相互独立的,也就是说 interface 可以 extends type, type 也可以 extends interface 。 虽然效果差不多,但是两者语法不同。

interface extends interface

1
2
3
4
5
6
interface Name {
 name: string;
}
interface User extends Name {
 age: number;
}

type extends type

1
2
3
4
type Name = {
 name: string;
}
type User = Name & { age: number };

interface extends type

1
2
3
4
5
6
type Name = {
 name: string;
}
interface User extends Name {
 age: number;
}

type extends interface

1
2
3
4
5
6
interface Name {
 name: string;
}
type User = Name & {
 age: number;
}

不同点

type 可以而 interface 不行

type 可以声明基本类型别名,联合类型,元组等类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 基本类型别名
type Name = string
 
// 联合类型
interface Dog {
 wong();
}
interface Cat {
 miao();
}
 
type Pet = Dog | Cat
 
// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

type 语句中还可以使用 typeof 获取实例的 类型进行赋值

1
2
3
// 当你想获取一个变量的类型时,使用 typeof
let div = document.createElement('div');
type B = typeof div

其他骚操作

1
2
3
4
5
6
7
type StringOrNumber = string | number;
type Text = string | { text: string };
type NameLookup = Dictionary<string, Person>;
type Callback<T> = (data: T) => void;
type Pair<T> = [T, T];
type Coordinates = Pair<number>;
type Tree<T> = T | { left: Tree<T>, right: Tree<T> };

interface 可以而 type 不行

interface 能够声明合并

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
interface User {
 name: string
 age: number
}
 
interface User {
 sex: string
}
 
/*
User 接口为 {
 name: string
 age: number
 sex: string
}
*/

总结

一般来说,如果不清楚什么时候用interface/type,能用 interface 实现,就用 interface , 如果不能就用 type 。其他更多详情参看 官方规范文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://juejin.im/post/5c2723635188252d1d34dc7d#heading-11

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • JScript中的undefined和"undefined"的区别

    JScript中的undefined和"undefined"的区别

    JScript中的undefined和"undefined"的区别...
    2007-03-03
  • 用javascript作一个通用向导说明

    用javascript作一个通用向导说明

    向导可以让你的网站用户快速上手使用你的web应用,提高网站的吸引力。向导一般分为好几个步骤,每个步骤收集一些数据,并且支持退回功能,所有步骤完成后可以得到每一步的收集结果。这里给大家展示一种比较通用,灵活且简单的向导框架。
    2011-08-08
  • JS实现滚动条触底加载更多

    JS实现滚动条触底加载更多

    这篇文章主要介绍了JS滚动条触底加载更多,需要的朋友可以参考下
    2019-09-09
  • js轮播图的插件化封装详解

    js轮播图的插件化封装详解

    这篇文章主要为大家详细介绍了js轮播图的插件化封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Javascript String 字符串操作包

    Javascript String 字符串操作包

    提供一个 JS String 包,包含了一些常用的对字符串操作的函数,详细的请看源码及演示
    2010-10-10
  • Javascript中的常见排序算法

    Javascript中的常见排序算法

    用JavaScript实现的常见排序算法:冒泡排序,选择排序,插入排序,谢尔排序,快速排序(递归),快速排序(堆栈),归并排序,堆排序。
    2007-03-03
  • JavaScript使用DeviceOne开发实战(二) 生成调试安装包

    JavaScript使用DeviceOne开发实战(二) 生成调试安装包

    这篇文章主要介绍了JavaScript使用DeviceOne开发实战(二) 生成调试安装包的相关资料,需要的朋友可以参考下
    2015-12-12
  • 使用JavaScript实现页面局部更新的方法总结

    使用JavaScript实现页面局部更新的方法总结

    在JavaScript中,Ajax(Asynchronous JavaScript and XML)是一种用于在后台与服务器进行异步通信的技术,本文给大家介绍了使用JavaScript实现页面局部更新的三种方法,文中通过代码示例给大家介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • Flexible.js可伸缩布局实现方法详解

    Flexible.js可伸缩布局实现方法详解

    这篇文章主要介绍了Flexible.js可伸缩布局实现方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-11-11
  • 通过继承IHttpHandle实现JS插件的组织与管理

    通过继承IHttpHandle实现JS插件的组织与管理

    最近,项目中的用到的Js插件越来越多,有的是用原生javascript写的,有的是调用的jquery插件,页面上Js和Css文件的引用也越来越混乱,而且Js文件之间还有引用先后的依赖关系
    2010-07-07

最新评论