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


Posted in Javascript onJune 18, 2019

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

interface User {
 name: string
 age: number
}

interface SetUser {
 (name: string, age: number): void;
}

type

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

interface Name { 
 name: string; 
}
interface User extends Name { 
 age: number; 
}

type extends type

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

interface extends type

type Name = { 
 name: string; 
}
interface User extends Name { 
 age: number; 
}

type extends interface

interface Name { 
 name: string; 
}
type User = Name & { 
 age: number; 
}

不同点

type 可以而 interface 不行

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

// 基本类型别名
type Name = string

// 联合类型
interface Dog {
 wong();
}
interface Cat {
 miao();
}

type Pet = Dog | Cat

// 具体定义数组每个位置的类型
type PetList = [Dog, Pet]

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

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

其他骚操作

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 能够声明合并

interface User {
 name: string
 age: number
}

interface User {
 sex: string
}

/*
User 接口为 {
 name: string
 age: number
 sex: string 
}
*/

总结

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

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

Javascript 相关文章推荐
JavaScript Event学习第四章 传统的事件注册模型
Feb 07 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
js遍历td tr等html元素
Dec 13 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
Aug 11 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
vue jsx 使用指南及vue.js 使用jsx语法的方法
Nov 11 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
js实现选项卡效果
Mar 07 Javascript
使用js在layui中实现上传图片压缩
Jun 18 #Javascript
jquery中为什么能用$操作
Jun 18 #jQuery
详解Vue3.0 前的 TypeScript 最佳入门实践
Jun 18 #Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 #Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 #Javascript
实用Javascript调试技巧分享(小结)
Jun 18 #Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 #Javascript
You might like
php 过滤危险html代码
2009/06/29 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JS字符串的切分用法实例
2016/02/22 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
js简单的分页器插件代码实例
2019/09/11 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
Python批量转换文件编码格式
2015/05/17 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python过滤列表用法实例分析
2016/04/29 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
PyQt5 closeEvent关闭事件退出提示框原理解析
2020/01/08 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
应届生财务会计求职信
2013/11/05 职场文书
优秀求职自荐信怎样写
2013/12/18 职场文书
宣传口号大全
2014/06/16 职场文书
2014年财务工作总结范文
2014/11/11 职场文书
2014年环境整治工作总结
2014/12/10 职场文书
Nginx进程调度问题详解
2021/09/25 Servers
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python