React 中的 TS 类型过滤原来是这么做的!

更新日期: 2022-01-13阅读: 855标签: 类型

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

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

自我介绍

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

type FilterConditionally<Source, Condition> = Pick<
  Source, 
  {
    [K in keyof Source]: Source[K] extends Condition ? K : never
  }[keyof Source]
>;

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

interface Example {
    a: string; // √
    b: string; // √ 
    c: number; // × 
    d: boolean; // × 
}
type NewType = FilterConditionally<Sample, string>
/*
 NewType 最终结果为:
 {
  a: string;
  b: string
 }
*/

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

分步介绍

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

开胃小菜

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

keyof

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

interface Example {
 a: string;
  b: string;
  c: number;
  d: boolean;
}

type Keys = keyof Example   // 等价于 type Keys = 'a' | 'b' | 'c' | 'd'

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

in

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

type Keys = 'a' | 'b' | 'c' | 'd'

type Obj = {
  [T in Keys]: string;  // 遍历Keys,把每个key都赋值string类型
}
/* 等价于 
  type Obj = {
    a: string;
    b: string;
   c: string;
   d: string;
  }
*/

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

Conditional

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

interface A {}

interface B extends A {}  // B继承于A

// B是否继承于A?若是,则为number类型;若不是,则为string类型
type C = B extends A ? number : string  // 等价于 type C = number

// A是否继承于B?若是,则为number类型;若不是,则为string类型
type D = A extends B ? number : string  // 等价于 type D = string

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

泛型

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

正餐开始

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

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

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

举个例子

interface Example {
    a: string; // √
    b: string; // √  
    c: number; // × 
    d: boolean; // × 
}

// 我只想要Example类型中的string类型的key,非string的就标记为never
type MyType = MarkUnwantedTypesAsNever<Example, string>
/*
 等价于:
 type MyType = {
  a: 'a';
  b: 'b';
  c: never;
  d: never;
 }
*/

稍微讲一下小细节,[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 } 的类型吗?别急,后面还有别的操作

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

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

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

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

type Value = {
  name: "zero2one"; 
  age: 23
}["name" | "age"]

// 等价于 type Value = "zero2one" | 23

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

type Value = {
  name: "zero2one"; 
  age: never
}["name" | "age"]

// 等价于 type Value = "zero2one"

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

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

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

// 借用一下刚才例子的结果
type MyType = {
   a: 'a';
  b: 'b';
  c: never;
  d: never;
}['a' | 'b' | 'c' | 'd']

/*
 等价于:
 type MyType = 'a' | 'b'
*/

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

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

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

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

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

举个简单的例子:

interface A {
  a: 1;
  b: 2;
  c: 3;
  d: 4;
}

type C = Pick<A, 'a' | 'c'>  // 等价于 type C = { a: 1; c: 3 }

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


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

interface Example {
 a: string;
  b: string;
  c: number;
  d: boolean;
}

// 上文得到的结果
type MyType = 'a' | 'b'

type Result = Pick<Example, MyType>  // 等价于 type Result = { a: string; b: string }

// ---- 以上等价于 ---- //

interface Example {
    a: string; // √
    b: string; // √  
    c: number; // × 
    d: boolean; // × 
}
type NewType = FilterConditionally<Sample, string>
/*
 NewType 最终结果为:
 {
  a: string;
  b: string
 }
*/

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

实战应用例子

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

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

最后

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

来自:https://lpyexplore.blog.csdn.net/article/details/121782530


链接: https://fly63.com/article/detial/11034

JS中Null与Undefined的区别

在JavaScript中存在这样两种原始类型:Null与Undefined。这两种类型常常会使JavaScript的开发人员产生疑惑,在什么时候是Null,什么时候又是Undefined?Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。

Javascript的类型检测

主要介绍了JS中检测数据类型的几种方式,typeof运算符用于判断对象的类型,但是对于一些创建的对象,它们都会返回\'object\',有时我们需要判断该实例是否为某个对象的实例,那么这个时候需要用到instanceof运算符

js类型转换的各种玩法

对于object和number、string、boolean之间的转换关系,ToPrimitive是指转换为js内部的原始值,如果是非原始值则转为原始值,调用valueOf()和toString()来实现。

JavaScript类型:关于类型,有哪些你不知道的细节?

Undefined类型表示未定义,它的类型只有一个值为undefined。undefined和null有一定的表意差别。非整数的Number类型无法使用 == 或 === 来比较,因为 JS 是弱类型语言,所以类型转换发生非常频繁

为你的 JavaScript 项目添加智能提示和类型检查

近在做项目代码重构,其中有一个要求是为代码添加智能提示和类型检查。智能提示,英文为 IntelliSense,能为开发者提供代码智能补全、悬浮提示、跳转定义等功能,帮助其正确并且快速完成编码。

js的类型

基本类型:按值访问,可以操作保存在变量中实际的值;引用类型数据存在堆内存,而引用存在栈区,也就是说引用类型同时保存在栈区和堆区,关于==的执行机制,ECMASript有规范,因为==前后的值交换顺序,返回的值也是一样的,所以在此对规范做出如下总结

再也不用担心 JavaScript 的数据类型转换了

JavaScript 是一种弱类型或者说动态类型语言。所以你不用提前声明变量的类型,在程序运行时,类型会被自动确定,你也可以使用同一个变量保存不同类型的数据。

JavaScript基础之值传递和引用传递

js的值传递和引用(地址)传递:js的5种基本数据类型 number,string,null,undefined,boolean 在赋值传递时是值传递,js的引用数据类型(object,array,function)进行引用传递,其实底层都是对象。

JS中的布尔 数字 字符串

JS中所有的值都可以转换成布尔类型 使用Boolean()或者 !!(两个感叹号),JS中所有的值都可以转换成数字类型,使用Number()或+。数字类型转换场景目的只有一个,用于计算,将后台传递的数据,从字符串转换为数字并参与计算

if条件中,js的强制类型转换

众所周知,JS在很多情况下会进行强制类型转换,其中,最常见两种是:1.使用非严格相等进行比较,对==左边的值进行类型转换2.在if判断时,括号内的值进行类型转换,转化为布尔值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!