TypeScript类型体操5

🕗 发布于 2024-10-13 00:57 typescript javascript

类型编程主要的目的就是对类型做各种转换，如何对类型做修改？
TypeScript 类型系统支持 3 种可以声明任意类型的变量： type、infer、类型参数。

type：类型别名，声明一个变量存储某个类型。type t = Promise<number>
infer：用于提取类型，存到声明的变量里。type GetValueType<P> = P extends Promise<infer Value> ? Value : never;
类型参数：用于接受具体类型。type isTwo<T> = T extends 2 ? true: false;

但是上述三种’变量’不是通常我们理解的变量，因为不能被重新赋值。但是做类型编程是为了能够产生各种负责的类型，因此只有通过重新构造来产生新类型。

重新构造

TypeScript 的 type、infer、类型参数声明的变量都不能修改，想对类型做各种变换产生新的类型就需要重新构造。

数组类型重新构造

添加类型

当我们声明了一个元组变量后，需要给这个元组类型添加新类型时：

//在最后添加 push
type tuple = [1,2,3];

type Push<Arr extends unknown[], Ele> = [...Arr, Ele];

type result = Push<[1,2,3],4>//[1,2,3,4]

//在最前面添加 unshift

type Unshift<Arr extends unknown[], Ele> = [Ele, ...Arr];

type result2 = Unshift<[1,2,3],0>

复杂案例
构造要求：
将已有的两个元组类型合并成一个新的元组类型

type tuple1 = [1,2];
type tuple2 = ['hello','world'];

//合并后
type tuple = [[1,'hello'],[2,'world']];

思路：提取元组中的两个元素，构造成新的元组

type Zip<One extends [unknown,unknown], Other extends [unknown,unknown]> = 
    One extends [infer OenFirst, infer OneSecond] 
        ? Other extends [infer OtherFirst, infer OtherSecond]
            ? [[OneFirst, OtherFirst],[OneSecond, OtherSecond]] : []
            : [];

type result = Zip<tuple1,tuple2>；//[[1,'hello'],[2,'world']]

两个类型参数 One、Other 是两个元组，类型是 [unknown, unknown]，代表 2 个任意类型的元素构成的元组
通过 infer 分别提取 One 和 Other 的元素到 infer 声明的局部变量 OneFirst、OneSecond、OtherFirst、OtherSecond 里
用提取的元素构造成新的元组返回

同理，尝试一下合并任意各元素的元组，使用递归的方式：

    type Zip2<One extends unknown[], Other extends unknown[]> = 
        One extends [infer OneFirst, ...infer OneRest]
            ? Other extends [infer OtherFirst, ...infer OtherRest]
                ? [[OneFirst,OtherFirst], ...Zip2<OneRest,OtherRest>] : []
                    : [];

类型参数 One、Other 声明为 unknown[]，也就是元素个数任意，类型任意的数组
每次提取 One 和 Other 的第一个元素 OneFirst、OtherFirst，剩余的放到 OneRest、OtherRest 里
用 OneFirst、OtherFirst 构造成新的元组的一个元素，剩余元素继续递归处理 OneRest、OtherRes

字符串类型的重新构造

思路：从已有字符串类型中提取部分字符串，经过一系列变换，构造成新的字符串类型

CapitalizeStr
将一个字符串字面量类型的’hello’转为首字母大写的’Hello’：

type CapitalizeStr<Str extends string> = Str extends `${infer First}${infer Rest}` ? `${Uppercase<First>}${Rest}` : Str;

type result = CapitalizeStr<'hello'>

声明了类型参数 Str 是要处理的字符串类型，通过 extends 约束为 string
通过 infer 提取出首个字符到局部变量 First，提取后面的字符到局部变量 Rest
使用 TypeScript 提供的内置高级类型 Uppercase 把首字母转为大写，加上 Rest，构造成新的字符串类型返回

CamelCase
将一个how_are_you重新构造为howAreYou：

type CamelCase<Str extends string> = Str extends `${infer Left}_${infer Right}${infer Rest}` ? `${Left}${Uppercase<Right>}${CamelCase<Rest>}` : Str;

类型参数 Str 是待处理的字符串类型，约束为 string
提取 _ 之前和之后的两个字符到 infer 声明的局部变量 Left 和 Right，剩下的字符放到 Rest 里
然后把右边的字符 Right 大写，和 Left 构造成新的字符串，剩余的字符 Rest 要继续递归的处理

DropSubStr
删除字符串中的某个子串：

type DropSubStr<Str extends string, SubStr extends string> = Str extends `${infer Prefix}${SubStr}${infer Suffix}` ? DropSubStr<`${Prefix}${Suffix}`,SubStr> : Str;

type result = DropSubStr<'hello,,,,,',','>//hello

类型参数 Str 是待处理的字符串， SubStr 是要删除的字符串，都通过 extends 约束为 string 类型
通过模式匹配提取 SubStr 之前和之后的字符串到 infer 声明的局部变量 Prefix、Suffix 中
如果匹配，那就用 Prefix、Suffix 构造成新的字符串，然后继续递归删除 SubStr。直到不再匹配，也就是没有 SubStr 了

函数类型的重新构造

我们可以提取函数的参数类型和返回值类型，当然可以将提取出的类型做修改后再构造出一个新的函数类型。

AppendArgument
在已有的函数类型上添加一个参数：

type AppendArgument<Func extends Function, Arg> = Func extends (...args: infer Args) => infer ReturnType ? (...args:[...Args,Arg]) => ReturnType : never;

type result = AppendArgument<(name: string) => boolean,number>//(args_0:string, args_1:number) => boolean;

类型参数 Func 是待处理的函数类型，通过 extends 约束为 Function，Arg 是要添加的参数类型
通过模式匹配提取参数到 infer 声明的局部变量 Args 中，提取返回值到局部变量 ReturnType 中
用 Args 数组添加 Arg 构造成新的参数类型，结合 ReturnType 构造成新的函数类型返回

索引类型的重新构造

索引类型是聚合多个元素的类型，类似于class,对象等都是索引类型，对它的修改和构造新类型涉及到了映射类型的语法：

type obj = {
  name: string;
  age: number;
  gender: boolean;
}

type Mapping<Obj extends object> = { 
    [Key in keyof Obj]: Obj[Key]
}

Mapping
映射过程中对value做修改：

type Mapping<Obj extends object> = {
    [Key in keyof Obj]: [Obj[key],Obj[key],Obj[key]]
}

type result = Mapping<{a:1,b:2}>;//{a:[1,1,1],b:[2,2,2]}

UppercaseKey
对Key做修改，使用as：

type UppercaseKey<Obj extends object> = {
    [Key in keyof Obj as Uppercase<Key & string>] : Obj[Key]
}

type result = UppercaseKey<{a:1,b:2}>//{A:1,B:2}

Record
TypeScript 提供了内置的高级类型 Record 来创建索引类型

type Record<K extends string | number | symbol, T> = {[P in K]:T}

指定索引和值的类型分别为 K 和 T，就可以创建一个对应的索引类型

将上面的类型约束修改一下，约束类型参数 Obj 为 key 为 string，值为任意类型的索引类型：

type UppercaseKey<Obj extends Record<string, any>> = {
    [Key in keyof Obj as Uppercase<Key & string>] : Obj[Key]
}

type result = UppercaseKey<{a:1,b:2}>//{A:1,B:2}

ToReadonly
索引类型的索引可以添加 readonly 的修饰符，代表只读，实现给索引类型添加readonly修饰符：

type ToReadonly<T> = {
    readonly [Key in keyof T]: T[Key];
}

通过映射类型构造了新的索引类型，给索引加上了 readonly 的修饰，其余的保持不变

同理，也可以用相同的方式给索引类型加可选修饰符：

type ToPartial<T> = {
    [Key in keyof T]?: T[Key]
}

ToMutable
给索引类型去掉只读修饰符：

type ToMutable<T> = {
    -readonly [Key in keyof T]: T[Key]
}

同理，去掉可选修饰符：

type ToRequired<T> = {
    [Key in keyof T]-?: T[Key]
}

FilterByValueType
在构造新索引类型的时候根据值的类型做过滤：

type FilterByValueType<Obj extends Record<string,any>, ValueType> = {
    [Key in keyof Obj as Obj[Key] extends ValueType ? Key : never] : Obj[Key];
}

interface Person{
    name: string;
    age: number;
    hobby: string[];
}

type result = FilterByValueType<Person, string | number> // {name:string; age: number;}

类型参数 Obj 为要处理的索引类型，通过 extends 约束为索引为 string，值为任意类型的索引类型 Record<string, any>
类型参数 ValueType 为要过滤出的值的类型
构造新的索引类型，索引为 Obj 的索引，也就是 Key in keyof Obj，但要做一些变换，也就是 as 之后的部分
如果原来索引的值 Obj[Key] 是 ValueType 类型，索引依然为之前的索引 Key，否则索引设置为 never，never 的索引会在生成新的索引类型时被去掉
值保持不变，依然为原来索引的值，也就是 Obj[Key]

原文地址：https://blog.csdn.net/qq_62401119/article/details/142883622

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：【C++】关联式容器——map和set的使用
下一篇：清除浮动带来的影响

震撼！一句话就让 AI 帮你做 UI 测试，多模态测试智能体 AUITestAgent 横空出世！
美团到店研发平台携手复旦大学周扬帆教授团队，共同开发了智能化终端测试工具AUITestAgent。该工具是第一个能够基于自然语言测试用例，自动化完成终端UI测试驱动、校验全流程的智能化测试工具。仅需输
阅读更多2024-10-13
文件传输遗漏
将faild的全部重传一遍。
阅读更多2024-10-13
AI系列：10分钟在本地启动大模型
随着对AI技术尤其是大语言模型的了解和开源项目的发展，相信很多人已经逐渐熟悉这门技术。如果你也想尝试一下，不妨试试花10分钟时间在本地来运行一个简单的大语言模型。这篇文章主要介绍如何使用Ollama来
阅读更多2024-10-13
Pymysql cur.fetchall() 返回 None
大家在pymysql 的 cur.fetchall() 函数通常用于获取执行 SQL 查询后的所有结果。该函数返回一个包含查询结果的元组列表。如果 cur.fetchall()
阅读更多2024-10-13
MySQL中text类型对查询效率的影响
记录一次MySQL使用text类型导致查询慢的优化过程。
阅读更多2024-10-13
在JavaScript中，改变this指向的call，apply，bind有什么区别，原理分别是什么？
call 和 apply都是立即执行函数，并且它们的区别在于参数的传递方式。bind通过闭包来永久绑定this和参数。
阅读更多2024-10-13
ASPICE、ISO 26262与ISO 21434的共同使命与相似之处
ASPICE、ISO 26262和ISO 21434在汽车行业中各自扮演着不同的角色，但它们在确保汽车软件的质量、安全性和网络安全方面存在相似之处。ASPICE、ISO 26262和ISO 21434
阅读更多2024-10-13
【C++ 真题】B2078 含 k 个 3 的数
输入两个正整数m和k，其中1m≤10151k≤15，判断m是否恰好含有k个3，如果满足条件，则输出YES，否则，输出NO。
阅读更多2024-10-13
【C++】拆分详解 - vector
vector 是一种序列容器，表示可变大小的数组。就像数组一样，它使用连续的存储空间来存储元素，支持高效的下标访问。但是又不像数组，它的大小是可以动态改变的，而且它的大小会被容器自动处理。本质讲，ve
阅读更多2024-10-13
反转链表解题思路
我们从头节点1开始遍历，1的next和pre原来分别是2和NULL(初始值)互换后1的next和pre变成NULL和2，依次这样遍历下去。我们定义三个变量cur，pre和next分别表示当前节点，以及
阅读更多2024-10-13