npm 包 @thi.ng/checks 使用教程

阅读时长 9 分钟读完

前言

在前端开发中,我们经常需要验证用户输入的数据是否符合预期的格式。如果每次都自己编写一些函数来进行验证,不仅浪费时间,而且还容易出错。此时,npm 包 @thi.ng/checks 可以派上用场。

简介

@thi.ng/checks 是一个用于 JavaScript 和 TypeScript 的工具包,它提供了许多常用的数据验证函数,如 isString、isNumber、isArray、isNull、isObject 等等。

安装

在使用 @thi.ng/checks 之前,需要先安装它。可以使用 npm 进行安装,命令如下:

用法

在安装完成后,可以通过 import 引入 @thi.ng/checks 中的功能,例如:

然后,就可以使用这些函数了。比如:

深度

如果仅使用上面这些函数,似乎 @thi.ng/checks 并没有什么用处。但是,@thi.ng/checks 还提供了一些对于实际开发非常有用的函数,它们可以让代码更加简洁、易读、易维护。

validate

validate 函数是 @thi.ng/checks 提供的验证入参类型和值的函数,它的定义如下:

其中,pred 表示对某个类型的判断函数,x 表示要验证的值。如果验证通过,则 validate 函数会返回 x,否则会抛出一个类型为 Error 的异常。下面是一个使用例子:

-- -------------------- ---- -------
------ - -------- - ---- -----------------

-------- ---------------- ------- ---- ------- -------- ------- -
  ------------------ ------
  ------------------ -----
  ------------------ ---------

  -- --------
-

在这个例子中,validate 函数的语义非常清晰,可以让人快速知道要校验的参数类型,这样可以避免因参数类型错误带来的一些隐蔽问题。

predicateNot

predicateNot 函数用于对一个判断函数取反,其定义如下:

该函数的作用是将某个判断函数的验证结果取反。这在一些需求上来说非常实用,例如:

在例子中,predicateNot 函数将 isString 判断函数取反,得到了一个新的判断函数 isNotString。这里 isNotString 判断函数的作用非常明显,就是判断当前值是否为非字符串。

and

and 函数用于对 多个判断函数 进行 “与” 操作,其定义如下:

-- -------------------- ---- -------
------ ----- --- - ------------- ---------------- ------------ -- -
    ----- - - ------------ - --
    ------ --- -- -
        --- ---- - - -- - -- -- ---- -
            -- -------------- -
                ------ ------
            -
        -
        ------ -----
    --
--

该函数的作用是将多个判断函数进行联合验证,只有当所有验证都通过时,才会返回 true。

在实际开发过程中,我们经常需要判断一个变量是否同时满足多个条件,例如一个用户名既不能为 null 和 undefined,又不能为空字符串,这时就可以使用 and 函数:

在这个例子中,我们使用 complement 工具函数创建了 isNotEmptyString 判断函数,该函数用于判断字符串是否非空非 null 和 undefined。然后,我们使用 and 函数将 isNotEmptyString 和 complement(isEmpty) 两个判断函数进行联合验证,得到了一个新的判断函数 isValid。这里 isValid 判断函数的作用非常明显,就是判断当前字符串是否为非空字符串。

or

或函数用于对多个判断函数进行 “或” 操作,其定义如下:

-- -------------------- ---- -------
------ ----- -- - ------------- ---------------- ------------ -- -
    ----- - - ------------ - --
    ------ --- -- -
        --- ---- - - -- - -- -- ---- -
            -- ------------- -
                ------ -----
            -
        -
        ------ ------
    --
--

该函数的作用是将多个判断函数进行联合验证,只要满足任意一个条件,就会返回 true。

在实际开发过程中,我们经常需要判断一个变量是否满足多个条件中的任意一个,例如一个数字既可以是正数,也可以是负数,这时就可以使用 or 函数:

在这个例子中,我们使用 or 函数将 isPositive 和 isNegative 两个判断条件进行联合验证,得到了一个新的判断函数 isPositiveOrNegative。这里 isPositiveOrNegative 判断函数的作用非常明显,就是判断当前数字是正数或者负数。

指导意义

通过使用 @thi.ng/checks 中的一些工具函数,可以让我们的代码更加简洁、易读、易维护。在实际开发中,一些安全性、可靠性都非常有用。 因此在开发时,建议多加尝试这些工具函数,以便更好的去优化我们的代码。

示例代码

以下代码展示了 @thi.ng/checks 常用 Api 的使用:

-- -------------------- ---- -------
------ -
  ----
  -----------
  --------
  -------
  ---------
  ---------
  -----------
  ---------
  ---
  -------------
  ---------
- ---- -----------------


--------- ---- -
  ----- -------
  ---- -------
  -------- -------
-

-------- ---------------- ------- ---- ------- -------- -------- ---- -
  ------------------ ------
  ------------------ -----
  ------------------ ---------

  ------ -
    -----
    ----
    --------
  --
-

-------- ------------- -------- ------- -
  ------ - - --
-

----- ----------- - -----------------------
----- ---------------- - --------------------
----- --------------- - ------------------ ----------
----- -------------------- - -------------- ------------
----- ----------- - --------------------- --------------------- -----------------

----- --- - ----------------- --- ------------
----- ----------- - -------------- -------- ------

-------------------------------- -- -----
---------------------------------- -- -----
--------------------------------- -- ----
--------------------------------------- -- ----
------------------------------ -- ----
-------------------------------------- -- ------ ------------------ ----- ------

在这个代码中,我们创建了一个 User 类型的接口,它有一个 name、age、address 三个属性。接着,我们编写了一个 createUser 函数,用于创建 User 类型的对象,并对函数的入参进行了验证。然后,我们又创建了一些判断函数,并使用其中一些判断函数组合出一个新的判断函数 isValidUser,并用它判断了 bob 和 invalidUser 这两个对象。通过运行代码,我们可以看到第五行输出 true,这表明 bob 满足我们设定的验证条件,而第六行会抛出一个类型为 Error 的异常,这表明 invalidUser 不满足我们设定的验证条件。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/5eedab51b5cbfe1ea0610712

纠错
反馈