首页 > 其他分享 >Typescript 中 interface 和 type 的区别

Typescript 中 interface 和 type 的区别

时间:2024-07-16 19:52:12浏览次数:10  
标签:Typescript 定义 接口 类型 使用 interface type

在 TypeScript 中,interface​ 和 type​ 是用来描述对象结构或类型的两种主要方式,它们有一些区别和各自的特点。

Interface(接口)

  1. 定义方式

    • 使用 interface​ 关键字定义,例如:

      interface Person {
          name: string;
          age: number;
      }
      
  2. 适用场景

    • 主要用于描述对象的形状(Shape),定义对象应该包含哪些属性以及它们的类型。
  3. 特点

    • 可以在声明合并(Declaration Merging)时扩展一个已有的接口,以增加新的属性。
    • 可以被类实现(implements),使类能够符合某个接口的契约。
  4. 支持的语法

    • 可以使用 extends​ 关键字继承另一个接口,形成接口的继承关系。

Type(类型)

  1. 定义方式

    • 使用 type​ 关键字定义,例如:

      type Person = {
          name: string;
          age: number;
      };
      
  2. 适用场景

    • 用于定义各种类型,不仅仅局限于对象类型,还可以定义联合类型、交叉类型等。
  3. 特点

    • 可以使用联合类型、交叉类型等高级类型,使得类型定义更加灵活和复杂。
    • 可以定义原始类型(如 number​、string​)、联合类型(|​)、交叉类型(&​)等。
    • 可以使用 typeof​ 获取变量的类型。
  4. 区别与注意事项

    • type​ 能够做的大多数事情,interface​ 也能做,但反之不一定。
    • 当你需要使用联合类型、交叉类型或者定义复杂的类型别名时,应优先选择 type​。
    • 当需要进行接口扩展或者定义类实现的契约时,应使用 interface​。

总结

  • 使用 interface​ 主要用于定义对象的结构和类实现的契约。
  • 使用 type​ 主要用于定义各种类型,包括对象类型以及更复杂的类型别名。
  • 在实际使用中,可以根据具体的需求和语境选择合适的方式来定义类型或者对象结构。

标签:Typescript,定义,接口,类型,使用,interface,type
From: https://www.cnblogs.com/shenhuanjie/p/18306002/the-difference-between-interface-and-type-i

相关文章

  • TS 入门(五):TypeScript接口与类
    目录前言回顾高级类型与类型操作1.接口a.基本接口b.可选属性和只读属性c.函数类型接口d.可索引类型e.接口继承2.类a.基本类b.类的成员(属性和方法)c.构造函数d.继承和派生类e.公有、私有和受保护的修饰符f.静态属性和方法g.抽象类扩展知识点:接口与类的结合......
  • 面向3-static、代码块、静态导入包,abstract(抽象类),interface(接口)、implements(接口
    static、代码块、静态导入包,abstract(抽象类),interface(接口)、implements(接口实现方式)static详解//staticpackageoop;publicclassF1{privatestaticintage;//静态的变量privatedoublescore;//非静态的变量publicvoidrun(){go();//当前......
  • vue3+element-plus+typescript
    1.vue3+ts+elementui-plushttps://blog.csdn.net/qq_41737571/article/details/1390730852.自动调整font-size大小https://blog.csdn.net/qq_41737571/article/details/1401586143.简单小众电商购物项目模板:基于Vue3和Vant4的纯前端开发方案https://web-hls.blog.csdn.......
  • vite react Typescript 构建一个移动端网页
    使用Vite、React和TypeScript来构建一个移动端网页是一个高效且现代的开发方式。Vite是一个构建工具和开发服务器,它利用原生ES模块导入来提供快速的冷启动和即时模块热更新(HMR)。React是用于构建用户界面的JavaScript库,而TypeScript是JavaScript的一个超集,它添......
  • {eyou:artlist typeid='栏目ID' limit='0,10' flag='c' titlelen='30
    artlist文档列表(配合arcpagelist标签可实现ajax瀑布流分页)[基础用法]标签:artlist描述:获取网站栏目(如:文章、产品、图集、软件等)的一些文章。用法:{eyou:artlisttypeid='栏目ID'limit='0,10'flag='c'titlelen='30'infolen='160'orderby='add_time'} ......
  • Type Script的Any和Unknown有什么区别
    TypeScript中的Any和Unknown是两种用于处理不确定或未知类型值的类型,但它们之间存在显著的区别。以下是它们之间的主要区别:1.类型安全性Any:Any类型是一种特殊的类型,它表示任何类型。使用Any类型时,TypeScript编译器会关闭对该变量的类型检查,允许你对变量执行任何操作,在编......
  • {eyou:artlist typeid='栏目ID' limit='0,10' flag='c' titlelen='30
    artlist文档列表(配合arcpagelist标签可实现ajax瀑布流分页) [基础用法]标签:artlist描述:获取网站栏目(如:文章、产品、图集、软件等)的一些文章。用法:{eyou:artlisttypeid='栏目ID'limit='0,10'flag='c'titlelen='30'infolen='160'orderby='add_time'}  &......
  • 企业级--Sonatype Oss(01)私服搭建
    SonatypeOss后续使用nexus替代环境nexus环境要求(截止目前(3.70.1-02):jdk环境:支持jdk8(支持所有版本)、jdk11(3.67.0之后的版本),jdk17(3.69.0之后的版本,不支持OrientDB)这3个版本,。内存:建议4G。存储:根据自己仓库存储类型,选择不同的存储空间,建议60G。其他:如果只使用ma......
  • Extjs xtype 一览表
    ExtJs xtype一览基本组件:xtypeClass描述buttonExt.Button按钮splitbuttonExt.SplitButton带下拉菜单的按钮cycleExt.CycleButton带下拉选项菜单的按钮buttongroupExt.ButtonGroup编组按钮(Since3.0)slider......
  • MathType7.4.6.8最新免费下载,数学表达神器来袭!
    大家好啊,我是爱分享的小能手!今天要给大家安利一款神奇的工具——MathType7.4免费版本。这不仅仅是一个简单的数学公式编辑器,而是你学术写作和数学研究的强大助手,简直是数学爱好者的“瑞士军刀”!MathType最新mac官方版本下载如下:https://wm.makeding.com/iclk/?zoneid=61764......