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,一经查实,立即删除!

相关文章

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系统进程系列的前三篇文章如下…

如何在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然后溢出写传…

记录一次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…

短视频引流获客系统:引领未来营销的新潮流

在这个信息爆炸的时代&#xff0c;短视频已经成为了人们获取信息的主要渠道之一。而随着短视频的火爆&#xff0c;引流获客系统也逐渐成为了营销领域的新宠。本文将详细介绍短视频引流获客系统的开发流程以及涉及到的技术&#xff0c;让我们一起来看看这个引领未来营销的新潮流…

华清远见作业第二十四天

使用消息队列完成两个进程之间相互通信 代码 #include<stdio.h> #include<string.h> #include<stdlib.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include <sys/ipc.h> #include <sys/msg.h> #in…

k8s一键部署uniswap

1、拉取uniswap源码 github地址 2、编写Dockerfile并打镜像 # Set the base image FROM node:18.10.0# WORKDIR /usr/src/app/ WORKDIR /home/gateway# Copy files COPY ./ /home/gateway/# Dockerfile author / maintainer LABEL maintainer"Michael Feng <mikehummi…

Java最全面试题专题---2、Java集合容器(2)

Map接口 说一下 HashMap 的实现原理&#xff1f; HashMap概述&#xff1a; HashMap是基于哈希表的Map接口的非同步实现。此实现提供所有可选的映射操作&#xff0c;并允许使用null值和null键。此类不保证映射的顺序&#xff0c;特别是它不保证该顺序恒久不变。 HashMap的数据…

C语言-枚举

常量符号化 用符号而不是具体的数字来表示程序中的数字 枚举 用枚举而不是定义独立的const int变量 枚举是一种用户定义的数据类型&#xff0c;他用关键词enum以如下语法来声明&#xff1a; enum枚举类型名字{名字0&#xff0c;…&#xff0c;名字n}&#xff1b; 枚举类型名…

外包干了3年,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了差不多3年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能…

6_CSS布局之浮动的应用

day06_CSS布局之浮动的应用 本课目标&#xff08;Objective&#xff09; 理解什么是浮动掌握浮动的三种机制掌握浮动的案例应用 1 CSS 布局的三种机制 CSS 提供了 3 种机制来设置盒子的摆放位置&#xff0c;分别是普通流&#xff08;标准流&#xff09;、浮动和定位。 普通流…

HarmonyOS开发:回调实现网络的拦截

前言 基于http封装的一个网络库&#xff0c;里面有一个知识点&#xff0c;在初始化的时候&#xff0c;可以设置请求头拦截和请求错误后的信息的拦截&#xff0c;具体案例如下&#xff1a; et.getInstance().init({netErrorInterceptor: new MyNetErrorInterceptor(), //设置全…