Typescript中interface与type的相同点与不同点的详细说明

 更新时间:2022年11月26日 15:38:30   作者:七月流萤  
这篇文章主要介绍了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 。其他更多详情参看 官方规范文档

更多关于Typescript中interface与type的相关知识点请查看下面的相关链接

相关文章

  • ajax与jsonp的区别及用法

    ajax与jsonp的区别及用法

    在本篇文章里我们给大家分享了ajax与jsonp的区别的相关知识点内容,有需要的朋友们可以学习下。
    2018-10-10
  • javascript es6的常用语法你知道吗

    javascript es6的常用语法你知道吗

    这篇文章主要为大家介绍了javascriptes6的常用语法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • javascript中clone对象详解

    javascript中clone对象详解

    这篇文章主要介绍了javascript中clone对象的方法,需要的朋友可以参考下
    2014-12-12
  • js中的setInterval和setTimeout使用实例

    js中的setInterval和setTimeout使用实例

    这篇文章主要介绍了javascript中的两个定时执行函数setInterval和setTimeout的用法,需要的朋友可以参考下
    2014-05-05
  • JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型

    JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型

    数据类型是编程语言的砖瓦,是所有你能想象到的复杂抽象的基础,在现代编程语言中,除了语言本身内置的一些简单数据类型外,基本上都提供了用于自定义数据类型的语言机制(在C中也可以利用结构体来实现),这些机制在一定程度上也决定了该语言的流行度和生命力
    2012-10-10
  • 用js重建星际争霸

    用js重建星际争霸

    用js重建星际争霸...
    2006-12-12
  • javascript中undefined与null的区别

    javascript中undefined与null的区别

    这篇文章介绍了javascript中undefined与null的区别,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • Knockout visible绑定使用方法

    Knockout visible绑定使用方法

    本文讲解Knockout让visible绑定到DOM元素上,使得该元素的hidden或visible取决于绑定的值,下面有代码参考
    2013-11-11
  • JS Attribute属性操作详解

    JS Attribute属性操作详解

    下面小编就为大家带来一篇JS Attribute属性操作详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JavaScript中的small()方法使用详解

    JavaScript中的small()方法使用详解

    这篇文章主要介绍了JavaScript中的small()方法使用详解,是JS入门学习中的基础知识,需要的朋友可以参考下
    2015-06-06

最新评论