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)

268-easy-if

我们首先还是先通过题目的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进行对比学习

首先我们还是先用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?)]

实现 If

接着我们就按照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)

总结

今天这道题的知识点都比较简单，实现起来的难度应该不大，不了解部分知识的可以回顾一下之前做过的题目。