广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >TypeScript接口和类型的区别小结
  • 892

0
分享到

TypeScript接口和类型的区别小结

TypeScript接口和类型区别TypeScript接口类型 2023-05-20 11:05:56 892人浏览 泡泡鱼
摘要

目录接口（interface）类型（type）interface vs type结论typescript 是由 Microsoft 开发的一种开源的编程语言。它是 javascrip

typescript 是由 Microsoft 开发的一种开源的编程语言。它是 javascript 的超集，添加了静态类型和其他功能，使代码更为健壮且易于维护。在 TypeScript 中，有两种主要的定义自定义类型的方式：接口和类型。尽管它们在外观上可能相似，但它们之间有一些关键的区别。在本文中，我们将讨论 TypeScript 中接口和类型之间的区别并给出具体代码示例。

接口（interface）

interface 是一种定义复杂类型的方式，它可以用来描述对象类型、函数类型、类类型、数组类型、字面量类型等。interface 通常用来描述一个对象的外部形状（Shape），即这个对象有哪些属性、属性的类型是什么、方法的签名是什么等。例如：

interface Person {
  name: string;
  age: number;
  sayHello(): void;
}
class Student implements Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  sayHello() {
    console.log(`Hi, my name is ${this.name}, and I'm ${this.age} years old.`);
  }
}
const student = new Student('Tom', 20);
student.sayHello(); // Hi, my name is Tom, and I'm 20 years old.

上面的代码中，我们定义了一个 Person 接口，它包含 name 和 age 属性以及 sayHello 方法。然后我们定义了一个 Student 类，它实现了 Person 接口，因此必须实现 name、age 和 sayHello。在 sayHello 方法中，我们使用模板字符串输出学生的姓名和年龄。

类型（type）

type 是一种定义简单类型的方式，它可以用来定义基本类型、联合类型、交叉类型、字面量类型等。type 可以给一个类型起一个别名，以便重复使用。例如：

type Status = 'active' | 'inactive';
type Person = {
  name: string;
  age: number;
  status: Status;
};

上面的代码定义了一个 Status 类型和一个 Person 类型。Status 类型是一个字符串字面量类型，它只能是 'active' 或 'inactive' 中的一个。Person 类型描述了一个人对象的形状，包括 name 属性、age 属性和 status 属性，其中 status 属性的类型是 Status。

虽然 interface 和 type 在定义类型时有些不同，但在使用时它们是具有一定通用性的。例如，我们可以使用 interface 定义函数的参数类型和返回值类型，也可以使用 type 定义同样的类型，例如：

interface Sum {
  (a: number, b: number): number;
}
type Multiply = (a: number, b: number) => number;

上面的代码分别使用 interface 和 type 定义了一个加法函数类型 Sum 和一个乘法函数类型 Multiply，它们都接受两个参数并返回它们的运算结果。

interface vs type

接口可以被继承，而类型不能。

接口可以通过 extends 关键字来扩展基础接口，例如：

interface Person {
  name: string;
  age: number;
}
interface Employee extends Person {
  company: string;
}
const employee: Employee = { name: 'John', age: 30, company: 'Acme Inc.' };

类型不能被继承。

类型只能定义一次，而接口可以定义多次并且会自动合并。

类型可以定义一次，例如：

type Status = 'active' | 'inactive';
const status: Status = 'active';

如果试图再次定义同名类型，则会报错。
接口可以定义多次，并且会自动合并同名属性，例如：

interface Person {
  name: string;
}
interface Person {
  age: number;
}
const person: Person = { name: 'John', age: 30 };

接口可以定义可选属性和只读属性，而类型不能。

接口可以定义可选属性和只读属性，例如：

interface Person {
  name: string;
  age?: number;
  readonly email: string;
}
const person1: Person = { name: 'John', email: 'john@example.com' };
const person2: Person = { name: 'Jane', age: 25, email: 'jane@example.com' };
person1.email = 'jane@example.com'; // Error: Cannot assign to 'email' because it is a read-only property.

类型不能定义可选属性和只读属性。

类型可以定义联合类型和交叉类型，而接口不能。

类型可以用联合类型和交叉类型来组合多个类型，例如：

type Person = { name: string } & { age: number };
type Status = 'active' | 'inactive';
type UserStatus = { status: Status } & Person;
const userStatus: UserStatus = { name: 'John', age: 30, status: 'active' };

接口可以定义索引签名，而类型不能。

接口可以定义索引签名，例如：

interface Dictionary {
  [key: string]: number;
}
const dict: Dictionary = { a: 1, b: 2 };

类型不能定义索引签名。

结论

  • 在对象扩展情况下，interface 使用 extends 关键字，而 type 使用交叉类型（&）。
  • 同名的 interface 会自动合并，并且在合并时会要求兼容原接口的结构。
  • interface 与 type 都可以描述对象类型、函数类型、Class 类型，但 interface 无法像 type 那样表达元组、一组联合类型等等。
  • interface 无法使用映射类型等类型工具，也就意味着在类型编程场景中我们还是应该使用 type 。

interface 就是描述对象对外暴露的接口，其不应该具有过于复杂的类型逻辑，最多局限于泛型约束与索引类型这个层面。而 type alias 就是用于将一组类型的重命名，或是对类型进行复杂编程。

到此这篇关于TypeScript接口和类型的区别小结的文章就介绍到这了,更多相关TypeScript接口和类型区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: TypeScript接口和类型的区别小结

本文链接: https://www.lsjlt.com/news/214409.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • TypeScript接口和类型的区别小结
    目录接口（interface）类型（type）interface vs type结论TypeScript 是由 Microsoft 开发的一种开源的编程语言。它是 JavaScrip...
    99+
    2023-05-20
    TypeScript接口和类型区别 TypeScript 接口 类型
  • TypeScript接口和类型有哪些区别
    今天小编给大家分享的是TypeScript接口和类型有哪些区别，相信很多人都不太了解，为了让大家更加了解，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。目录接口（interface）类型（type）interface vs t...
    99+
    2023-07-06
  • typeScript 泛型使用和泛型接口结合
    目录1、泛型是啥？2、泛型类型3、泛型接口4、泛型类5、泛型约束6、泛型参数默认类型7、泛型条件类型typeScript 中新增的泛型概念、泛型使用、泛型与接口结合： 在实际应用中...
    99+
    2022-11-13
  • TypeScript类型级别和值级别如何区分
    这篇文章主要介绍“TypeScript类型级别和值级别如何区分”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“TypeScript类型级别和值级别如何区分”文章能帮助大家解决问题。对值级别编程类型级别...
    99+
    2023-07-05
  • typeScript泛型使用和泛型接口结合的方法
    这篇“typeScript泛型使用和泛型接口结合的方法”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“typeScript泛型...
    99+
    2023-06-29
  • MVC下的DAO接口类和SERVICE接口类区别？
    简单理解：DAO数据库访问对象 实现连接数据库 修改、添加等细节 service服务层 面向功能 把一个整个服务 细化 调用DAO其实service其中都是一些方法&nb...
    99+
    2023-06-03
  • TypeScript类型anynevervoid和unknown使用场景区别
    目录前言any用法使用场景unknown用法使用场景never用法使用场景void用法使用场景总结前言 不知道初学TypeScript的同学会不会和我一样被any，unknown，n...
    99+
    2022-11-13
  • C#抽象类和接口的区别
    这篇文章主要介绍“C#抽象类和接口的区别”，在日常操作中，相信很多人在C#抽象类和接口的区别问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”C#抽象类和接口的区别”的疑惑有所帮助！接下来，请跟着小编一起来学习吧...
    99+
    2023-06-18
  • java 接口和类的区别是什么？
    Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以...
    99+
    2019-01-05
    java教程 java 接口 类
  • Java 框架中数据类型和接口的区别与联系。
    Java是一种功能强大的编程语言，它提供了许多不同的框架和库，使得开发人员可以快速地构建高效的应用程序。其中，数据类型和接口是Java开发中非常重要的两个概念。在本文中，我们将深入探讨Java框架中数据类型和接口的区别和联系。 首先，让我们...
    99+
    2023-10-13
    框架 数据类型 接口
  • TypeScript中的接口和泛型是什么
    这篇文章给大家分享的是有关TypeScript中的接口和泛型是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。接口使用 interface 关键字来定义数据类型对象类型当存在于较长的数据类型约束时，我们可以通过...
    99+
    2023-06-29
  • java中接口与类的区别
    概念接口（interface)在java语言中就是一个抽象类型，但接口并不是一个抽象类，是抽象方法的集合，接口通常以interface来声明。一个类通过继承接口的方式，从而来继承接口的抽象方法。使用方法为：implement 接口名类是描述...
    99+
    2016-09-24
    java基础 java 接口 类 区别
  • Java 接口和抽象类的区别详解
    目录什么是抽象类和接口？ 区别在哪里？抽象类接口抽象类和接口解决了什么问题？如何模拟抽象类和接口如何决定该用抽象还是接口？什么是抽象类和接口？ 区别在哪里？ 不同的编程语言对接口和...
    99+
    2022-11-12
  • Java抽象类和接口的区别详情
    1、抽象类 vs 接口  方法类型： 接口只能有抽象方法。抽象类可以有抽象和非抽象方法。从 Java 8 开始，它也可以有默认和静态方法。 最终变量： 在 Java...
    99+
    2022-11-12
  • TypeScript中的接口和泛型你了解吗
    目录接口对象类型索引类型函数类型继承交叉类型接口实现interface 和 type 的区别字面量赋值枚举类型泛型泛型函数泛型接口泛型类类型约束总结接口 使用 interface 关...
    99+
    2022-11-13
  • Webpack和Vite的区别小结
    目录前言WebpackViteVite相比于Webpack打包更快相比Webpack5中使用的MFSU技术Vite插件推荐总结前言 Webpack和Vite是现代前端开发中非常重要的...
    99+
    2023-05-18
    Webpack Vite
  • git和SVN的区别小结
    Git和SVN都是版本控制系统，用于管理和跟踪软件开发过程中的更改。然而，它们之间存在一些重要的区别：1. 分布式vs集中式：Git是一种分布式版本控制系统，每个开发者都有完整的代码仓库副本，并能够在本地进行更改和提交。SVN是一种集中...
    99+
    2023-08-11
    git
  • php抽象类和接口的区别有哪些
    PHP中的抽象类和接口都是用来定义一些规范、约束或者行为的方式，但是它们之间有一些区别：1. 抽象类可以包含方法的具体实现，而接口只...
    99+
    2023-10-18
    php
  • java接口和抽象类的区别有哪些
    1. 实现方式不同：接口是用关键字interface定义的，抽象类是用关键字abstract定义的。2. 继承方式不同：类可以实现多...
    99+
    2023-09-15
    java
  • PHP的抽象类和接口有哪些区别
    小编给大家分享一下PHP的抽象类和接口有哪些区别，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！PHP的抽象类和接口的区别：1、抽象类用abstract关键字在类前声明，且有class声明为类，接口是用interface来声...
    99+
    2023-06-08
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作