TypeScript 常用高级类型

目录

前言: 

TypeScript 常用高级类型

基本概念

高级类型

1. 交叉类型(Intersection Types)

2. 联合类型(Union Types)

3. 映射类型(Mapped Types)

4. 条件类型(Conditional Types)

5. 可辨识联合(Discriminated Unions)

6. 映射类型(Template Literal Types)

7. 预定义条件类型

应用场景

注意事项

结语

特点 


 

前言: 

"TS" 是 TypeScript 的缩写,TypeScript 是一种由微软开发的开源编程语言。它是 JavaScript 的一个超集,意味着 TypeScript 包含了 JavaScript 的所有特性,并且在此基础上添加了静态类型和其他一些额外的特性。

TypeScript 常用高级类型

TypeScript(TS)是一种强类型超集 JavaScript 语言,它在前端开发中提供了强大的类型检查和类型抽象工具。其中,高级类型是 TypeScript 的一项强大功能,它们可以帮助我们处理复杂的数据结构、函数签名和类型变换。在本文中,我们将深入研究前端开发中的 TypeScript 常用高级类型,包括交叉类型、联合类型、映射类型、条件类型和更多。

基本概念

在探索 TypeScript 的高级类型之前,让我们回顾一下几个基本的类型概念。

  • 基本类型: TypeScript 包括像 numberstringboolean 这样的基本类型,它们表示简单的数据。

  • 对象类型: 可以使用对象字面量、接口、类等定义对象类型。

  • 数组和元组: TypeScript 具有内置的数组类型和元组类型,用于处理集合数据。

  • 函数类型: TypeScript 支持函数类型,包括参数类型和返回值类型。

高级类型

1. 交叉类型(Intersection Types)

交叉类型用于将多个类型合并为一个类型。它通过 & 运算符实现,将多个类型的属性和方法合并在一个新类型中。

type User = { name: string; age: number };
type Admin = { role: string; isAdmin: true };type SuperUser = User & Admin;
// SuperUser 类型包含了 User 和 Admin 类型的属性
2. 联合类型(Union Types)

联合类型用于表示一个值可以属于多个类型之一。它通过 | 运算符实现。

type Result = number | string;
// Result 变量可以存储数字或字符串
3. 映射类型(Mapped Types)

映射类型允许您通过旧类型的属性来创建新类型。它通常与泛型一起使用,可以用于批量更改或添加属性。

type Options = {readonly id: number;title?: string;
};type MutableOptions = {-readonly [P in keyof Options]: Options[P];
};
// MutableOptions 移除了 id 属性的只读修饰符,但保留了其他属性
4. 条件类型(Conditional Types)

条件类型是 TypeScript 中的高级类型,它允许根据条件选择不同的类型。它常用于泛型和复杂类型逻辑。

type IsString<T> = T extends string ? true : false;
type A = IsString<string>; // true
type B = IsString<number>; // false
5. 可辨识联合(Discriminated Unions)

可辨识联合是一种用于处理不同类型的数据的高级模式。它通过一个共同的字段来标识不同的类型。

interface Circle {kind: "circle";radius: number;
}interface Square {kind: "square";sideLength: number;
}type Shape = Circle | Square;function getArea(shape: Shape) {if (shape.kind === "circle") {return Math.PI * shape.radius ** 2;} else {return shape.sideLength ** 2;}
}
6. 映射类型(Template Literal Types)

Template Literal Types 是 TypeScript 4.1 引入的,它们允许你将字符串字面量类型与模板字符串相结合,以生成新的字符串类型。

type Greeting = "Hello, " | "Hi, ";
type Name = "Alice" | "Bob";type Welcome = `${Greeting}${Name}`;
// Welcome 类型是 "Hello, Alice" | "Hello, Bob" | "Hi, Alice" | "Hi, Bob"
7. 预定义条件类型

TypeScript 4.1 引入了一些预定义的条件类型,如 ExtractExclude 和 ReturnType,它们可以用于提取类型信息、排除不需要的类型或获取函数的返回类型。

type T = Extract<"a" | "b" | "c", "a" | "c">; // "a" | "c"
type U = Exclude<"a" | "b" | "c", "a" | "c">; // "b"
type F = ReturnType<() => string>; // string

应用场景

高级类型在前端开发中有许多应用场景,包括:

  • 复杂数据处理: 交叉类型和联合类型可用于处理复杂的数据结构,如 API 响应和组合数据。

  • 类型安全的状态管理: 可辨识联合可用于构建类型安全的状态管理,如 Redux 中的动作。

  • 动态组件: 映射类型和条件类型可用于构建动态组件或高阶组件。

  • 字符串操作: Template Literal Types 可用于字符串操作,如国际化和路由生成。

  • 预定义条件类型: 预定义条件类型使代码更加可读和类型安全。

注意事项

高级类型是强大的工具,但在使用它们时需要小心谨慎。过度复杂的类型可能会导致难以理解和维护的代码。在项目中选择适当的类型抽象和高级类型取决于您的需求和团队的约定。

结语

TypeScript 的高级类型是前端开发中的强大工具,可以帮助我们处理复杂的数据结构、构建类型安全的应用程序和提高代码的可维护性。通过深入研究交叉类型、联合类型、映射类型、条件类型等,您可以更好地应用它们在实际项目中。希望这篇文章有助于您深入了解 TypeScript 的高级

特点 

TypeScript 主要的特点包括:

  1. 静态类型:TypeScript 引入了静态类型系统,允许开发者在编写代码时定义变量、函数参数和返回值的类型。这有助于在编译时发现潜在的类型错误,提高了代码的健壮性和可维护性。

  2. 类型推断:TypeScript 能够根据赋值操作的值推断出变量的类型,这使得在声明变量时不必显式指定类型,从而简化了代码。

  3. 增强的工具支持:TypeScript 提供了更好的编辑器支持和工具集成。许多流行的编辑器(如 VS Code、Sublime Text 等)都支持 TypeScript,能够提供代码补全、错误检查、重构等功能。

  4. ECMAScript 标准支持:TypeScript 严格遵循 ECMAScript 标准,支持最新的 JavaScript 特性和语法,开发者可以在 TypeScript 中使用 ECMAScript 6、7、8 等版本的语法。

  5. 面向对象编程的支持:TypeScript 支持面向对象编程的特性,包括类、接口、模块等,使得代码结构更加清晰和易于组织。

  6. 编译时类型检查:TypeScript 在编译阶段进行类型检查,能够发现潜在的类型错误,减少在运行时出现的错误。

总的来说,TypeScript 是 JavaScript 的一个超集,通过引入静态类型和其他特性,提供了更好的代码可维护性、可读性和可靠性,适合大型项目或团队合作开发。

 

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

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

相关文章

GGML 或GGUF的14种不同量化模式说明

查看 TheBloke/Llama-2–13B-chat-GGML 存储库中的文件&#xff0c;我们可以看到 14 种不同的 GGML 模型&#xff0c;对应于不同类型的量化。它们遵循特定的命名约定&#xff1a;“q” 用于存储权重的位数&#xff08;精度&#xff09; 特定变体。以下是所有可能的量化方法及其…

Pytorch-Transformer轴承故障一维信号分类(三)

目录 前言 1 数据集制作与加载 1.1 导入数据 第一步&#xff0c;导入十分类数据 第二步&#xff0c;读取MAT文件驱动端数据 第三步&#xff0c;制作数据集 第四步&#xff0c;制作训练集和标签 1.2 数据加载&#xff0c;训练数据、测试数据分组&#xff0c;数据分batch…

据房间Id是否存在,判断当前房间是否到期且实时更改颜色

重点代码展示&#xff1a; <template><el-col style"width: 100%;height: 100%;"><el-col :span"20"><el-card class"room_info"><avue-data-icons :option"option"></avue-data-icons></el-…

RT-DETR算法优化改进:轻量化自研设计双卷积重新设计backbone和neck,完成涨点且计算量和参数量显著下降

💡💡💡本文自研创新改进:双卷积由组卷积和异构卷积组成,执行 33 和 11 卷积运算代替其他卷积核仅执行 11 卷积,YOLOv8 Conv,从而轻量化RT-DETR,性能如下表,GFLOPs 8.1降低至7.6,参数量6.3MB降低至5.8MB RT-DETR魔术师专栏介绍: https://blog.csdn.net/m0_637742…

ubuntu-c++-可执行模块-动态链接库-链接库搜索-基础知识

文章目录 1.动态链接库简介2.动态库搜索路径3.运行时链接及搜索顺序4.查看可运行模块的链接库5.总结 1.动态链接库简介 动态库又叫动态链接库&#xff0c;是程序运行的时候加载的库&#xff0c;当动态链接库正确安装后&#xff0c;所有的程序都可以使用动态库来运行程序。动态…

Android帝国之日志系统--logd、logcat

本文概要 这是Android系统进程系列的第四篇文章&#xff0c;本文以自述的方式来介绍logd进程&#xff0c;通过本文您将了解到logd进程存在的意义&#xff0c;以及日志系统的实现原理。&#xff08;文中的代码是基于android13&#xff09; Android系统进程系列的前三篇文章如下…

C#基础与进阶扩展合集-基础篇(持续更新)

目录 本文分两篇&#xff0c;进阶篇点击&#xff1a;C#基础与进阶扩展合集-进阶篇 一、基础入门 Ⅰ 关键字 Ⅱ 特性 Ⅲ 常见异常 Ⅳ 基础扩展 1、哈希表 2、扩展方法 3、自定义集合与索引器 4、迭代器与分部类 5、yield return 6、注册表 7、不安全代码 8、方法…

MATLAB中cell函数的用法

cell用法 在MATLAB中&#xff0c;cell 是一种特殊的数据类型&#xff0c;用于存储不同大小和类型的数据。cell 数组是一种容器&#xff0c;每个元素可以包含任意类型的数据&#xff0c;包括数值、字符串、矩阵、甚至其他的 cell 数组。 以下是 cell 数组的基本语法和示例&…

gitblit自建git仓库

安装 java sudo apt-get update sudo apt-get install openjdk-8-jdk # 或者其它你喜欢的版本 验证&#xff1a; java -version 下载 gitblit https://github.com/gitblit-org/gitblit/releases 解压/usr/local tar -zxvf gitblit-1.9.3.tar.gz 修改配置文件 nano /usr/local/…

【React】useCallback 使用的说明

文章目录 useCallback的优缺点优点缺点JavaScript 的内联优化 使用场景 用了两年多的react&#xff0c;今天抽空写点小内容 useCallback的优缺点 缓存了每次渲染时候 inline callback的实例 优点 关键点&#xff1a;利用memoize减少无效的re-render&#xff0c;通常配合shouldC…

ElasticSearch之cat trained model API

命令样例如下&#xff1a; curl -X GET "https://localhost:9200/_cat/ml/trained_models?vtrue&pretty" --cacert $ES_HOME/config/certs/http_ca.crt -u "elastic:ohCxPHQBEs5*lo7F9"执行结果输出如下&#xff1a; id heap_size …

如何在OpenWRT软路由系统部署uhttpd搭建web服务器实现远程访问——“cpolar内网穿透”

文章目录 前言1. 检查uhttpd安装2. 部署web站点3. 安装cpolar内网穿透4. 配置远程访问地址5. 配置固定远程地址 前言 uhttpd 是 OpenWrt/LuCI 开发者从零开始编写的 Web 服务器&#xff0c;目的是成为优秀稳定的、适合嵌入式设备的轻量级任务的 HTTP 服务器&#xff0c;并且和…

docker-compose的介绍与使用

一、docker-compose 常用命令和指令 1. 概要 默认的模板文件是 docker-compose.yml&#xff0c;其中定义的每个服务可以通过 image 指令指定镜像或 build 指令&#xff08;需要 Dockerfile&#xff09;来自动构建。 注意如果使用 build 指令&#xff0c;在 Dockerfile 中设置…

RHEL网络服务器

目录 1.时间同步的重要性 2.配置时间服务器 &#xff08;1&#xff09;指定所使用的上层时间服务器。 (2&#xff09;指定允许访问的客户端 (3&#xff09;把local stratum 前的注释符#去掉。 3.配置chrony客户端 &#xff08;1&#xff09;修改pool那行,指定要从哪台时间…

Python常见面试知识总结(一):迭代器、拷贝、线程及底层结构

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天来总结一下Python和C语言中常见的面试知识&#xff0c;欢迎大家一起前来探讨学习~ 【一】Python中迭代器的概念&#xff1f; 可迭代对象是迭代器、生成器和装饰器的基础。简单来说&#xff0c;可以使用for来循环遍历…

[古剑山2023] pwn

最近这个打stdout的题真多。这个比赛没打。拿到附件作了一天。 choice 32位&#xff0c;libc-2.23-i386&#xff0c;nbytes初始值为0x14,读入0x804A04C 0x14字节后会覆盖到nbytes 1个字节。当再次向v1读入nbytes字节时会造成溢出。 先写0x14p8(0xff)覆盖到nbytes然后溢出写传…

初次参加软考就想报高级,哪个相对容易考?

如果你想第一次参加软考时就报考高级科目&#xff0c;但是却不知道该报考高级中的哪个科目好、 ​ ​那么今天的这篇文章你一定不要错过&#xff01;首先&#xff0c;我们一起来了解一下&#xff0c;软考高级中的5个科目。 ​ ​软考高级科目 ​ 信息系统项目管理师 ​ …

记录一次postgresql临时表丢失问题

项目相关技术栈 springboot hikari连接池pgbouncerpostgresql数据库 背景 为了优化一个任务执行的速度&#xff0c;我将任务的sql中部分语句抽出生成临时表&#xff08;create temp table tempqw as xxxxxxxxx&#xff09;&#xff0c;再和其他表关联&#xff0c;提高查询速…

三翼鸟2023辉煌收官, 定盘2024高质量棋局

最近在不同平台上接连看到这样的热搜话题&#xff1a;用时间胶囊记录2023的自己、2023年度问答、2023十大网络流行语公布… 显然&#xff0c; 2023年进入最后一个月&#xff0c;时间匆匆&#xff0c;这也意味着又到了总结过去和规划未来的时候。拿到结果、取得成绩当然是对202…

算法通关村第十五关 | 白银 | 海量数据场景下的热门算法题

1.从 40 个亿中产生一个不存在的整数 可以采用位图存储数据&#xff0c;申请一个 bit 类型的数组 bitArr &#xff0c;每个位置只表示 0 或者 1 状态&#xff0c;可以将占用内存缩小为使用哈希表的 1/32 。 遍历给定的 40 亿个数&#xff0c;遇到数时就将 bitArr 相应位置设置…