写点什么

从 0 开始的 TypeScriptの十四:内置工具类型

作者:空城机
  • 2022 年 7 月 15 日
  • 本文字数:1034 字

    阅读完需:约 3 分钟

从0开始的 TypeScriptの十四:内置工具类型

在之前的《从0开始的TypeScriptの十三》中,已经对typescript的工具类型中的关键字inferextendskeyoftypeofin这些有所了解了,那么接下来为了使用更加方便,可以对typescript中内置的工具类型进行一些学习。



正文


上面这些内置的工具类型能够很大程度上简化代码。

比如说给定一个interface接口,需要将内部所有属性都变成可选类型


虽然我们自己也可以写,但是如果直接使用现有的内置工具类型Partial不是更好么

interface A {    name: string,    age: number,    action: ()=>void}type PartialFun<T> = {    [K in keyof T] ? : T[K]}type _A = PartialFun<A>
复制代码


或者说我在网上看到的一道转换题目:


  • 如何定义一个SetOptional工具类型,支持把给定的keys对应的属性变成可选的?

type Foo = {  a: number;  b?: string;  c: boolean;}
// 测试用例type SomeOptional = SetOptional<Foo, 'a' | 'b'>;
复制代码


这样在修改时思考方式,需要对Fooa | b匹配的属性拆除来变成可选,然后不匹配的属性维持不变,最后将可选和不可选通过& 进行联合

// 对应的属性变成可选type CommonFun<T, K> = {    [ t in keyof T as t extends K ? t: never] ?: T[t]}// 不对应的属性type Unequal<T, K> = {    [ t in keyof T as t extends K ? never: t] : T[t]}type SetOptional<T, K> = CommonFun<T, K> & Unequal<T, K> 
复制代码


不过这样虽然思路很清晰,但是看起来写了好多。事实上,可以使用PartialPick来代替CommonFun, 然后用Omit代替Unequal


只需要像下面的一句就可以解决,是不是缩减了很多代码

type SetOptional<T, K extends keyof T> = Partial<Pick<T, K>> & Omit<T, K> 
复制代码




当然这些都是要基于对typescript内置类型比较熟悉的情况下,最好的方式就是多多去使用。就像当初最开始学习javascript时,对于Math.floorsplice这些方法也是多使用才能够熟悉起来。


当然上面的这些例子可能会觉得实用性不大,那么将数组类型扁平化总应该算有点实用性吧


[ number, [string], [ boolean, [ void, string ] ] ] 转换成 number | string | boolean | void 扁平化联合


这种例子很容易就会想到递归函数


解决方案:首先使用infer X[]将当前数组中的元素进行判断,如果不是数组则直接返回,否则元素重新进入SetOptional判断循环。

type ArrType = [ number, [string], [ boolean, [ void, string ] ] ]
type SetOptional<T> = T extends (infer X)[] ? SetOptional<X> : T// string | number | boolean | voidtype Res = SetOptional<ArrType>
复制代码


发布于: 刚刚阅读数: 3
用户头像

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者,在线水文 主要干前端的活,业余会学学python 欢迎各位关注,互相学习,互相进步

评论

发布
暂无评论
从0开始的 TypeScriptの十四:内置工具类型_typescript_空城机_InfoQ写作社区