@uifabric/tslint-rules 是由微软推出的一套 TypeScript Lint 规则集，主要用于检查 UI Fabric 库的 TypeScript 代码质量。该规则集支持 TypeScript 2.6 及以上版本，并且与 tslint 5.x.x 兼容。
本文将介绍如何在前端项目中使用 @uifabric/tslint-rules 包，并且结合示例代码来详细讲解每一条规则的作用、实现方式以及注意事项。
安装
首先，使用 npm 安装 @uifabric/tslint-rules 包：
npm install --save-dev @uifabric/tslint-rules
安装完成后，我们需要在项目中添加 tslint.json 配置文件，并在其中引入 @uifabric/tslint-rules：
{
"extends": [
"@uifabric/tslint-rules"
],
"rules": {
// 如果需要覆盖某一条规则的实现，可以在这里配置
}
}使用
配置完 tslint.json 后，我们可以使用 tslint 命令来检查 TypeScript 代码的质量：
tslint app/**/*.ts
规则详解
@uifabric/tslint-rules 包含了多条 TypeScript Lint 规则，以下将分别对每一条规则进行详细介绍。
ban-ts-ignore
该规则的作用是禁止使用 // @ts-ignore 注释来忽略 TypeScript 类型检查器的错误。通常情况下，我们应该通过调整代码来满足检查器的要求。
示例代码：
// 不正确的示例 // @ts-ignore const foo: string = 'bar'; // 正确的示例 const foo: string | undefined = undefined;
no-boolean-literal-compare
该规则的作用是禁止将布尔型的字面量与 true 或者 false 直接进行比较。我们应该使用布尔运算符来进行比较。
示例代码：
-- -------------------- ---- ------- -- ------ -- ---- --- ----- - -- -- --------- --- - -- ----- -- ----- - -- -- --------- --- -
no-disable-auto-sanitization
该规则的作用是禁止使用 bypassSecurityTrustHtml 或 bypassSecurityTrustScript 方法来禁用 Angular 自动数值化。通常情况下，我们应该通过调整 HTML 或者 JavaScript 代码来实现。
示例代码：
// 不正确的示例
const unsafeHtml = '<script>alert("Hello World")</script>';
const safeHtml = this.domSanitizer.bypassSecurityTrustHtml(unsafeHtml);
// 正确的示例
const safeHtml = this.domSanitizer.sanitize(SecurityContext.HTML, unsafeHtml);no-non-null-assertion
该规则的作用是禁止使用 ! 运算符来强制取消 TypeScript 变量的空值检查。通常情况下，我们应该使用可选属性、类型守卫或者条件运算符来避免空值检查。
示例代码：
-- -------------------- ---- -------
-- ------
-------- --------------- ------ - ----- -
---------------------------------
-
-- -----
-------- --------------- ------ - ----- -
-- ----- --- ----- -
--------------------------------
-
-
-------- --------------- ------ - ----- -
---------------------------------
-
-------- --------------- ------ - ----- -
---------------- - ------------------ - ----
-react-a11y-anchors
该规则的作用是检查 React 虚拟节点中的锚点元素(a 标签)是否包含有效的 href 属性。通常情况下，我们应该将 href 设置为空字符串('')，从而使得锚点仅仅是一个点击区域。
示例代码：
-- -------------------- ---- ------- -- ------ ----------- -- ----------------- -- ----------------------------------- -- ----- -- ---------------- -- ----------------- -- ---------------------
react-a11y-aria-unsupported-elements
该规则的作用是检查 React 虚拟节点中是否包含不支持 ARIA 属性的元素。通常情况下，我们应该遵循 WAI-ARIA 规范，并且仅在支持 ARIA 属性的元素上添加属性。
示例代码：
-- -------------------- ---- ------- -- ------ ---- ------------ -- ----- ------------- -- -- ----- ---- ----------------- --------------------- -- ------- -----------------
总结
本文详细介绍了 @uifabric/tslint-rules 的使用方法，并且对每一条规则进行了详细说明。通过使用这些规则，我们可以提高 TypeScript 代码的质量，并且保证代码符合 UI Fabric 库的开发规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe3b5cbfe1ea06108b7