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

interface extends type

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

type extends interface

interface Name {
 name: string;
}
type User = Name

不同点

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

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

赞 (0)

相关推荐

  • 深入理解JavaScript和TypeScript中的class

    前言 对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影.所以 设计模式 也是大多数前端开发者的一个短板. 最近在学习 Angular的过程中发现其大量的运用了 class,不得不佩服,Angular 确实是一个优秀的.值得深入研究的 框架. 本文将简单的介绍一下 JavaScript 和 TypeScript 中的 class. 基本概念 在介绍 class 之前,要先

  • 在Vue 中使用Typescript的示例代码

    Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescrip

  • TypeScript中的方法重载详解

    TypeScript中的方法重载详解

    前言 方法重载(overload)在传统的静态类型语言中是很常见的.JavaScript 作为动态语言, 是没有重载这一说的.一是它的参数没有类型的区分,二是对参数个数也没有检查.虽然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 arguments 获取到参数个数,从而实现根据不同的入参做不同的操作. 比如有一个获取聊天消息的方法,根据传入的参数从数组中查找数据.如果入参为数字,则认为是 id,然后从数据源中找对应 id 的数据并返回,否则当成类型,

  • 深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践

    前言 阿特伍德定律,指的是any application that can be written in JavaScript, will eventually be written in JavaScript,意即"任何可以用JavaScript来写的应用,最终都将用JavaScript来写" 在使用新技术的时候,切忌要一步一步的来,如果当你尝试把两门不熟悉的新技术一起结合使用,你很大概率会被按在地上摩擦,会yarn/npm和React脚手架等技术是前提,后面我会继续写PWA深入和No

  • TypeScript开发Node.js程序的方法

    当我第一次发现 TypeScript 时,就把它用到了自己的 JavaScript 程序中.使用 TypeScript 有很多好处,现在你要让我在用原生 JavaScript 写任何东西的话,需要给我一个令人信服的理由. 在本文中,我将向你展示如何设置一个简单的开发环境,以便使用 TypeScript 编写 Node.js 应用程序. 首先在 TypeScript 中可能有一千种或更多种不同的方法去创建 Node.js 程序.我只是想展示自己喜欢的方式. 另外你可以在此处找到我的入门项目:htt

  • 关于TypeScript模块导入的那些事

    前言 模块在其自身的作用域里执行,而不是在全局作用域里:这意味着定义在一个模块里的变量,函数,类等等在模块外部是不可见的,除非你明确地使用export之一导出它们. 相反,如果想使用其它模块导出的变量,函数,类,接口等的时候,你必须要导入它们,可以使用import之一. 模块是自声明的.在TypeScript里,两个模块之间的关系是通过在文件级别上使用import和export建立的. 下面话不多说了,来一起看看详细的介绍吧 ES6 模块导入的限制 我们先来看一个具体的例子: 在 Node 项目

  • 如何获取TypeScript的声明文件.d.ts

    一.TypeScript的声明文件就像C/C++用.h文件.当使用TypeScript调用其他已经编写好的类库时,可以提供IntelliSense智能提示. 二.使用npm指令来获取.d.ts文件 install -save @types/jquery -g 运行后在type/jquery目录下生成4个文件:index.d.ts,lincense,package.json,readme.md,其中的index.d.ts即为jquery的声明文件. 三.npm需要Nodejs环境,安装步骤如下 1

  • 详解在Vue中使用TypeScript的一些思考(实践)

    Vue.extend or vue-class-component 使用 TypeScript 写 Vue 组件时,有两种推荐形式: Vue.extend():使用基础 Vue 构造器,创建一个"子类".此种写法与 Vue 单文件组件标准形式最为接近,唯一不同仅是组件选项需要被包裹在 Vue.extend() 中. vue-class-component:通常与 vue-property-decorator 一起使用,提供一系列装饰器,能让我们书写类风格的 Vue 组件. 两种形式输出

  • 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

  • TypeScript数组实现栈与对象实现栈的区别详解

    TypeScript数组实现栈与对象实现栈的区别详解

    目录 前言 数组实现栈 实现思路 实现代码 编写测试代码 对象实现栈 实现代码 编写测试代码 二者的区别 十进制转二进制 前言 栈作为一种数据结构,它可以应用在很多地方,当你需要经常获取刚存放进去的数据时,那么栈这种数据结构将是你的首选. 栈的实现方式一般有两种:数组实现和对象实现,这两种实现方式最终实现的功能都是一样的,但是在性能上却有着很大的差别. 本文将详细讲解这两种实现方式的差异并用TypeScript将其实现,欢迎各位感兴趣的开发者阅读本文. 数组实现栈 本文讲解的是栈用代码的实现,如

  • 对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解

    在用tensorflow做一维的卷积神经网络的时候会遇到tf.nn.conv1d和layers.conv1d这两个函数,但是这两个函数有什么区别呢,通过计算得到一些规律. 1.关于tf.nn.conv1d的解释,以下是Tensor Flow中关于tf.nn.conv1d的API注解: Computes a 1-D convolution given 3-D input and filter tensors. Given an input tensor of shape [batch, in_wi

  • Python中的None与 NULL(即空字符)的区别详解

    1.首先要了解Python的对象的概念: Python中,万物皆对象,所有的操作都是针对对象的,那什么是对象,5是一个int对象,'oblong'是一个str对象,异常也是一个对象,抽象一点是,人,猫,够也是一个对象 那对于一个对象,它就有包括两方面的特征:  属性:去描述它的特征  方法: 它所具有的行为 所以,对象=属性+方法 (其实方法也是一种属性,一种区别于数据属性的可调用属性 把具有相同属性和方法的对象就可以归为一类,即Classl.类就好比是一张蓝图,使用一个类可以创建多个对象实例

  • C++ class和struct到底有什么区别详解

    C++ 中保留了C语言的 struct 关键字,并且加以扩充.在C语言中,struct 只能包含成员变量,不能包含成员函数.而在C++中,struct 类似于 class,既可以包含成员变量,又可以包含成员函数. C++中的 struct 和 class 基本是通用的,唯有几个细节不同: 使用 class 时,类中的成员默认都是 private 属性的:而使用 struct 时,结构体中的成员默认都是 public 属性的. class 继承默认是 private 继承,而 struct 继承默

  • JS中script标签defer和async属性的区别详解

    JS中script标签defer和async属性的区别详解

    向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两个属性,defer和async,因此script标签的使用分为三种情况: 1.<script

  • 对pandas中两种数据类型Series和DataFrame的区别详解

    1. Series相当于数组numpy.array类似 s1=pd.Series([1,2,4,6,7,2]) s2=pd.Series([4,3,1,57,8],index=['a','b','c','d','e']) print s2 obj1=s2.values # print obj1 obj2=s2.index # print obj2 # print s2[s2>4] # print s2['b'] 1.Series 它是有索引,如果我们未指定索引,则是以数字自动生成. 下面是一些例

  • 对python中 math模块下 atan 和 atan2的区别详解

    atan 和 atan2 都是反正切函数,返回的都是弧度 对于两点形成的直线,两点分别是 point(x1,y1) 和 point(x2,y2),其斜率对应角度的计算方法可以是: angle = atan( (y2-y1)/(x2-x1) ) 或 angle = atan2( y2-y1, x2-x1 ) 因此可以看出 atan 和 atan2 的区别: 1.参数的个数不同:atan 为单个参数,atan2为两个参数 2.atan2 的优点在于: 如果 x2-x1等于0 ,角度依然可以计算,但是

  • python中urllib.request和requests的使用及区别详解

    urllib.request 我们都知道,urlopen()方法能发起最基本对的请求发起,但仅仅这些在我们的实际应用中一般都是不够的,可能我们需要加入headers之类的参数,那需要用功能更为强大的Request类来构建了 在不需要任何其他参数配置的时候,可直接通过urlopen()方法来发起一个简单的web请求 发起一个简单的请求 import urllib.request url='https://www.douban.com' webPage=urllib.request.urlopen(

  • C#中托管DLL和非托管DLL的区别详解

    首先解释一下,托管DLL和非托管DLL的区别.狭义解释讲,托管DLL就在Dotnet环境生成的DLL文件.非托管DLL不是在Dotnet环境生成的DLL文件. 托管DLL文件,可以在Dotnet环境通过 "添加引用" 的方式,直接把托管DLL文件添加到项目中.然后通过 Using DLL命 名空间,来调用相应的DLL对象 .  非托管DLL文件,在Dotnet环境应用时,通过 DllImport 调用. C# 调用非托管DLL文件.DLL文件是用C语言编写的. 托管DLL就是能够在公共

随机推荐