在 TypeScript 中,定义类型时你用 Types 还是 Interfaces?

a57158e41362ad5ea032b58452bdd6c4.jpeg


什么是 Types 和 Interfaces?

TypesInterfaces 是 TypeScript 中两种用于定义数据结构的工具。它们可以帮助开发者在编写代码时约束变量和对象的类型,从而减少错误并提高代码的可读性。

  • Types:Types 允许你定义各种类型,包括基本类型(如字符串、数字)、对象类型、联合类型、交叉类型等。它们非常灵活,可以通过组合不同的类型来创建复杂的数据结构。

    示例:

    type UserID = string | number;
    type User = {
        id: UserID;
        name: string;
        age: number;
    }
  • Interfaces:Interfaces 主要用于定义对象的结构,包括对象的属性及其类型。它们更注重描述对象形状,可以通过 extends 关键字实现接口的继承,从而增强代码的可复用性。

    示例:

    interface User {
        id: string;
        name: string;
        age: number;
    }

为什么优先使用Types呢?

在 TypeScript 中,关于使用 Types 还是 Interfaces 进行类型定义一直存在争论。尽管两者都可以用于创建变量、函数参数和返回值等可重用的结构,但在大多数情况下,我们应该优先使用 Types。以下是四个主要原因:

1. Types 支持联合类型

Types 可以定义联合类型,这意味着它们可以在单个定义中包含多个原始类型或对象。例如:

type ID = string | number;

然而,使用 Interfaces 是无法实现这一点的:

// 会报错!
interface ID = string | number;

2. Types 支持字符串字面量类型

Types 允许定义字符串字面量类型,即可以指定变量或参数的确切字符串值。而 Interfaces 则不支持这一特性。例如:

type Status = "pending" | "in-progress" | "completed";

而使用 Interfaces 则会报错:

// 会报错!
interface Status = "pending" | "in-progress" | "completed";

3. Types 是不可变的

在 TypeScript 中,Interfaces 可以多次声明并合并,这可能会导致意外的行为。例如:

interface User {
    email: string;
}

interface User {
    password: string;
}

上述代码将合并两个声明,最终的 User 接口包含 emailpassword 两个属性。然而,Types 是不可变的,这类似于 JavaScript 中使用 const 关键字声明变量:

type User = {
    email: string;
}

// 会报错,因为不能重复声明
type User = {
    password: string;
}

4. Types 支持条件类型

Types 支持条件类型,允许根据条件选择类型。例如:

type Check<T> = T extends string ? string : number;

let result1: Check<string>; // result1 的类型是 string
let result2: Check<number>; // result2 的类型是 number

总结

虽然 Interfaces 在某些特定情况下(如需要继承时)更为合适,但在大多数情况下,Types 提供了更多的灵活性和强大的功能。因此,我们应该尽可能优先使用 Types。

希望这篇文章对你理解 TypeScript 中的 Types 和 Interfaces 有所帮助!如果有任何疑问,欢迎在评论区留言讨论。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/700175.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TCP四次挥手全过程详解

TCP四次挥手全过程 有几点需要澄清&#xff1a; 1.首先&#xff0c;tcp四次挥手只有主动和被动方之分&#xff0c;没有客户端和服务端的概念 2.其次&#xff0c;发送报文段是tcp协议栈的行为&#xff0c;用户态调用close会陷入到内核态 3.再者&#xff0c;图中的情况前提是双…

迅狐矩阵系统:智能化多平台内容管理与发布

迅狐矩阵系统是一套专为提高数字内容管理和发布效率而设计的综合性解决方案。它通过一系列智能化功能&#xff0c;帮助用户实现多平台内容的高效管理和发布&#xff0c;以下是系统的几大核心优势&#xff1a; 多平台绑定发布 迅狐矩阵系统支持用户绑定多个平台的多个账号&…

深入浅出 Qt 中 QListView 的设计思想,并掌握大规模、高性能列表的实现方法

在大规模列表控件的显示需求中&#xff0c;必须解决2个问题才能获得较好的性能&#xff1a; 第一就是数据存在哪里&#xff0c; 避免出现数据的副本。第二就是如何展示Item&#xff0c;如何复用或避免创建大量的Item控件。 在QListView体系里&#xff0c;QAbstractListModel解…

1.Anaconda-创建虚拟环境的手把手教程

文章目录 介绍&#xff08;必看&#xff09;正文版本信息模块安装流程1.创建虚拟环境2.激活环境3.退出虚拟环境4.安装python(激活虚拟环境)5.安装tensorflow(激活虚拟环境)6.安装matplotlib7.protobuf版本太高会有问题(激活虚拟环境) 常用的指令&#xff08;一定会用到&#xf…

基于C#开发web网页管理系统模板流程-主界面统计功能完善

前言 紧接上篇->基于C#开发web网页管理系统模板流程-主界面管理员入库和出库功能完善_c#web程序设计-CSDN博客 统计功能是管理系统很常见的功能&#xff0c;例如仓库管理系统要统计某时间段的出入库以整合利润情况&#xff0c;再例如论文管理系统要统计男女生的分数情况等等…

day35|1005.K次取反后最大化的数组和 134. 加油站135. 分发糖果

文章目录 python语法记录 sort格式 1005.K次取反后最大化的数组和思路方法一方法二 按照绝对值排序 教程&#x1f388;✨ 背住 按照绝对值进行降序排序的语法是&#xff1a; 134. 加油站思路方法一 教程解法方法二 暴力求解 135. 分发糖果思路方法一 总结 python语法记录 sort …

那些年我看过的技术书(持续更新,大佬的成长之路)

作为一个技术人啊&#xff0c;要学会多看书&#xff0c;发展自己。哦也&#xff01;你可以不关注&#xff0c;就把文章点个收藏吧&#xff0c;万一以后想看书了呢&#xff1f; 网络安全 CTF篇 入门篇 《极限黑客攻防&#xff1a;CTF赛题揭秘》 Web篇 Reserve篇 《IDApro…

Nature | 百年未变?博士评定机制该改改了!

19世纪初&#xff0c;德国和法国先后开始授予现代科研博士学位。时至今日&#xff0c;大学的科研与教学早已不同于往昔。但惊人的是&#xff0c;获得和评定博士学位的流程却几乎没变。但改革势在必行。 博士生导师可以从其他教育阶段的创新中学到很多东西。 Innovation in PhD…

TinyHttpd源码精读(三)

在上一章中我们一起看了如何实现静态的网页&#xff0c;在这里我们一起看Tinyhttpd最后的一部分&#xff0c;动态网页的实现&#xff1a;在这里首先声明下因为cgi脚本的支持问题&#xff0c;所以我会新建一个简单的cgi脚本然后将路径导向到这个脚本&#xff1a; 0.perl的配置&…

3、SLAM算法中的运动模型和观测模型和常用传感器类型

SLAM算法中的运动模型和观测模型 常用传感器类型&#xff1a;局部传感器&#xff08;相机、IMU、激光雷达等&#xff09;在小区域内提供了精确的位姿&#xff0c;而全局传感器&#xff08;GPS、磁力计、气压计等&#xff09;在大尺度环境中提供了有噪声但是全局无漂移的定位。 …

【three.js】光源对物体表面影响

目录 一、受光照影响材质 二、光源简介 2.1 点光源 光源位置 点光源辅助观察 完整代码,粘贴即用 2.2 环境光 2.3 平行光 平行光辅助观察 实际生活中物体表面的明暗效果是会受到光照的影响,比如晚上不开灯,你就看不到物体,灯光比较暗,物体也比较暗。在threejs中,…

金融数据中心布线运维管理解决方案

金融行业的核心业务&#xff0c;如交易、支付、结算等&#xff0c;对网络的依赖程度极高。布线作为网络基础设施的重要组成部分&#xff0c;其稳定性和可靠性直接关系到业务的连续运行。因此&#xff0c;良好的布线管理能够确保网络系统的稳定运行&#xff0c;减少因网络故障导…

安装sqlserver2022 express

1、下载 SQL Server 下载 | Microsoft 双击sql2022-ssei-expr 2、安装 下载完成以后&#xff0c;将会出现以下对话框 &#xff1a; 点击【全新SQL Server独立安装或向现有安全添加功能】 下一步&#xff0c;下一步&#xff1a; 下一步&#xff1a; 下一步&#xff0c;这里我…

encoding Token和embedding 傻傻分不清楚?

encoding 编码 “encoding” 是一个在计算机科学和人工智能领域广泛使用的术语&#xff0c;它可以指代多种不同的过程和方法。核心就是编码&#xff1a;用某些数字来表示特定的信息。当然你或许会说字符集(Unicode)更理解这种概念&#xff0c;编码更强调这种动态的过程。而字符…

Rejetto HTTP文件服务器 未授权RCE漏洞复现(CVE-2024-23692)

0x01 产品简介 Rejetto HTTP File Server(HFS)是一个基于HTTP协议的文件服务器软件,旨在为用户提供简单、轻量级且易于使用的文件共享解决方案。功能强大、易于使用的文件服务器软件,无论是个人使用还是团队协作,HFS都能满足用户的需求,提高工作效率。 0x02 漏洞概述 …

vue3根据按钮切换更新echarts对应的数据

效果图 初始化注意 setOption的函数定义&#xff0c;option是指图表的配置项和数据&#xff0c;notMerge是指是否不跟之前设置的 option 进行合并。默认为 false。即表示合并。如果为 true&#xff0c;表示所有组件都会被删除&#xff0c;然后根据新option 创建所有新组件 //…

springboot+vue前后端分离项目中使用jwt实现登录认证

文章目录 一、后端代码1.响应工具类2.jwt工具类3.登录用户实体类4.登录接口5.测试接口6.过滤器7.启动类 二、前端代码1.登录页index 页面 三、效果展示 一、后端代码 1.响应工具类 package com.etime.util;import com.etime.vo.ResponseModel; import com.fasterxml.jackson.…

采用java+springboot+vue+uniapp自主研发的智慧城管源码,城管综合执法平台源代码

智慧城管执法平台源码&#xff0c;PCAPP端全套源码&#xff0c;城管综合执法系统源码。 智慧城管系统拥有自主版权&#xff0c;项目落地案例&#xff0c;有演示&#xff0c;适合二次开发项目使用。 智慧城管执法系统旨在提高城市管理效率&#xff0c;涵盖了城市管理中的很多业务…

Linux kernel本地权限提升漏洞(CentOS8升级内核的解决方案)

一、CentOS8升级kernel内核的必要性 1、增强系统的安全性。 升级CentOS内核可以提供更好的安全性保障。新的内核版本通常包含了的安全补丁和漏洞修复&#xff0c;可以有效防止系统遭受恶意攻击&#xff0c;提高系统的稳定性和安全性。 2、优化硬件兼容性。 CentOS升级内核可以…

深度解析地推效果,Xinstall助您精准提升推广成效

在移动互联网时代&#xff0c;App的推广方式日趋多样化&#xff0c;其中地推作为线下推广的重要一环&#xff0c;因其成本相对较低、互动性强等特点&#xff0c;受到越来越多App厂商的青睐。然而&#xff0c;地推过程中往往面临着数据收集困难、获客率低、业务员费用结算标准难…