type-challenge刷题(easy部分)示例详解

 更新时间:2023年08月18日 11:10:48   作者:goblin_pitcher  
这篇文章主要为大家介绍了type-challenge刷题(easy部分)示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

type-challenge刷题

内容接前文深入学习typescript type类型

type-challenge挑战地址

easy

type MyPick<T, K extends keyof T> = {[k in K]: T[k]};
type MyReadonly<T> = {readonly [k in keyof T]: T[k]};
type TupleToObject<T extends readonly (string|number|symbol)[]> = {[k in T[number]]: k};
type First<T extends any[]> = T extends [infer Head, ...unknown[]] ? Head : never;
type Length<T extends readonly unknown[]> = T["length"]; // 题目要求readonly数组
type If<C extends boolean, T, F> = C extends true ? T : F;
type Concat<T extends unknown[], U extends unknown[]> = [...T, ...U];
type Push<T extends unknown[], U> = [...T, U];
type Unshift<T extends unknown[], U> = [U, ...T];
type MyParameters<T extends (...args: any[]) => any> = T extends (...args: infer U) => any ? U : never;

Exclude

原题地址

type MyExclude<T, U> = T extends U ? never : T;

这里有个遗漏的知识点...分配条件类型

type参数联合类型时,内部其实是作循环处理的。以Exclude为例,分配条件类型的实际处理如下

MyExclude<'a'|'b'|'c', 'a'|'b'> = 
  ('a' extends 'a'|'b' ? never : 'a') |
  ('b' extends 'a'|'b' ? never : 'b') |
  ('c' extends 'a'|'b' ? never : 'c')

Await

原题地址

type PromiseLike<T = unknown> = {then: (cb: (arg: T)=>unknown) => unknown};
type MyAwaited<T extends PromiseLike> = T extends PromiseLike<infer U> ? (U extends PromiseLike ? MyAwaited<U> : U) : never;

需要实现await,即const result = await PromiseValawait

此处实现方式类似Promise A+协议中的resolvePromise部分,之所以以自定义的PromiseLike作为Promise的判断条件,是因为在resolvePromise中,判断一个对象是否是Promise,是以typeof promise.then === "function"作为判断条件,这保证了不同pollyfill实现的Promise函数之间可以相互进行链式调用,且满足PromiseLike的对象都能用async...await语法。

Include

原题地址

type Eq<X, Y> =
  (<T>() => T extends X ? 1 : 2) extends
  (<T>() => T extends Y ? 1 : 2) ? true : false
type Includes<T extends readonly any[], U> =
  T extends [infer H, ...infer Rest]
  ? (Eq<H, U> extends false ? Includes<Rest, U>: true)
  : false;

Include主体部分还好,最麻烦的是Equal部分,一开始写的Equal如下

type Eq<X, Y> = X extends Y ? (Y extends X ? true : false) : false;
// 这个是错的,测试用例如下
type check = Eq<boolean, true> // boolean

这里忽略了boolean其实是个复合类型,根据前面分配条件类型提到的,作为参数传递时会进行遍历

type check = Eq<boolean, true> // boolean
// ⬇️
// boolean -> true|false
// ====> Eq<true, true>|Eq<false, true> -> true|false -> boolean

直接翻看了'@type-challenges/utils'的库,发现它是利用function的定义绕过对象的extends判断。。这一点比较具有启发性

type Eq<X, Y> =
    // 这里没有直接进行X和Y的比较,那样会触发分配条件类型
    // 因此借助范型的变量T作为桥梁进行比较
  (<T>() => T extends X ? 1 : 2) extends
  (<T>() => T extends Y ? 1 : 2) ? true : false

习惯了常规编程语言的语法后,很容易忽略【分配条件类型】这条规则,可以借用中间变量的思想,间接绕过直接的extends判定

以上就是type-challenge刷题(easy部分)示例详解的详细内容,更多关于type-challenge刷题的资料请关注脚本之家其它相关文章!

相关文章

  • js 获取今天以及过去日期

    js 获取今天以及过去日期

    这篇文章主要介绍了js获得当前系统日期时间以及过去系统日期时间的方法,涉及javascript操作日期时间的相关技巧,示例代码如下,需要的朋友可以参考下
    2017-04-04
  • TypeScript使用noImplicitAny实战解析

    TypeScript使用noImplicitAny实战解析

    这篇文章主要为大家介绍了TypeScript使用noImplicitAny实战解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Spartacus中navigation item reducer实现解析

    Spartacus中navigation item reducer实现解析

    这篇文章主要为大家介绍了Spartacus中navigation item reducer实现解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • postman数据加解密实现APP登入接口模拟请求

    postman数据加解密实现APP登入接口模拟请求

    对于Postman的使用,一般情况下只要发发确定的请求与参数就可以的了,然而,在使用的时候,尤其是接口测试时,请求接口的设计里面都有数据加密,参数验签,返回数据也有进行加密的,这个时候就需要使用一些脚本做处理,模拟app登入请求的操作
    2021-08-08
  • layui.layer弹出层(子页面)改变父页面内容(访问元素和函数)

    layui.layer弹出层(子页面)改变父页面内容(访问元素和函数)

    当前页面(父框架或父页面)使用layer以iframe层的方式弹出新的窗口(子框架或子页面)时,如何在子页面中访问父页面的元素和函数,从而改变父元素的页面显示,给用户合理舒适的体验。
    2023-02-02
  • Typescript extends 关键字继承类型约束及条件类型判断实现示例解析

    Typescript extends 关键字继承类型约束及条件类型判断实现示例解析

    这篇文章主要介绍了Typescript extends 关键字继承类型约束及条件类型判断实现示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Typescript 转换类型操作索引映射类型IIMT模式学习

    Typescript 转换类型操作索引映射类型IIMT模式学习

    这篇文章主要为大家介绍了Typescript 转换类型操作之索引映射类型IIMT模式学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • TypeScript之Generics泛型类型学习

    TypeScript之Generics泛型类型学习

    这篇文章主要为大家介绍了TypeScript之Generics泛型类型学习,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • Three.js引入Cannon.js及使用示例详解

    Three.js引入Cannon.js及使用示例详解

    这篇文章主要为大家介绍了Three.js引入Cannon.js及使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • TypeScript Module Resolution解析过程

    TypeScript Module Resolution解析过程

    这篇文章主要为大家介绍了TypeScript Module Resolution解析过程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07

最新评论