前言
在前端开发中,我们经常需要验证用户输入的数据是否符合预期的格式。如果每次都自己编写一些函数来进行验证,不仅浪费时间,而且还容易出错。此时,npm 包 @thi.ng/checks 可以派上用场。
简介
@thi.ng/checks 是一个用于 JavaScript 和 TypeScript 的工具包,它提供了许多常用的数据验证函数,如 isString、isNumber、isArray、isNull、isObject 等等。
安装
在使用 @thi.ng/checks 之前,需要先安装它。可以使用 npm 进行安装,命令如下:
npm install @thi.ng/checks
用法
在安装完成后,可以通过 import 引入 @thi.ng/checks 中的功能,例如:
import { isArray, isNumber, isString, } from "@thi.ng/checks";
然后,就可以使用这些函数了。比如:
console.log(isArray([])); // true console.log(isNumber(123)); // true console.log(isString("hello")); // true
深度
如果仅使用上面这些函数,似乎 @thi.ng/checks 并没有什么用处。但是,@thi.ng/checks 还提供了一些对于实际开发非常有用的函数,它们可以让代码更加简洁、易读、易维护。
validate
validate 函数是 @thi.ng/checks 提供的验证入参类型和值的函数,它的定义如下:
function validate<T>(pred: Pred<T>, x: any): T | never;
其中,pred 表示对某个类型的判断函数,x 表示要验证的值。如果验证通过,则 validate 函数会返回 x,否则会抛出一个类型为 Error 的异常。下面是一个使用例子:
-- -------------------- ---- ------- ------ - -------- - ---- ----------------- -------- ---------------- ------- ---- ------- -------- ------- - ------------------ ------ ------------------ ----- ------------------ --------- -- -------- -
在这个例子中,validate 函数的语义非常清晰,可以让人快速知道要校验的参数类型,这样可以避免因参数类型错误带来的一些隐蔽问题。
predicateNot
predicateNot 函数用于对一个判断函数取反,其定义如下:
export interface Predicate<A> { (x: A): boolean; } export const predicateNot = <A>(pred: Predicate<A>): Predicate<A> => (x) => !pred(x);
该函数的作用是将某个判断函数的验证结果取反。这在一些需求上来说非常实用,例如:
import { isString, predicateNot } from "@thi.ng/checks"; const isNotString = predicateNot(isString); console.log(isNotString("123")); // true console.log(isNotString(123)); // false
在例子中,predicateNot 函数将 isString 判断函数取反,得到了一个新的判断函数 isNotString。这里 isNotString 判断函数的作用非常明显,就是判断当前值是否为非字符串。
and
and 函数用于对 多个判断函数 进行 “与” 操作,其定义如下:
-- -------------------- ---- ------- ------ ----- --- - ------------- ---------------- ------------ -- - ----- - - ------------ - -- ------ --- -- - --- ---- - - -- - -- -- ---- - -- -------------- - ------ ------ - - ------ ----- -- --
该函数的作用是将多个判断函数进行联合验证,只有当所有验证都通过时,才会返回 true。
在实际开发过程中,我们经常需要判断一个变量是否同时满足多个条件,例如一个用户名既不能为 null 和 undefined,又不能为空字符串,这时就可以使用 and 函数:
import { and, isString, complement } from "@thi.ng/checks"; const isNotEmptyString = complement(isString, isNotString); const isValid = and(isNotEmptyString, complement(isEmpty)); console.log(isValid("hello world")); // true
在这个例子中,我们使用 complement 工具函数创建了 isNotEmptyString 判断函数,该函数用于判断字符串是否非空非 null 和 undefined。然后,我们使用 and 函数将 isNotEmptyString 和 complement(isEmpty) 两个判断函数进行联合验证,得到了一个新的判断函数 isValid。这里 isValid 判断函数的作用非常明显,就是判断当前字符串是否为非空字符串。
or
或函数用于对多个判断函数进行 “或” 操作,其定义如下:
-- -------------------- ---- ------- ------ ----- -- - ------------- ---------------- ------------ -- - ----- - - ------------ - -- ------ --- -- - --- ---- - - -- - -- -- ---- - -- ------------- - ------ ----- - - ------ ------ -- --
该函数的作用是将多个判断函数进行联合验证,只要满足任意一个条件,就会返回 true。
在实际开发过程中,我们经常需要判断一个变量是否满足多个条件中的任意一个,例如一个数字既可以是正数,也可以是负数,这时就可以使用 or 函数:
import { or, isNumber } from "@thi.ng/checks"; const isPositiveOrNegative = or(isPositive, isNegative); console.log(isPositiveOrNegative(1)); // true console.log(isPositiveOrNegative(-1)); // true console.log(isPositiveOrNegative(0)); // false
在这个例子中,我们使用 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