TypeScript之高级类型

news/2024/12/23 4:54:41/

一、是什么

除了stringnumberboolean 这种基础类型外,在 typescript 类型声明中还存在一些高级的类型应用

这些高级类型,是typescript为了保证语言的灵活性,所使用的一些语言特性。这些特性有助于我们应对复杂多变的开发场景

二、有哪些

常见的高级类型有如下:

  • 交叉类型
  • 联合类型
  • 类型别名
  • 类型索引
  • 类型约束
  • 映射类型
  • 条件类型

交叉类型

通过 & 将多个类型合并为一个类型,包含了所需的所有类型的特性,本质上是一种并的操作

语法如下:

T & U

适用于对象合并场景,如下将声明一个函数,将两个对象合并成一个对象并返回:

function extend<T , U>(first: T, second: U) : T & U {let result: <T & U> = {}for (let key in first) {result[key] = first[key]}for (let key in second) {if(!result.hasOwnProperty(key)) {result[key] = second[key]}}return result
}

联合类型

联合类型的语法规则和逻辑 “或” 的符号一致,表示其类型为连接的多个类型中的任意一个,本质上是一个交的关系

语法如下:

T | U

例如 number | string | boolean 的类型只能是这三个的一种,不能共存

如下所示:

function formatCommandline(command: string[] | string) {let line = '';if (typeof command === 'string') {line = command.trim();} else {line = command.join(' ').trim();}
}

类型别名

类型别名会给一个类型起个新名字,类型别名有时和接口很像,但是可以作用于原始值、联合类型、元组以及其它任何你需要手写的类型

可以使用 type SomeName = someValidTypeAnnotation的语法来创建类型别名:

type some = boolean | stringconst b: some = true // ok
const c: some = 'hello' // ok
const d: some = 123 // 不能将类型“123”分配给类型“some”

此外类型别名可以是泛型:

type Container<T> = { value: T };

也可以使用类型别名来在属性里引用自己:

type Tree<T> = {value: T;left: Tree<T>;right: Tree<T>;
}

可以看到,类型别名和接口使用十分相似,都可以描述一个对象或者函数

两者最大的区别在于,interface只能用于定义对象类型,而 type 的声明方式除了对象之外还可以定义交叉、联合、原始类型等,类型声明的方式适用范围显然更加广泛

类型索引

keyof 类似于 Object.keys ,用于获取一个接口中 Key 的联合类型。

interface Button {type: stringtext: string
}type ButtonKeys = keyof Button
// 等效于
type ButtonKeys = "type" | "text"

类型约束

通过关键字 extend 进行约束,不同于在 class 后使用 extends 的继承作用,泛型内使用的主要作用是对泛型加以约束

type BaseType = string | number | boolean// 这里表示 copy 的参数
// 只能是字符串、数字、布尔这几种基础类型
function copy<T extends BaseType>(arg: T): T {return arg
}

类型约束通常和类型索引一起使用,例如我们有一个方法专门用来获取对象的值,但是这个对象并不确定,我们就可以使用 extends 和 keyof 进行约束。

function getValue<T, K extends keyof T>(obj: T, key: K) {return obj[key]
}const obj = { a: 1 }
const a = getValue(obj, 'a')

映射类型

通过 in 关键字做类型的映射,遍历已有接口的 key 或者是遍历联合类型,如下例子:

type Readonly<T> = {readonly [P in keyof T]: T[P];
};interface Obj {a: stringb: string
}type ReadOnlyObj = Readonly<Obj>

上述的结构,可以分成这些步骤:

  • keyof T:通过类型索引 keyof 的得到联合类型 'a' | 'b'
  • P in keyof T 等同于 p in 'a' | 'b',相当于执行了一次 forEach 的逻辑,遍历 'a' | 'b'

所以最终ReadOnlyObj的接口为下述:

interface ReadOnlyObj {readonly a: string;readonly b: string;
}

条件类型

条件类型的语法规则和三元表达式一致,经常用于一些类型不确定的情况。

T extends U ? X : Y

上面的意思就是,如果 T 是 U 的子集,就是类型 X,否则为类型 Y

三、总结

可以看到,如果只是掌握了 typeScript 的一些基础类型,可能很难游刃有余的去使用 typeScript,需要了解一些typescript的高阶用法

并且typescript在版本的迭代中新增了很多功能,需要不断学习与掌握


http://www.ppmy.cn/news/1190737.html

相关文章

Python的web自动化学习(三)Selenium的显性、隐形等待

引言&#xff1a; WebDriver的显性等待和隐形等待是用于在测试过程中等待元素加载或操作完成的两种等待方式。了解此两种方式是为后面自动化找到适合的方法去运用 显性等待&#xff08;Explicit Wait&#xff09; 显性等待是通过使用WebDriverWait类和ExpectedConditions类来…

JavaEE就业课 V12.5 完整版

简介 众所周知&#xff0c;在IT互联网领域是靠技术吃饭的&#xff0c;更符合企业需求的先进技术才是硬通货。黑马Java学科一直在行动&#xff0c;一直走在行业最前沿! 四项目制用四个不同类型、不同开发深度的项目&#xff0c;去解决企业用人需求与学员具备相应开发能力匹配的…

Android NDK开发详解之调试和性能分析的系统跟踪概览

Android NDK开发详解之调试和性能分析的系统跟踪概览 系统跟踪指南 “系统跟踪”就是记录短时间内的设备活动。系统跟踪会生成跟踪文件&#xff0c;该文件可用于生成系统报告。此报告有助于您了解如何最有效地提升应用或游戏的性能。 有关进行跟踪和性能分析的全面介绍&#x…

【数据结构】树形结构所有路径复原为链表

目录 1. 树形结构可视化 2. 树形结构转为链表 此目标是要还原树形结构的所有路径。树形结构是一种常见的数据结构&#xff0c;它表示元素之间层次关系。在树形结构中&#xff0c;每个节点可能拥有一个或多个子节点&#xff0c;形成了一个分层的结构。为了还原树形结构的路径&…

Ubuntu定时执行任务

cron一个Linux定时执行工具&#xff0c;可以定时执行一些任务。 crontab -l 如果显示“no crontab for xxx” 说明没有启动cron。 service cron start 这样就启动cron了。 服务相关命令&#xff1a; service cron stop service cron restart service cron reload 查看当…

pandora的使用

在服务器上搭建Poandra-GPT一般用的centos系统&#xff0c;windows虽然也行… 用Centos的话可能涉及python的环境问题&#xff0c;pandora需要3.7以上 的python版本&#xff0c;如果在服务器肉身上做实验&#xff0c;对于新手可能很容易出问题&#xff0c;详细教程参考为之前写…

11月1日星期三今日早报简报微语报早读

11月1日星期三&#xff0c;农历九月十八&#xff0c;早报微语早读分享。 1、神舟十六号航天员乘组平安抵京&#xff1b; 2、微信/抖音/B站等平台&#xff1a;将推动50万粉以上“自媒体”账号实名信息展示&#xff1b; 3、第三批鼓励仿制药品建议目录公示&#xff0c;包括抗癌…

Python测试之Pytest详解

概要 当涉及到python的测试框架时&#xff0c;pytest是一个功能强大且广泛应用的第三方库。它提供简洁而灵活的方式来编写和执行测试用例&#xff0c;并具有广泛的应用场景。下面是pytest的介绍和详细使用说明&#xff1a; pytest是一个用于python单元测试的框架&#xff0c;它…