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的相关知识点请查看下面的相关链接

赞 (0)

相关推荐

  • TypeScript中type和interface的区别及注意事项

    目录 前言 概念 type interface 异同点 不同点 相同点 补充:Ts中type和interface定义类型扩展类型的方法 总结 前言 在 TS 中,type 和 interface相似,都可以给类型命名并通过该名字来引用表示的类型.不过它们之间是存在一些差别的,我们在使用时也需要注意一些特殊场景. 概念 type type关键字是声明类型别名的关键字.它的语法如下: type AliasName = Type; type:声明类型别名的关键字 AliasName:类型别名的名称 T

  • TypeScript定义接口(interface)案例教程

    接口的作用: 接口,英文:interface,其作用可以简单的理解为:为我们的代码提供一种约定. 在Typescript中是这么描述的: TypeScript的核心原则之一是对值所具有的结构进行类型检查.它有时被称做"鸭式辨型法"或"结构性子类型化". 在TypeScript里,接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约. 举个例子: // 定义接口 Person interface Person { name: string; age: numb

  • TypeScript中正确使用interface和type的方法实例

    目录 前言 interface type 附:interface和type不同点 总结 前言 interface 和 type 都是用来定义类型,可以理解定义 shape ,那么 shape 表示一种设计大框,或者说只要具有某些特征或者行为就是为一类事物.在有些面向例如 Java 语言中,interface 用于定义行为,如果一个类实现了某一个 interface 表示该类具有某种行为或者说具有某种能力,例如writable 或者 readable .可以通过行为来对事物进行划分.interfa

  • 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 核心基础之接口interface

    目录 1.接口定义 2.接口继承 3.类实现接口 前言: 在面向对象语言中,接口是一个很重要的概念,它是对行为的抽象.接口也叫 interface . 在 js 中没有接口这个概念,它是新增的.该如何定义呢?下面来一起学习吧 1.接口定义 接口的作用: 在面向对象编程中,接口是一种规范的定义,它定义了行为和动作规范: 在程序设计内,接口起到一种限制和规范的作用: 接口一般使用 interface 关键字来定义,名字首字母需要大写.在项目中定义接口的时候,一般在名字前加一个大写 I 字母,能够快速

  • typescript中type和interface的区别有哪些

    目录 前言 type和interface的相同点 type和interface的不同点 结语 如何选择 Interface . Type 总结 前言 在typescript里面,有两个概念十分容易混淆,那便是 type 和 interface,它俩都可以用来表示 接口,但是实际使用上会存在一些差异,因此本篇文章就准备聊聊它俩,彻底弄清它俩的联系与区别,废话不多说,开搞! type和interface的相同点 在我看来,它俩就是对 接口定义 的两种不同形式,目的都是一样的,都是用来定义 对象 或者

  • 详解TypeScript中type与interface的区别

    详解TypeScript中type与interface的区别

    目录 类型别名 type 接口 interface interface和type的相似之处 都可以描述 Object和Function Type Interface 二者都可以被继承 interface 继承 interface interface 继承 type type 继承 type type 继承 interface 实现 implements 二者区别 1. 定义基本类型别名 2. 声明联合类型 3. 声明元组 4. 声明合并 5. 索引签名问题 总结 类型别名 type 首先认识一下

  • 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

  • SQL SERVER中SELECT和SET赋值相同点与不同点(推荐)

    SELECT和SET在SQL SERVER中都可以用来对变量进行赋值,但其用法和效果在一些细节上有些不同. 1. 在对变量赋值方面,SET是ANSI标准的赋值方式,SELECT则不是.这也是SET方式被推荐使用的原因之一. 2. SELECT可以一次对多个变量进行赋值,而SET一次只能对一个变量赋值. DECLARE @NAME NVARCHAR(128), @AGE INT; SET @NAME = N'小明'; SET @AGE=18; PRINT @NAME; PRINT @AGE; GO

  • Java中Scanner类与BufferReader类的不同点(非常详细)

    java.util.Scanner类是一个简单的文本扫描类,它可以解析基本数据类型和字符串.它本质上是使用正则表达式去读取不同的数据类型. Java.io.BufferedReader类为了能够高效的读取字符序列,从字符输入流和字符缓冲区读取文本. 下面是两个类的不同之处: 当nextLine()被用在nextXXX()之后,用Scanner类有什么问题 尝试去猜测下面代码的输出内容: // Code using Scanner Class import java.util.Scanner; c

  • TypeScript中extends的正确打开方式详解

    目录 前言 extends第一式:继承 类继承类 接口继承接口 接口继承类 extends第二式:三元表达式条件判断 普通的三元表达式条件判断 情况一:Type1和Type2为同一种类型. 情况二:Type1是Type2的子类型. 情况三: Type2类型兼容类型Type1. 带有泛型的三元表达式条件判断 extends第三式:泛型约束 前言 最近完整地看了一遍TypeScript的官方文档,发现文档中有一些知识点没有专门讲解到,或者是讲解了但却十分难以理解,因此就有了这一系列的文章,我将对没有

  • TypeScript中import type与import的区别详析

    目录 背景 import type vs import 使用 import type 的好处 参考链接 总结 背景 这周遇到了一个比较奇怪的问题:如何在 TypeScript 中根据某个 enum 的取值来执行后续逻辑? 按理来说应该很简单,这是 enum 的定义: export enum MyEnum { DEFAULT = 0, SOME_VALUE = 1, SOME_OTHER_VALUE = 2, } 然后在另一个项目中,通过 import type 来引入: import type

随机推荐