React 中的 TS 类型过滤原来是这么做的!
开发 前端
今天就来介绍一个在其它开源库中见到的既花里胡哨,又实用的TS类型——TS类型过滤

 相信大家在阅读同事写的代码或者优秀的开源库的代码时,一定见过各种各样的风骚的TS写法,不花点时间下去根本看不懂,换作是我们,可能就直接一个 any 完事了,但是真正当项目体积变大后,你会发现这些 TS骚操作真的很重要,因为它能很好地帮助你做静态类型校验

今天就来介绍一个在其它开源库中见到的既花里胡哨,又实用的TS类型——TS类型过滤

自我介绍

TS类型过滤,英文名(我自己取的)叫 FilterConditionally,这是它完整的样子👇 

  1. type FilterConditionally<Source, Condition> = Pick<  
  2.   Source,   
  3.   {  
  4.     [K in keyof Source]: Source[K] extends Condition ? K : never  
  5.   }[keyof Source]  
  6. >

别看很复杂,其实非常有用,它可以从一个对象类型中过滤出你想要的,比如: 

  1. interface Example {  
  2.     a: string; // ✅   
  3.     b: string; // ✅    
  4.     c: number; // ❌   
  5.     d: boolean; // ❌   
  6.  
  7. type NewType = FilterConditionally<Sample, string>  
  8. /*  
  9.  NewType 最终结果为:  
  10.  {  
  11.   a: string;  
  12.   b: string 
  13.  }  
  14. */ 

相信大家已经这个类型的作用了,并且你们也很想读懂它,没关系,接下来由内而外、一步一步地介绍,一定让你们完全读懂,读不懂评论区来喷我(我说着玩的~)

分步介绍

涉及的知识点比较多,怕有些不熟悉TS的同学懵逼,先来介绍其中几个常见的基础知识点

开胃小菜

不会耽误大家多少时间的,会的小伙伴可以直接调过

keyof

关键词 keyof 的名字叫 索引类型查询操作符,它的作用就像它的字面意思一样直白:xx的key值 

  1. interface Example {  
  2.  a: string;  
  3.   b: string;  
  4.   c: number;  
  5.   d: boolean;  
  6.  
  7. type Keys = keyof Example   // 等价于 type Keys = 'a' | 'b' | 'c' | 'd' 

你可以把 keyof 简单理解为 JavaScript 中的 Object.keys

in

关键词 in 可以遍历枚举类型,比如: 

  1. type Keys = 'a' | 'b' | 'c' | 'd'  
  2. type Obj = {  
  3.   [T in Keys]: string;  // 遍历Keys,把每个key都赋值string类型  
  4.  
  5. /* 等价于   
  6.   type Obj = {  
  7.     a: string;  
  8.     b: string;  
  9.    c: string;  
  10.    d: string;  
  11.   } 
  12.  */ 

你可以把 in 简单理解为 JavaScript 中 for...in 的 in 的作用

Conditional

第二个知识点是条件判断,比如: 

  1. interface A {}  
  2. interface B extends A {}  // B继承于A  
  3. // B是否继承于A?若是,则为number类型;若不是,则为string类型  
  4. type C = B extends A ? number : string  // 等价于 type C = number  
  5. // A是否继承于B?若是,则为number类型;若不是,则为string类型  
  6. type D = A extends B ? number : string  // 等价于 type D = string 

你可以把 A extends B ? number : string 简单理解为 JavaScript 中的三元运算符

泛型

泛型我就不多做介绍了,不太了解的小伙伴可以直接看 TS文档——泛型[1]

正餐开始

刚刚介绍完"开胃小菜",那就趁热打铁看一个简单的类型 

  1. type MarkUnwantedTypesAsNever<Source, Condition> ={  
  2.   [K in keyof Source]: Source[K] extends Condition ? K : never  

一句话介绍这个类型的作用就是:遍历一个对象类型,将不想要的类型标记为 never

举个例子🌰 

  1. interface Example {  
  2.     a: string; // ✅   
  3.     b: string; // ✅    
  4.     c: number; // ❌   
  5.     d: boolean; // ❌   
  6.  
  7. // 我只想要Example类型中的string类型的key,非string的就标记为never  
  8. type MyType = MarkUnwantedTypesAsNever<Example, string>  
  9. /*  
  10.  等价于:  
  11.  type MyType = {  
  12.   a: 'a';  
  13.   b: 'b';  
  14.   c: never;  
  15.   d: never;  
  16.  }  
  17. */ 

稍微讲一下小细节,[K in keyof Example] 遍历了 Example 这个对象类型,然后用条件判断 Example[K] extends string ? K : never 给对应的 key 值赋值,假设遍历第一个key值为 a,那么 Example[K] = Example[a] = string,此时就是 string extends string ? 'a' : never,string 肯定是继承于 string 的,所以才会有这样一个结果

此时大家心头一惊,为什么要把类型搞成这样??我们最后想要的结果不是要拿到一个 { a:string; b:string } 的类型吗?别急,后面还有别的操作

再来看一个索引访问接口属性的小知识点 

  1. type Value = {name: "zero2one"}["name"]  // 等价于 type Value = "zero2one" 

你可以把它简单理解成 JavaScript 中访问对象某个key对应的value

而在TS中还有另一种情况: 

  1. type Value = {  
  2.   name: "zero2one";   
  3.   age: 23  
  4. }["name" | "age"]  
  5. // 等价于 type Value = "zero2one" | 23 

而值为 never 的 key 值是无法被访问到的: 

  1. type Value = {  
  2.   name: "zero2one";   
  3.   age: never  
  4. }["name" | "age"]  
  5. // 等价于 type Value = "zero2one" 

所以接下来可以看更复杂的类型了 

  1. type MarkUnwantedTypesAsNever<Source, Condition> ={  
  2.   [K in keyof Source]: Source[K] extends Condition ? K : never  
  3. }[keyof Source] 

我们巧妙地利用 keyof 关键词去遍历访问所有的接口属性 

  1. // 借用一下刚才例子的结果  
  2. type MyType = {  
  3.    a: 'a';  
  4.   b: 'b';  
  5.   c: never;  
  6.   d: never;  
  7. }['a' | 'b' | 'c' | 'd']  
  8. /*  
  9.  等价于:  
  10.  type MyType = 'a' | 'b'  
  11. */ 

到此为止,我们所做的事情就是:把目标对象类型中想要类型的 key 值筛选了出来

别急别急,离成功就差一步之遥

最后登场的就是 Pick ,这个类型是TS内置的,简单了解一下它的作用 

  1. // Pick类型的实现  
  2. type Pick<T, K extends keyof T> = {  
  3.     [P in K]: T[P];  

你可以不去详细地读懂它的实现,只需要知道 Pick 的作用就是:筛选出类型T 中指定的某些属性

举个简单的例子: 

  1. interface A {  
  2.   a: 1;  
  3.   b: 2;  
  4.   c: 3;  
  5.   d: 4;  
  6.  
  7. type C = Pick<A, 'a' | 'c'>  // 等价于 type C = { a: 1; c: 3 } 

是的,就是这么简单,好了可以来看最终的BOSS了

那么最后再从 Source 中筛选出对应属性即可,回到本文具体的例子当中,图中红框中的值上文已得到为 type MyType = 'a' | 'b',那最后 Pick 一下就好了 

  1. interface Example {  
  2.  a: string;  
  3.   b: string;  
  4.   c: number;  
  5.   d: boolean;  
  6.  
  7. // 上文得到的结果  
  8. type MyType = 'a' | 'b'  
  9. type Result = Pick<Example, MyType>  // 等价于 type Result = { a: string; b: string }  
  10. // ---- 以上等价于 ---- //  
  11. interface Example {  
  12.     a: string; // ✅   
  13.     b: string; // ✅    
  14.     c: number; // ❌   
  15.     d: boolean; // ❌   
  16.  
  17. type NewType = FilterConditionally<Sample, string>  
  18. /*  
  19.  NewType 最终结果为:  
  20.  {  
  21.   a: string;  
  22.   b: string  
  23.  }  
  24. */ 

这就是文章开头的结果获取的全过程

实战应用例子

正如本文标题所说的,TS类型过滤在很多优秀的开源库中是非常常见的,比如我们熟悉的React中就是: 

  1. type ElementType<PP = any> = {  
  2.  [K in keyof JSX.IntrinsicElements]: P extends JSX.IntrinsicElements[K] ? K : never  
  3. }[keyof JSX.IntrinsicElements] | ComponentType<P>

最后

开源库中像TS类型过滤这种场景太多太多了,希望今后大家遇到时能轻松读懂。如果在屏幕前阅读的你是后端,说不定也能在后端的开源框架源码中看到它的身影呢~ 

 

责任编辑:庞桂玉 来源: 前端大全

同话题下的热门内容

YouTube-DL 官网托管平台被三大唱片公司起诉Podman与Docker有什么不同?腾讯研发动画组件,以后动画制作用PAGRedis 使用 List 实现消息队列的利与弊面试突击:为什么HashMap会产生死循环? 2022 Web 前端面试题及答案之JavaScript 篇Three.js 的 3D 粒子动画:群星送福细说Java中的空指针异常

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!Javascript如何监听页面刷新和关闭事件利用Pytorch进行CNN详细剖析面试 | 必须要会的50个React面试题一份全面的React、Angular和Vue.js比较指南
我收藏的内容
点赞
收藏

51CTO技术栈视频号