TypeScript-工程

环境配置：

1. node -v
2. npm install typescript -g （建议不要全局安装）
3. tsc -v
4. tsc --init ( tsconfig.json )
5. tsconfig.json ( 配置项修改 )

　　　Ctrl + Shift + B ( vscode 解析 ts 文件为 js )

在 TypeScript 中使用 ESLint:

• 安装 ESLint

npm install eslint --save-dev

因 ESLint 默认使用ESpree进行语法解析器，不能识别 TypeScript 语法，则需要安装 @typescript-eslint/parser，替换掉默认的解析器:

npm install typescript @typescript-eslint/parser --save-dev

然后安装对应的插件 @typescript-eslint/eslint-plugin ，此插件是 eslint 默认规则的补充，提供了额外的适用于 ts 语法的规则。

npm install @typescript-eslint/eslint-plugin --save-dev

• 创建配置文件

配置文件的名称一般为：.eslintrc.js / .eslintrc.json

根目录下创建 .eslintrc.js 文件，如下：

module.exports = {

    parser: '@typescript-eslint/parser',

    plugins: ['@typescript-eslint'],

    rules: {

        // 禁止使用 var

        // off:关闭；warn:警告；error:报错；

        'no-var': "error",

        // 优先使用 interface 而不是 type

        '@typescript-eslint/consistent-type-definitions': [

            "error",

            "interface"

        ]

    }

}

• 检查整个项目的 ts 文件

像 Vue 创建的项目，项目源文件一般都是放在 src 目录下，所以将 package.json 中的 eslint 脚本改为对一个目录下的 ts 文件进行检查，eslint 不会检查 .ts 后缀的文件，则需要配置上 --ext .ts

{
    "script": {
        "eslint": "eslint src --ext .ts"
    }
}

• 使用 AlloyTeam 的 ESLint 配置

推荐使用  AlloyTeam ESLint 规则中的 TypeScript 版本，（AlloyTeam ESLint 规则）与 Prettier 完全兼容：

npm install --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-alloy

在项目根目录下创建 .eslintrc.js，并写下如下代码：

module.exports = {
    extends: [
        'alloy',
        'alloy/typescript',
    ],
    env: {
        // 这里填入你的项目用到的环境
        // 它们预定义了不同环境的全局变量，比如：
        //
        // browser: true,
        // node: true,
        // mocha: true,
        // jest: true,
        // jquery: true
    },
    globals: {
        // 这里填入你的项目需要的全局变量
        // false 表示这个全局变量不允许被重新赋值，比如：
        //
        // myGlobal: false
    },
    rules: {
        // 这里填入你的项目需要的个性化配置
    }
};