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.hqwc.cn/news/267251.html

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

相关文章

【51单片机系列】文字取模软件使用

软件链接&#xff1a;https://pan.baidu.com/s/1k-ND9vJReW_KHMWx8uwpcQ?pwdgz8w 提取码&#xff1a;gz8w 双击打开软件&#xff0c;选择【基本操作】->【新建图像】&#xff0c;设置图像的宽度和高度为8。点击确定后将在显示窗口出现一个8x8的白色格子&#xff0c;类似于…

简单的 u-popup 弹出框

uniapp中的popup组件可以用于弹出简单的提示框、操作框、菜单等。它可以通过position属性控制弹出框的位置&#xff0c;不同的position值会使得弹出框呈现不同的弹出形式 目录 一、实现思路 二、实现步骤 ①view部分展示 ②JavaScript 内容 ③css中样式展示 三、效果展示 …

python:五种算法(HHO、WOA、GWO、PSO、GA)求解23个测试函数(python代码)

一、五种算法简介 1、哈里斯鹰优化算法HHO 2、鲸鱼优化算法WOA 3、灰狼优化算法GWO 4、粒子群优化算法PSO 5、遗传算法GA 二、5种算法求解23个函数 &#xff08;1&#xff09;23个函数简介 参考文献&#xff1a; [1] Yao X, Liu Y, Lin G M. Evolutionary programming …

宝塔PostgreSQL设置数据库远程访问

宝塔PostgreSQL设置数据库远程访问 宝塔的PostgreSQL1. 添加数据库2. 打开PostgreSQL设置界面3. 修改配置4. 重载配置/重启数据库 Docker的PostgreSQL1. postgresql.conf2. pg_hba.conf3. 重启数据库 注意其他问题 宝塔PostgreSQL设置数据库远程访问&#xff1f;docker容器Post…

解决夜神模拟器与Android studio自动断开的问题

原因&#xff1a;夜神模拟器的adb版本和Android sdk的adb版本不一致 解决办法&#xff1a; 1.找到android的sdk &#xff08;1&#xff09;File--->Project Structure (2)SDK Location:记下sdk的位置 2.找到sdk中的adb文件 SDK-->platform-tools-->adb.exe 3.复制…

AttributeError: module ‘scrapy‘ has no attribute ‘Filed‘

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

IDEA 2023.3 start failed 启动失败修复

发现是 RestfulToolkit 插件有冲突导致的&#xff0c;删除插件后成功启动 open ~/Library/Application\ Support/JetBrains/IntelliJIdea2023.3/plugins参考&#xff1a;https://youtrack.jetbrains.com/issue/IDEA-340080/Critical-startup-error-after-upgrading-to-Intelli…

产品<Axure的安装以及组件介绍

Axure介绍&#xff1a; Axure是一款用户体验设计工具&#xff0c;可以用于创建交互式原型、线框图和设计文档。它支持快速原型开发、界面设计、信息架构、流程图和注释等功能&#xff0c;可以帮助设计师快速地创建和共享交互式原型&#xff0c;从而更好地与客户和团队协作。 …

FastAPI之表单数据

FastAPI 表单数据处理教程 FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;它用 Python 3.6类型提示的特性旨在方便和快速地设计和构建 APIs&#xff0c;并且减少代码的冗余与错误。下面将介绍如何在 FastAPI 中处理…

紧固件的标准有哪些

紧固件的行业标准 紧固件是一个涉及几乎所有结构、机械和人们日常使用的产品的稳定性、安全性和结构完整性的广泛话题。紧固件作为一种功能强大、高效的机械设备&#xff0c;其功能和特性的规格多种多样&#xff0c;根本无法低估。由于紧固件是工程和机械的支柱&#xff0c;因此…

C语言学习----指针和数组

&#x1f308;这篇blog记录一下指针学习~ 主要是关于指针和数组之间的关系&#xff0c;还有指针的使用等~ &#x1f34e;指针变量是一个变量 其本身也有一个地址 也需要存放&#xff0c;就和int char等类型一样的&#xff0c;也需要有一个地址来存放它 &#x1f34c;而指针变量…

2023-简单点-picamera的bayer数据获取抽丝剥茧

capture函数,设置bayerTrue 啥是mmal.xxxx? 啥是camera_port? 看起来是个设置标志&#xff0c;产生buffer&#xff0c;获取针对对应格式的c数据结构 camera_port与self._camera.outputs有关 啥是mmalcamera 总之&#xff0c;找到Outputs有3个&#xff0c;disable&…