typescript 类型体操 之 268-easy-if

在学习typescript有一个过程github库对其类型的学习特别有帮助，有点相似leetcode刷题项目，可以在里面刷各种关于typescript这篇电影的文章带你做第七个简单而困难的问题 268-easy-if

type-challenges/type-challenges: Collection of TypeScript type challenges with online judge (github.com)

我们首先还是先通过题目的README让我们的要求

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-bGTtDRQC-1655351377189)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/892c14ac755a41b8807409bd21408b13~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

import type { Equal, Expect } from "@type-challenges/utils";  type cases = [   Expect<Equal<If<true, "a", "b">, "a">>,   Expect<Equal<If<false, "a", 2>, 2>> ];  // @ts-expect-error type error = If<null, "a", "b">;  

结合题目README和测试case，我们可以得出结论，主题要求我们实现一个函数，并根据第一个参数判断返回第二个参数或第三个参数。

首先，我们还是先用js模拟主题的要求。

我们用数组模拟，新建一个 JSIf 函数，这个函数传入三个参数，第一个参数是布尔值，用于判断返回T或F。

// js function JSIf(C,T,F){     return C?T:F }  

[外链图片转存失败,源站可能有防盗链机制,建议保存图片并直接上传(img-ZzSWbKBW-1655351377189)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ac1f0a54ec924c6ead89a3178131ec3a~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

然后我们按照js实现逻辑ts的代码

如果今天的问题理解昨天的条件计算，它应该是一个非常简单的问题，甚至比昨天更简单，主题引入的参数给出了判断条件，以及每种情况需要返回的值，我们可以使用它 C 是否 约束与 ture 来判断 C 是 true 还是 false

type If<C, T, F> = C extends true? T: F;  

然后根据上述逻辑返回 T，不满足返回 F。

但是我们看到了测试case：

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-PR4usz16-1655351377190)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9a7f696d9ca741cfaab7ce7fb3e963ed~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

我们在之前的主题中提到了这个错误。如果你忘记了，你可以回顾以前的文章，或者把官方文档放在下面的知识点上。

• 提到这个注释的题目文章:

typescript 类型体操 之 11-easy-tuple-to-object - 掘金 (juejin.cn)

报错的注释意味着期望下面的代码出错，否则这个注释会报错

让我们来看看下面的代码：

// @ts-expect-error type error = If<null, "a", "b">;  

对于主题的要求，以下两个参数可以传输到任何值，因此不可能报告错误，只有第一个参数报告错误，此时我们可以发现我们不限制第一个参数的传输值，当它传输到null被判定为 false 还是能够继续正常运行。

[外链图片转存失败，源站可能有防盗链机制，建议保存图片并直接上传(img-Xz1D8Ift-1655351377190)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2381ffb500354abda2c920dae6df2892~tplv-k3u1fbpfcp-zoom-in-crop-mark:1956:0:0:0.image?)]

因此，我们必须限制第一个参数，只有一个布尔值：

type If<C extends boolean, T, F> = C extends true? T: F;  

之后，我们的测试 case 所有这些都可以通过，这样我们就可以完成这个话题了。

以上提到的部分知识点：

1. 条件类型
2. @ts-expect-error 注释

今天的知识点之前已经介绍过了。你可以看看昨天的条件类型 typescript 类型体操 之 43-easy-exclude - 掘金 (juejin.cn)

关于 @ts-expect-error 注释，这里还是放上官方文件的指路。

TypeScript: Documentation - TypeScript 3.9 (typescriptlang.org)

今天这个问题的知识点比较简单，应该不难实现。不懂一些知识的可以复习之前做过的题目。