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.mfbz.cn/a/238129.html

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

相关文章

PyQt---基本界面设计【附代码】

Qt是GUI开发中的一个工具&#xff0c;可以根据用户需求进行程序界面的开发。Qt的开发有C版的和python版的&#xff0c;不论你有哪种编程语言的基础都很好上手学习。PyQt5是Qt框架的Python语言实现&#xff0c;也是本文将要介绍的&#xff0c;并将会建立一个PyQt专栏不断更新供大…

解决亚马逊,速卖通,eBay买家账号关联问题,提高下单成功率

做自养号测评、补单首先要解决的就是安全性的问题&#xff0c;如果安全性解决的不了的话&#xff0c;其他的都不要再提了 让我们了解一下市面上的IP及可能遇到的问题。 目前&#xff0c;常见的IP包括luminati、googelfi、922、TM流量卡和Rola&#xff0c;Rrocks专线等。主要问…

在做题中学习(31):电话号码的字母组合(全排列)

17. 电话号码的字母组合 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a;既然要排列组合&#xff0c;就得先根据数字字符取出来 所以先定义一个string类的数组通过下标取到每个数字对应的映射。 string _numsTostr[10]{"","","abc"…

医学多模态模型总结(一)

概念 医学多模态大模型是指利用多种不同的医学数据源和模型&#xff0c;通过深度学习和人工智能技术&#xff0c;构建一个综合性的大型模型&#xff0c;以实现更加准确和全面的医学数据分析和预测。 这种模型可以同时处理多种医学数据类型&#xff0c;如医学图像、病历文本、…

应用在LED灯光控制触摸屏中的触摸芯片

LED灯光控制触摸屏方法&#xff0c;包括&#xff1a;建立触摸屏的触摸轨迹信息与LED灯光驱动程序的映射关系&#xff1b;检测用户施加在触摸屏上的触摸轨迹&#xff0c;生成触摸轨迹信息&#xff1b;根据生成的触摸轨迹信息&#xff0c;调用对应的LED灯光驱动程序&#xff0c;控…

HTML 块级元素与行内元素有哪些以及注意、总结

行内元素和块级元素是HTML中的两种元素类型&#xff0c;它们在页面中的显示方式和行为有所不同。 块级元素&#xff08;Block-level Elements&#xff09;&#xff1a; 常见的块级元素有div、p、h1-h6、ul、ol、li、table、form等。 块级元素会独占一行&#xff0c;即使没有…

web服务器之——搭建两个基于不同端口访问的网站

要求如下&#xff1a; 建立一个使用web服务器默认端口的网站&#xff0c;设置DocumentRoot为/www/port/80&#xff0c;网页内容为&#xff1a;the port is 80。建立一个使用10000端口的网站&#xff0c;设置DocumentRoot为/www/port/10000&#xff0c;网页内容为&#xff1a;t…

太阳能光伏企业网站建设效果如何

光伏行业近些年发展也比较迅速&#xff0c;其服务/产品拓展度较高&#xff0c;对企业来说&#xff0c;合作商较少更需要多地域寻找目标客户及信息承载展示、拓展等&#xff0c;传统线下方式单一且不足&#xff0c;线上成为众商家经营的方向。 1、品牌宣传、信息呈现难 太阳能…

windows 镜像下载地址

HelloWindows.cn - 精校 完整 极致 Windows系统下载仓储站

原来使用代码也可以画时序图,用这个Mermaid就行,真香

本文首发于我的个人掘金博客&#xff0c;看到很多人都比较喜欢这篇文章&#xff0c;分享给大家。 个人博客主页&#xff1a;https://www.aijavapro.cn 个人掘金主页&#xff1a;juejin.cn/user/2359988032644541/posts 个人知识星球: 觉醒的新世界程序员 一、背景 在软件开发和…

数据结构基础介绍

一.起源及重要性 1968 年&#xff0c;美国的高德纳 Donakl E . Kn uth 教授在其所写的《 计算机程序艺术》第一卷《基本算法 》 中&#xff0c;较系统地阐述了数据的逻辑结构和存储结构及其操作&#xff0c; 开创了数据结构的课程体系 &#xff0c;数据结构作为一门独立的…

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

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

php之jwt使用

PHP JWT&#xff08;JSON Web Token&#xff09;是一种用于身份验证和授权的开放标准。JWT是一个包含有关用户或实体身份信息的安全令牌&#xff0c;它由三部分组成&#xff1a;头部&#xff08;Header&#xff09;、载荷&#xff08;Payload&#xff09;和签名&#xff08;Sig…

Linux上进行Nacos安装

Nacos安装指南 仅供参考&#xff0c;若有错误&#xff0c;欢迎批评指正&#xff01; 后期会继续上传docker安装nacos的过程&#xff01; 1.Windows安装 开发阶段采用单机安装即可。 1.1.下载安装包 在Nacos的GitHub页面&#xff0c;提供有下载链接&#xff0c;可以下载编译好…

PyTorch张量:内存布局

你可能对 torch 上的某些函数感到困惑&#xff0c;它们执行相同的操作但名称不同。 例如&#xff1a; reshape()、view()、permute()、transpose() 等。 这些函数的做法真的不同吗&#xff1f; 不&#xff01; 但为了理解它&#xff0c;我们首先需要了解一下张量在 pytorch 中…

Http模块

Http模块 1.创建http服务 //导入http模块 const http require(http)//创建服务对象 const server http.createServer((request,response)>{response.end(Hello HTTP Server) })// 监听端口&#xff0c;启动服务 server.listen(9000,()>{console.log(服务已启动....);…

【Jeecg Boot 3 - 第二天】2.1、nginx 部署 JEECGBOOT VUE3

一、场景 二、实战 ▶ 2.1、打包&#xff08;build 前端&#xff09; &#xff1e; Stage 1&#xff1a;修改配置文件 .env.production&#xff08;作用&#xff1a;指向后端接口地址&#xff09; &#xff1e; Stage 2&#xff1a;点击build&#xff08;作用&#xff1…

智能优化算法应用:基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于蝙蝠算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.蝙蝠算法4.实验参数设定5.算法结果6.参考文献7.MA…

HeartBeat监控Redis状态

目录 一、概述 二、 安装部署 三、配置 四、启动服务 五、查看数据 一、概述 使用heartbeat可以实现在kibana界面对redis服务存活状态进行观察&#xff0c;如有必要&#xff0c;也可在服务宕机后立即向相关人员发送邮件通知 二、 安装部署 参照文章&#xff1a;HeartBeat监…

「差生文具多系列」推荐两个好看的 Redis 客户端

&#x1f4e2; 声明&#xff1a; &#x1f344; 大家好&#xff0c;我是风筝 &#x1f30d; 作者主页&#xff1a;【古时的风筝CSDN主页】。 ⚠️ 本文目的为个人学习记录及知识分享。如果有什么不正确、不严谨的地方请及时指正&#xff0c;不胜感激。 直达博主&#xff1a;「…