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 相关文章推荐
JS跨域总结
Aug 30 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
JavaScript中诡异的delete操作符
Mar 12 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
微信小程序实现点击返回顶层的方法
Jul 12 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
使用vue for时为什么要key【推荐】
Jul 11 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文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
Symfony学习十分钟入门经典教程
2016/02/03 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP面向对象程序设计重载(overloading)操作详解
2019/06/13 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
js通过iframe加载外部网页的实现代码
2015/04/05 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
Vue内容分发slot(全面解析)
2017/08/19 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
JS如何实现封装列表右滑动删除收藏按钮
2020/07/23 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
在Python中使用HTML模版的教程
2015/04/29 Python
numpy数组拼接简单示例
2017/12/15 Python
python之pandas用法大全
2018/03/13 Python
Python3 replace()函数使用方法
2018/03/19 Python
Django forms组件的使用教程
2018/10/08 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
基于Python的接口自动化读写excel文件的方法
2021/01/15 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
pytorch交叉熵损失函数的weight参数的使用
2021/05/24 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL