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

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

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 。其他更多详情参看 官方规范文档

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

相关文章

  • jquery实用技巧之输入框提示语句

    jquery实用技巧之输入框提示语句

    输入有效信息时会有一些提示语,比如“请输入用户名”和“请输入密码”等语言,这篇文章就为大家介绍js实用技巧之输入框提示语句的实现方法,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js实现左侧网页tab滑动门效果代码

    js实现左侧网页tab滑动门效果代码

    这篇文章主要介绍了js实现左侧网页tab滑动门效果代码,涉及JavaScript页面元素的遍历及元素属性动态切换的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript实现动态生成表格案例详解

    JavaScript实现动态生成表格案例详解

    本文主要介绍了通过JavaScript实现一个动态添加表格的案例,当点击添加按钮时,可以弹出一个表单,然后将输入的内容添加到表格中,也可以将表格中的整行内容清除。感兴趣的可以学习一下
    2021-12-12
  • JavaScript深入V8引擎以及编写优化代码的5个技巧

    JavaScript深入V8引擎以及编写优化代码的5个技巧

    这篇文章主要介绍了JavaScript深入V8引擎以及编写优化代码的5个技巧,JavaScript引擎是执行 JavaScript 代码的程序或解释器。JavaScript引擎可以实现为标准解释器,或者以某种形式将JavaScript编译为字节码的即时编译器。,需要的朋友可以参考下
    2019-06-06
  • 一篇文章教你写出干净的JavaScript代码

    一篇文章教你写出干净的JavaScript代码

    JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,下面这篇文章主要给大家介绍了如何通过一篇文章教你写出干净的JavaScript代码,需要的朋友可以参考下
    2021-09-09
  • 详解ES6 export default 和 import语句中的解构赋值

    详解ES6 export default 和 import语句中的解构赋值

    这篇文章主要介绍了详解ES6 export default 和 import语句中的解构赋值,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • JavaScript实现双向链表过程解析

    JavaScript实现双向链表过程解析

    这篇文章主要介绍了利用JavaScript实现双向链表以及它的封装和常用操作,文中的示例代码讲解详细,对日常的学习和工作都有一定的价值,快来和小编一起学习吧
    2021-12-12
  • 小程序实现简单列表功能

    小程序实现简单列表功能

    这篇文章主要为大家详细介绍了小程序实现简单列表功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • 用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能

    用JavaScript实现字符串切分功能...
    2007-01-01
  • 微信小程序结合mock.js实现后台模拟及调试

    微信小程序结合mock.js实现后台模拟及调试

    这篇文章主要介绍了微信小程序结合mock.js实现后台模拟及调试,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03

最新评论