前端React?Nextjs中的TS类型过滤实用技巧

更新时间：2022年04月26日 09:53:42 作者：「零一」

今天就来介绍一个在其它开源库中见到的既花里胡哨，又实用的TS类型——TS类型过滤，你会发现这些?TS骚操作真的很重要，因为它能很好地帮助你做静态类型校验

大家好，我是零一，相信大家在阅读同事写的代码或者优秀的开源库的代码时，一定见过各种各样的风骚的TS写法，不花点时间下去根本看不懂，换作是我们，可能就直接一个 any 完事了，但是真正当项目体积变大后，你会发现这些 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类型过滤这种场景太多太多了，希望今后大家遇到时能轻松读懂。如果在屏幕前阅读的你是后端，说不定也能在后端的开源框架源码中看到它的身影呢~

以上就是前端React Nextjs中的TS类型过滤实用技巧的详细内容，更多关于前端React Nextjs中的TS类型过滤的资料请关注程序员之家其它相关文章！

您可能感兴趣的文章:

JS简单实现动态添加HTML标记的方法示例
这篇文章主要介绍了JS简单实现动态添加HTML标记的方法,结合实例形式分析了JavaScript使用createElement()方法针对页面元素进行动态操作相关实现技巧,需要的朋友可以参考下
2018-04-04
IE的fireEvent方法概述及应用
IE中提供了一个fireEvent方法大概就是触发某个事件发生的意思，以为是和onclick()一样，看来是我自已为是了,有时间还要多看看javascript的细节啊,广大网友也是啊
2013-02-02
浅析js中substring和substr的方法
这篇文章主要介绍了js中substring和substr的方法，对substring和substr的方法进行描述和说明，感兴趣的小伙伴们可以参考一下
2015-11-11
uniapp小程序底部tabbar图标大小设置办法
这篇文章主要给大家介绍了关于uniapp小程序底部tabbar图标大小设置办法的相关资料,在使用uniapp进行开发时,tabbar是我们使用的很频繁的一个组件,但是在特定的平台会有一些使用上的限制,需要的朋友可以参考下
2023-08-08
Bootstrap导航条鼠标悬停下拉菜单
这篇文章主要为大家详细介绍了Bootstrap导航条鼠标悬停下拉菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
Javascript 浮点运算的问题分析与解决方法
JavaScript 只有一种数字类型 Number ，而且在Javascript中所有的数字都是以IEEE-754标准格式表示的。浮点数的精度问题不是JavaScript特有的，因为有些小数以二进制表示位数是无穷的
2013-08-08
微信公众平台获取access_token的方法步骤
这篇文章主要介绍了微信公众平台获取access_token的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
纯JS实现简单的日历
这篇文章主要为大家详细介绍了纯JS实现简单日历的的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
JavaScript实现弹出广告功能
本文通过实例代码给大家分享javascript实现弹出广告功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2017-03-03
js获取浏览器和屏幕的各种宽度高度
本文主要介绍了js获取浏览器和屏幕的各种宽度高度的方法，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02