TypeScript中 interface接口 type关键字 enum枚举类型

type interface总是傻傻分不清~~~

Type Aliases (type)

type 关键字用于为类型定义一个别名。这可以是基本类型、联合类型、元组、数组、函数等。type 定义的类型在编译后的 JavaScript 代码中会被移除,不会留下任何运行时的代码。

//联合类型
type StringOrNumber = string | number;
type StringOrNumber = 1 | 2;//数组类型
type Point = number[];//元组类型
type Point = [number, number];//函数类型
type Greeter = (name: string) => void;const myPoint: Point = [10, 20];
const greet: Greeter = function(name) {console.log("Hello, " + name);
};

Interfaces (interface)

interface 关键字用于定义对象的形状或类的公共结构。它可以包含方法签名、属性和索引签名。接口通常用于对类进行类型检查,确保类实现了接口中定义的所有成员。

interface Person {firstName: string;lastName: string;age?: number; // 可选属性
}const person: Person = {firstName: "John",lastName: "Doe",age: 30
};
异同

相同

  1. type和interface都可以用来定义对象和函数

  2. 都可以实现继承

不同

  1. type 可以声明基本类型、联合类型、元组类型、通过typeof 操作符来声明
  2. interface 可以声明合并。
使用场景

1、官方推荐使用 interface,其他无法满足需求的情况下用 type。但是因为联合类型和交叉类型是比较常用的,所以避免不了大量使用 type 的场景,一些复杂类型也需要通过组装后形成类型别名来使用。

2、如果想保持代码统一,还是可选择使用 type。通过上面的对比,type 其实可涵盖 interface 的大部分场景。

3、对于 React 组件中 props 及 state,推荐使用 type,这样能够保证使用组件的地方不能随意在上面添加属性。如果有自定义需求,可通过 HOC(高阶组件)二次封装。

4、编写三方库时使推荐使用 interface,其更加灵活自动的类型合并可应对未知的复杂使用场景。

Enums (enum)

enum 关键字用于定义枚举类型,它是一种特殊的类型,用于定义一组命名的常数。枚举成员被赋值为数字,从 0 开始递增,除非显式地指定一个值。

enum Color {Red,Green,Blue
}const c: Color = Color.Green;
1.数值枚举

在数值枚举中,每个成员默认从 0 开始自动赋值,并且每个成员的值依次递增 1

enum Color {Red,Green,Blue
}// 使用枚举
const favoriteColor: Color = Color.Green;
console.log(favoriteColor); // 输出: 2
console.log(Color[2]); // 输出: "Green"

如果你想要手动指定枚举成员的值,可以这样做:

enum Color {Red = 1,Green = 2,Blue = 3
}const favoriteColor: Color = Color.Green;
console.log(favoriteColor); // 输出: 2
2.字符串枚举

字符串枚举使用花括号 {} 定义,并且每个成员必须显式地指定一个字符串值。

enum Color {Red = "red",Green = "green",Blue = "blue"
}const favoriteColor: Color = Color.Green;
console.log(favoriteColor); // 输出: "green"
console.log(Color["Green"]); // 输出: "green"
3.反向映射

在 TypeScript 的枚举中,你可以通过枚举类型本身来访问枚举成员的名称,这称为反向映射。这在调试时非常有用,因为它允许你通过值快速找到对应的枚举名称。

enum Color {Red,Green,Blue
}console.log(Color[0]); // 输出: "Red"
console.log(Color[1]); // 输出: "Green"
console.log(Color[2]); // 输出: "Blue"

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL JOIN的学习

SQL JOIN (w3school.com.cn) 之前跟着老师学数据库的时候学过,最近又比较频繁的在使用。 再复习一下。 Id_P是主键 Id_O是主键 1. SELECT Persons.LastName, Persons.FirstName, Orders.OrderNo FROM Persons, Orders WHERE Persons.Id_P Orders.Id_P 2. SEL…

Idea 2023.2.7构建SpringCloud多模块项目

Idea 2023.2.7构建SpringCloud多模块项目 本文介绍如何使用idea 2023.2.7构建基于SpringCloud alibaba微服务项目,基于Nacos注册中心。 环境准备: JDK版本:jdk17 SpringBoot:3.3.4 SpringCloud:2023.0.3 Nacos服务端:2.4.3 1、创建父工程&a…

指针的理解

int arr[3] {10, 20, 30}; int *parr arr; 1. *parr 、 *arr 分别代表什么 指针parr指向数组arr[3]的首元素地址,arr数组名单独使用表示数组首元素地址,即arr>&arr[0]; *parr和*arr是对首元素地址的解引用,代表访问arr[0]的空间…

MongoDB 介绍

一、MongoDB 介绍 MongoDB 是一个开源的、面向文档的数据库管理系统。它采用了灵活的数据模型,以类似 JSON 的文档形式存储数据,具有高可扩展性、高性能和丰富的功能。 主要特点包括: 灵活的数据模型:文档型数据库允许存储不同…

C++面试速通宝典——29

543. 简述#ifdef、#else、#endif和#ifndef的作用 利用#ifdef、#endif将程序功能模块包括进去,以向特定用户提供该功能。 在不需要时用户可轻易将其屏蔽。 #ifdef MATH #include "math.c" #endif 在子程序前加上标记,以便于追踪和调试。 …

react hooks中在setState后输出state为啥没有变化,如何解决

在 React Hooks 中,setState 的概念被 useState 或 useReducer 钩子所替代。与类组件中的 setState 一样,这些钩子也是异步更新状态的。因此,如果你尝试在调用 setState(即 setXXX 函数)后立即读取状态值,你…

微知-BlueField DPU在lspci中显示Flash Recovery是什么意思?

效果: lspci |grep BlueField10:00.0 Memory controller: Mellanox Technologies MT42822 Family [BlueField-2 SoC Flash Recovery] (rev 01)*原因: 表示此时flash是empty空的,或者在flash中的FW是无法工作的。比如烧录错误。 这里指的一提…

How to list the environment variables in MySQL based on podman

有时候,我们期望系统的、完整的输出mysql中的环境变量,但是只是想看看,不想安装mysql,有没有什么好的办法呢? 其实,答案是有的。我们可以基于docker/podman来完成,这里推荐podman,示…

从不一样的角度体会MATLAB

MATLAB(矩阵实验室)是一个广泛使用的高性能语言,特别适合用于科学计算、数据分析和图形可视化。它的强大功能和灵活性使得它在工程、金融、科研及教育等领域得到了广泛应用。以下是对MATLAB的一些不同角度的介绍: 1. 编程环境 M…

大数据测试:Charles修改响应数据

上一篇大数据测试:Fiddler修改响应数据-CSDN博客 ,有同学反馈有没有Charles的方式修改响应数据,本篇就是Charles修改数据操作步骤,相比较fiddler,Charles相对简单,便捷,我很喜欢 1、背景&…

为什么SSH协议是安全的?

SSH的传输层协议(Transport Layer Protocol)和用户鉴权协议(Authentication Protocol)确保数据的传输安全,这里只介绍传输层协议,是SSH协议的基础。 本文针对SSH2协议。 1、客户端连接服务器 服务器默认…

serv00 恢复如初 清理 回到刚注册状态 重生

内容介绍 本期主要介绍如何将serv00恢复到刚刚注册时的初始状态, 不管你是搭建了节点还是建立了个人博客网站, 使用本期介绍的方法, 都可以将已经写入了内容或者混乱的serv00重置到刚刚注册时的状态. 更多内容:https://lzphy.top/ 1 清除PM2进程 列出进程清单 …

Web组态数据联动

1. 通过get/post获取设备列表信息 2. websocket连接mqtt服务器&#xff0c;接收json报文信息 3. 通过Alpine进行数据联动 4. 封装svg对象&#xff0c;更新属性值 index.html <!DOCTYPE html> <html lang"en"> <head> <meta charset&qu…

Wavelet Convolutions for Large Receptive Fields

大感受野的小波卷积 论文链接&#xff1a;https://arxiv.org/abs/2407.05848v2 项目链接&#xff1a;https://github.com/BGU-CS-VIL/WTConv Abstract 近年来&#xff0c;人们一直试图增加卷积神经网络&#xff08;CNN&#xff09;的核大小&#xff0c;以模拟Vision Transfo…

基于深度学习的车辆车型检测识别系统(YOLOV5)

界面图&#xff1a; 项目简介&#xff1a; 网络&#xff1a;深度学习网络 yoloV5 软件&#xff1a;PycharmAnaconda 环境&#xff1a;python3.8 opencv PyQt5 torch1.9 文件&#xff1a;训练集8000张图片 测试集1000张图片 系统包含所有文件夹 环境文件 UI文件 功能&a…

javascript中`Math.ceil` 和 `Math.floor`的区别

Math.ceil 和 Math.floor 都是 JavaScript 中的内置函数&#xff0c;用于对数字进行取整&#xff0c;但它们的行为有所不同&#xff1a; Math.ceil&#xff1a;向上取整。它返回大于或等于一个给定数字的最小整数。例如&#xff0c;Math.ceil(4.2) 返回 5&#xff0c;Math.ceil…

解决php连接本地mysql连接错误的问题

我的服务器启用的nginx&#xff0c;配置了php的连接mysql的配置文件connect.php&#xff1a; <?php$server"localhost";//主机$db_username"root";//你的数据库用户名$db_password"root";//你的数据库密码$dbname "users";$conn…

Zookeeper快速入门:部署服务、基本概念与操作

文章目录 一、部署服务1.下载与安装2.查看并修改配置文件3.启动 二、基本概念与操作1.节点类型特性总结使用场景示例查看节点查看节点数据 2.文件系统层次结构3.watcher 一、部署服务 1.下载与安装 下载&#xff1a; 一定要下载编译后的文件&#xff0c;后缀为bin.tar.gz w…

PE结构之导出表

导出表结构中各种值的意义 ​​​​​​ 根据函数地址表遍历函数名称RVA表,和上面的图是逆过程 //函数地址表 和当前内存中的位置DWORD AddressOfFunctionsFOA RVAToFOA(LPdosHeader, LPexprotDir->AddressOfFunctions);PDWORD LPFunctionsAddressInMemary (PDWORD)((cha…

ssm基于VUE的图书馆管理系统的设计与实现+vue

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 目 录 III 第1章 绪论 1 1.1 课题背景 1 1.2 课题意义 1 1.3 研究内容 2 第2章 开发环境与技术 3 …