在 TypeScript 中 interface 和 type 的区别

这篇具有很好参考价值的文章主要介绍了在 TypeScript 中 interface 和 type 的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 TypeScript 中,interface 和 type 都用于定义自定义类型,但它们有一些区别:

  1. 语法风格:interface 使用关键字 interface 开头,而 type 使用关键字 type 开头。例如:

    interface Person {
      name: string;
      age: number;
    }
    
    type Car = {
      brand: string;
      year: number;
    };
    
  2. 扩展和实现:interface 可以通过继承或合并来扩展其他接口,并支持类实现。而 type 在定义类型时不支持继承和合并。

    interface Animal {
      name: string;
      eat(): void;
    }
    
    interface Dog extends Animal { // 接口继承
      bark(): void;
    }
    
    class Labrador implements Dog { // 类实现接口
      name: string = 'Labrador';
      eat() {
        console.log('Labrador is eating');
      }
      bark() {
        console.log('Labrador is barking');
      }
    }
    
  3. 合并声明:当定义具有相同名称的 interface 时,它们会自动合并到一个类型声明中。而 type 定义具有相同名称的类型时,会报错。例如:

    interface Person {
      name: string;
    }
    
    interface Person { // 自动合并到一个类型声明
      age: number;
    }
    
    const person: Person = {
      name: 'John',
      age: 25,
    };
    
    type Person = {
      name: string;
    };
    
    type Person = { // 报错,无法重复定义类型 "Person"
      age: number;
    };
    
    const person: Person = {
      name: 'John',
      age: 25,
    };
    
  4. 表示形式:type 具有更强大的功能,能够使用联合类型、交叉类型、映射类型、条件类型等高级类型特性,以及使用类型别名进行声明。而 interface 的功能相对较为简单,不支持这些高级类型特性。例如:

    type ID = string | number; // 使用类型别名定义联合类型
    
    type Person = {
      name: string;
      age: number;
    };
    
    type Student = Person & { grade: number }; // 使用交叉类型
    
    type Config = {
      [key: string]: boolean;
    }; // 使用映射类型
    

综上所述,interface 主要用于定义对象的形状,并且支持继承、合并和类的实现,而 type 主要用于创建类型别名,具有更多的高级类型特性,并且不支持继承和合并。根据不同的需求和场景,选择合适的工具来定义类型。一般来说,当需要描述一个对象的结构时,优先使用 interface;而当需要创建复杂的、可复用的类型时,可以使用 type 和高级类型特性。文章来源地址https://www.toymoban.com/news/detail-548749.html

到了这里,关于在 TypeScript 中 interface 和 type 的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【TypeScript】TS中type和interface在类型声明时的区别

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏: vue3+vite+typeScript从入门到实践 📢 资料领取:前端进阶资料可以找我免费领取 🔥

    2023年04月26日
    浏览(54)
  • 一文了解JavaScript 与 TypeScript的区别

    TypeScript 和 JavaScript 是两种互补的技术,共同推动前端和后端开发。在本文中,我们将带您快速了解JavaScript 与 TypeScript的区别。   一、TypeScript 和 JavaScript 之间的区别 JavaScript 和 TypeScript 看起来非常相似,但有一个重要的区别。 JavaScript 和 TypeScript 之间的主要区别在于 JavaS

    2024年02月14日
    浏览(42)
  • TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(1):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,JavaS

    2024年02月16日
    浏览(37)
  • typeof 在TypeScript中和JavaScript中的区别

            在TypeScript中和JavaScript中都有typeOf,但是作用用法却大有不同。 一、typeof用来判断数据类型返回结果: 基本数据类型:string,number,boolean,undefined 引用数据类型:object (不管是什么引用类型就返回object),function 二、typeof判断变量是否存在         ts中的typeof可

    2024年02月09日
    浏览(38)
  • 面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别?

    面试题-TS(一):TypeScript是什么?它与JavaScript有什么区别? TypeScript是一种编程语言,它是JavaScript的超集。它通过添加静态类型、类、接口和模块等功能来扩展JavaScript。 JavaScript是一种广泛应用于Web开发的脚本语言,它的灵活性和易用性使得它成为了开发者们的首选。然而,Jav

    2024年02月15日
    浏览(36)
  • JavaScript、TypeScript、ES5、ES6之间的联系和区别

    ECMAScript:  一个由 ECMA International 进行标准化,TC39 委员会进行监督的语言。通常用于指代标准本身。 JavaScript:  ECMAScript 标准的各种实现的最常用称呼。这个术语并不局限于某个特定版本的 ECMAScript 规范,并且可能被用于任何不同程度的任意版本的 ECMAScript 的实现。 ECMAS

    2024年02月13日
    浏览(32)
  • TypeScript的interface

    目录 一、基本使用 二、interface重名、重合 三、任意key 四、interface的? 五、interface的readonly 六、interfacec的接口继承 七、interface定义函数 总结: 变量a这个对象必须有name和age这两个属性,并且他们的类型分别是string和number, 这都相当与给变量a声明了一个指定的类型A  总结:

    2024年02月09日
    浏览(30)
  • Typescript 之接口 interface(详解)

    TS新增了一个重要概念:接口, 分为对象类型接口和函数类型接口 接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约 Interface 是一种描述对象或函数的东西。你可以把它理解为形状,一个对象需要有什么样的属性,函数需要什么参数或返回什么样的值,数

    2024年02月10日
    浏览(34)
  • TypeScript--接口interface的定义,实现,继承

    可浏览博客主页的 TypeScript 专栏,会陆续添加相关文章,有问题或者可以优化的地方也希望大大门告知 共同进步 :) ts版本 Version 4.8.4 TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”。 在TypeScript里,接口的作

    2023年04月12日
    浏览(31)
  • 【TypeScript】接口类型 Interfaces 的使用理解

    导语 : 什么是 类型接口 ? 在面向对象语言中 ,接口 (Interfaces) 是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。TypeScript 中的 类型接口 是一个非常灵活的概念,除了可用于 对类的一部分行为进行抽象 以外,也常用于对「

    2024年02月15日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包