TypeScript类型体操--TupleToUnion、UnionToObject

Sir_苏
103 阅读2分钟

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在

github与好文

前言

前边七篇文章我们一共实现了31个工具类型，按照本专栏的规划，还差68个...

本节我们继续学习两个新的工具类型

image.png

提示

对于语法层面的知识点本系列（类型体操开头的标题）不会展开说明哈，可以自行搜索学习其他大佬的优质文章或者等我后续更新补充

TupleToUnion

  • 功能

将元组类型转换为联合类型

  • 实现

首先，它接收一个泛型参数

type TupleToUnion<T>

由于元组是数组类型的一种，故，我们的约束条件为数组类型即可

type TupleToUnion<T extends any[]>

最后去取它的成员，在TypeScript中数组成员使用[number]即可获取到

T[number]
  • 使用示例

image.png

UnionToObject

  • 功能

将联合类型转为对象类型

  • 实现

首先，它接收一个泛型参数

type UnionToObject<T>

由于对象的key的特定要求，故它的约束如下

T extends string|number|symbol

如果想要严谨点，最好是再写一个IsUnion的辅助类型来构建条件表达式，不过目前我们还没有实现该类型工具，故，咱们在此依靠用户自觉性😁

那么就只需要对其进行遍历生成对象即可

{
    [k in T]:any
}
  • 使用示例

image.png

下期预告

StartsWith

  • 功能

JavaScript中字符串的startsWith的TypeScript版

  • 使用示例
type a = StartsWith<'abc', 'ac'> // false
type b = StartsWith<'abc', 'ab'> // true
type c = StartsWith<'abc', 'abcd'> // false

如果本文对您有用，希望能得到您的点赞和收藏

订阅专栏，每周更新1-2篇类型体操，每月1-3篇vue3源码解析，等你哟😎

avatar
文章
阅读
粉丝