logo头像

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

typescript 教程

本文于 946 天之前发表,文中内容可能已经过时。

TSLint 规则

一套完整的 TSLint 规则,以及对每条规则的释义。

使用方法

tslint-config-alloy为例:
安装:

npm install --save-dev tslint typescript tslint-config-alloy

在你的项目根目录下创建 tslint.json,并将以下内容复制到文件中:

{
    "extends": ["tslint-config-alloy"],
    "linterOptions": {
        "exclude": ["**/node_modules/**"]
    },
    "rules": {
        // 这里填入你的项目需要的个性化配置,比如:
        //
        // // 一个缩进必须用两个空格替代
        // // @has-fixer 可自动修复
        // // @prettier 可交由 prettier 控制
        // "indent": [true, "spaces", 2]
    }
}

CLI 中运行

使用项目依赖中的 tslint 脚本,指定项目路径,检查所有 ts 后缀的文件:

./node_modules/.bin/tslint --project . ./**/*.ts

tslint 作为 npm scripts 运行:

  1. package.jsonscripts 字段添加一条 "tslint": "tslint --project . ./**/*.ts"
  2. 运行 npm run tslint

与 VSCode 集成

  1. 在 VSCode 中安装 tslint 插件
  2. 按下 Cmd + ,Ctrl + ,,打开设置
  3. tslint.autoFixOnSave,配置为 true

与 Prettier 集成

Prettier 是一个专注于对代码风格进行统一格式化的工具,由于与 TSLint 的部分配置冲突,故需要使用 tslint-config-prettier 禁用掉 TSLint 的部分规则。

首先安装 prettier 和 tslint-config-prettier:

npm install --save-dev prettier tslint-config-prettier

然后为 tslint.configextends 添加 tslint-config-prettier 即可:

{
    "extends": ["tslint-config-alloy", "tslint-config-prettier"],
    "linterOptions": {
        "exclude": ["**/node_modules/**"]
    },
    "rules": {
        // 这里填入你的项目需要的个性化配置,比如:
        //
        // // 一个缩进必须用两个空格替代
        // // @has-fixer 可自动修复
        // // @prettier 可交由 prettier 控制
        // "indent": [true, "spaces", 2]
    }
}

如果需要在 VSCode 中实现保存时修复 Prettier 的问题,则可以按照以下步骤配置:

  1. VSCode 安装 Prettier - Code formatter 插件
  2. 按下 Cmd + ,Ctrl + ,,打开设置
  3. tslint.formatOnSave,配置为 true

Prettier 的配置文件 prettier.config.js 可以参考这个:

// prettier.config.js or .prettierrc.js
module.exports = {
    // 一行最多 100 字符
    printWidth: 100,
    // 使用 4 个空格缩进
    tabWidth: 4,
    // 不使用缩进符,而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号
    singleQuote: true,
    // jsx 不使用单引号,而使用双引号
    jsxSingleQuote: false,
    // 末尾不需要逗号
    trailingComma: 'none',
    // 大括号内的首尾需要空格
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数,只有一个参数的时候,也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
};

规则列表

TypeScript 相关

与 TypeScript 特性相关的规则。

名称描述
adjacent-overload-signatures重载的函数必须写在一起
ban-types禁用特定的类型
member-access必须指定类的成员的可访问性
member-ordering指定类成员的排序规则
no-any禁止使用any
no-empty-interface禁止定义空的接口
no-import-side-effect禁止导入立即执行的模块,除了csslesssassscss
no-inferrable-types禁止给一个初始化时直接赋值为numberstringboolean的变量显式的指定类型
no-internal-module禁止使用module来定义命名空间
no-magic-numbers禁止使用魔法数字,仅允许使用一部分白名单中的数字
no-namespace禁止使用namespace来定义命名空间
no-non-null-assertion禁止使用 non-null 断言(感叹号)
no-parameter-reassignment禁止对函数的参数重新赋值
no-reference禁止使用三斜线引入模块/// <reference path="foo" />
no-unnecessary-type-assertion禁止无用的类型断言
no-var-requires禁止使用require来引入模块
only-arrow-functions必须使用箭头函数,除非是单独的函数声明或是命名函数
prefer-for-of使用for循环遍历数组时,如果index仅用于获取成员,则必须使用for of循环替代for循环
promise-function-asyncasync函数的返回值必须Promise
typedef变量、函数返回值、函数参数等必须要有类型定义
typedef-whitespace类型定义的冒号前面必须没有空格,后面必须有一个空格
unified-signatures函数重载时,若能通过联合类型将两个函数的类型声明合为一个,则使用联合类型而不是两个函数声明

功能性检查

找出可能的错误,以及可能会产生 bug 的编码习惯。

名称描述
await-promiseawait必须接受Promise
ban禁用指定的函数或全局方法
ban-comma-operator禁止使用逗号操作符
curlyif后面必须{,除非是单行if
forinfor in内部必须hasOwnProperty
import-blacklist禁用指定的模块
label-position只允许在do, for, whileswitch 中使用 label
no-arg禁止使用arguments.callee
no-bitwise禁止使用位运算
no-conditional-assignment禁止在分支条件判断中有赋值操作
no-console禁止使用console
no-construct禁止使用new来生成String,NumberBoolean
no-debugger禁止使用debugger
no-duplicate-super禁止super在一个构造函数中出现两次
no-duplicate-switch-case禁止switch语句中出现重复测试表达式的case
no-duplicate-variable禁止出现重复的变量定义或函数参数名
no-dynamic-delete禁止delete动态的值
no-empty禁止出现空代码块,允许catch是空代码块
no-eval禁止使用eval
no-floating-promises函数返回值为Promise时,必须被处理
no-for-in-array禁止array使用for in循环
no-implicit-dependencies禁止引入package.json中不存在的模块
no-inferred-empty-object-type禁止推论出的类型是空对象类型
no-invalid-template-strings禁止在非模版字符串中出现${}
no-invalid-this禁止在类外面使用this
no-misused-new禁止在接口中定义constructor,或在类中定义new
no-null-keyword禁止使用null
no-object-literal-type-assertion禁止对对象字面量进行类型断言(断言成any是允许的)
no-return-await禁止没必要的return await
no-shadowed-variable禁止变量名与上层作用域内的定义过的变量重复
no-sparse-arrays禁止在数组中出现连续的逗号,如let foo = [,,]
no-string-literal禁止出现foo['bar'],必须写成foo.bar
no-string-throw禁止throw字符串,必须throw一个Error对象
no-submodule-imports禁止import模块的子文件
no-switch-case-fall-throughswitchcase 必须 returnbreak
no-this-assignment禁止this赋值给其他变量,除非是解构赋值
no-unbound-method使用实例的方法时,必须bind到实例上
no-unnecessary-class禁止定义没必要的类,比如只有静态方法的类
no-unsafe-any禁止取用一个类型为any的对象的属性
no-unsafe-finally禁止finally内出现return,continue,break,throw
no-unused-expression禁止无用的表达式
no-use-before-declare变量必须先定义后使用
no-var-keyword禁止使用var
no-void-expression禁止返回值为void类型
prefer-conditional-expression可以用三元表达式时,就不用if else
prefer-object-spread使用{ ...foo, bar: 1 }代替Object.assign({}, foo, { bar: 1 })
radixparseInt必须传入第二个参数
restrict-plus-operands使用加号时,两者必须同为数字或同为字符串
strict-boolean-expressions在分支条件判断中必须传入布尔类型的值
strict-type-predicates禁止出现永远为true或永远为false的条件判断(通过类型预测出一个表达式为true还是false
switch-defaultswitch语句必须default
triple-equals必须使用===!==禁止使用==!=
typeof-comparetypeof表达式比较的对象必须'undefined','object','boolean','number','string','function''symbol'
use-default-type-parameter传入的类型与默认类型一致时,必须省略传入的类型
use-isnan必须使用isNaN(foo)而不是foo === NaN

可维护性

增强代码可维护性的规则。

名称描述
cyclomatic-complexity禁止函数的循环复杂度超过 20,详见 https://en.wikipedia.org/wiki/Cyclomatic_complexity
deprecation禁止使用废弃(被标识了@deprecated)的API
eofline文件最后一行必须有一个空行
indent一个缩进必须用四个空格替代
linebreak-style限制换行符为 LF 或 CRLF
max-classes-per-file限制每个文件的类的数量
max-file-line-count限制每个文件的行数
max-line-length限制每行字符数
no-default-export禁止使用default export
no-duplicate-imports禁止出现重复的import
no-require-imports禁止使用require
object-literal-sort-keys对象字面量必须key排序
prefer-const申明后不再被修改的变量必须使用const来申明
prefer-readonly如果私有变量只在构造函数中被赋值,则必须使用readonly修饰符
trailing-comma限制对象、数组、解构赋值等的最后一项末尾是否需要逗号

代码风格

与代码风格相关的规则。

名称描述
align变量定义需要竖向对其
array-type限制必须使用T[]Array<T>之中的一种来定义数组的类型
arrow-parens箭头函数的参数必须有小括号
arrow-return-shorthand箭头函数的函数体只有return语句的时候,必须简写
binary-expression-operand-order数字字面量必须在加号的右边,即禁止1 + x
callable-types可以简写为函数类型的接口或字面类似,必须简写
class-name类名与接口名必须为驼峰式
comment-format限制单行注释的规则
completed-docs类、函数等必须写注释
encoding文件类型必须utf-8
file-header文件的开头必须有指定的字符串
file-name-casing约束文件命名规范
import-spacingimport语句中,关键字之间的间距必须是一个空格
interface-name接口名称必须I开头
interface-over-type-literal优先使用接口而不是字面类型
jsdoc-format注释必须符合JSDoc规范
match-default-export-nameimport的名称必须export default的名称一致
new-parensnew后面只必须有一个空格
newline-before-returnreturn语句前必须有空行
newline-per-chained-call链式调用时,每次调用都必须占用一行
no-angle-bracket-type-assertion类型断言必须使用as Type禁止使用<Type>
no-boolean-literal-compare禁止变量与truefalse比较
no-consecutive-blank-lines禁止连续超过三行空行
no-irregular-whitespace禁止使用特殊空白符(比如全角空格
no-parameter-properties禁止给类的构造函数的参数添加修饰符
no-redundant-jsdoc禁止JSDoc 中的冗余类型声明,因为 TypeScirpt 已经包含了大部分功能
no-reference-import如果已经引入过库,则禁止使用三斜杠引入类型定义文件
no-trailing-whitespace禁止行尾有空格
no-unnecessary-callback-wrapper禁止没必要的函数调用,如x => f(x)应该简写为f
no-unnecessary-initializer禁止变量定义时赋值为undefined
no-unnecessary-qualifier在命名空间中,可以直接使用内部变量,不需要添加命名空间前缀
number-literal-format小数必须0.开头,禁止.开头,并且不能以0结尾
object-literal-key-quotes对象的key必须用引号包起来
object-literal-shorthand必须使用a = {b}而不是a = {b: b}
one-lineif后的{禁止换行
one-variable-per-declaration变量申明必须每行一个,for循环的初始条件中除外
ordered-importsimport必须排序
prefer-function-over-method类中没有使用this的方法应该提取成类外的函数
prefer-method-signature必须使用foo(): void而不是foo: () => void
prefer-switchif中只有===时,必须使用switch替换if
prefer-template必须使用模版字符串而不是字符串连接
prefer-while当没有初始值的时候,必须使用while而不是for
quotemark必须使用单引号,jsx必须使用双引号
return-undefined使用return;而不是return undefined;
semicolon行尾必须有分号
space-before-function-paren函数名前必须有空格
space-within-parens括号内首尾禁止有空格
switch-final-breakswitch的最后一项禁止break
type-literal-delimiter字面类型的每个成员都必须有分号
variable-name限制变量命名规则
whitespace限制空格的位置

评论系统未开启,无法评论!