最近考虑到老项目代码的可维护性以及稳定性，决定引入ts做规范检测。因为介绍的东西比较基础，如果介绍的不对，麻烦指正。
1. 简介
TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。网上关于ts的学习资料很多，这里不做详细介绍。可参考的学习网站：
2. 安装依赖包
cnpm i typescript ts-loader --save-dev
3. 添加tsconfig.json文件
在项目根目录下添加 tsconfig.json 文件。tsconfig.json 文件用来指定ts的编译选项。配置可参考：
https://typescript.bootcss.com/tsconfig-json.html
项目工程 tsconfig.json 文件配置如下：（仅做参考）
{ "compilerOptions": { "baseUrl": ".", "experimentalDecorators": true, "emitDecoratorMetadata": true, "noEmitOnError": true, "target": "esnext", "module": "esnext", "strict": true, "allowJs": true, "noEmit": false, "noImplicitThis": true, "esModuleInterop": true, "sourceMap": true, "moduleResolution": "node" }, "include": [ "src/**/*", "types" ], "exclude": [ "node_modules", "build" ] }
4. webpack打包配置修改
webpack.config.js 打包文件修改，新增对.ts文件的打包配置。
4.1 入口文件后缀名由.js修改为.ts
module.exports = { entry: { app: ['@babel/polyfill', './src/main.ts'] } }
4.2 extensions 文件扩展名增加 .ts, .tsx 文件的支持
tsx针对react项目文件的支持，因为我们的工程基于vue开发，支持.ts文件就可以了。
module.exports = { resolve: { extensions: ['.js', '.vue', '.json', '.css', '.ts'] } }
4.3 loader增加对ts文件的支持
使用ts-loader来转换ts文件。
module.exports = { module: { rules: [ { test: /\.ts?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ] } }
5. eslint 添加对ts文件的检测
5.1 安装依赖包
cnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-typescript eslint-plugin-typescript --save-dev
@typescript-eslint/parser ts文件解析器
@typescript-eslint/eslint-plugin 版本号需要与@typescript-eslint/parser的版本一致，解析器相关的配置选项
eslint-config-typescript 针对ts项目配置的eslint检测规范
5.2 .eslintrc配置文件修改
.eslintrc配置文件修改，支持对ts的文件的校验。经过多次调整，我们工程的 .eslintrc 配置文件如下：
{ "parserOptions": { "parser": "@typescript-eslint/parser", "project": "./tsconfig.json", "extraFileExtensions": [".vue"], "ecmaVersion": 2017, "sourceType": "module", "ecmaFeatures": { "modules": true } }, "env": { "jest": true, "browser": true }, "settings": { "import/resolver": { "node": { "extensions": [".js", ".jsx", ".ts", ".tsx", ".eslintrc"] }, "webpack": { "config": { "resolve": { "alias": { "src": "src" } } } } } }, "plugins": [ "vue", "babel", "@typescript-eslint" ], "extends": [ "eslint:recommended", "plugin:vue/base", "typescript", "standard" ], "rules": { "func-names": 0, "one-var": [1, "never"], "prefer-const": 1, "no-unused-expressions": 1, "new-cap": 2, "prefer-arrow-callback": 2, "arrow-body-style": 0, "max-len": [ 1, { "code": 200, "ignoreStrings": true, "ignoreUrls": true, "ignoreRegExpLiterals": true } ], "consistent-return": "off", "default-case": 2, "prefer-rest-params": 2, "no-script-url": 0, "no-console": [ 2, { "allow": ["info", "error", "warn", "log"] } ], "no-duplicate-imports": 2, "newline-per-chained-call": 2, "no-underscore-dangle": 2, "eol-last": 2, "no-useless-rename": 2, "class-methods-use-this": 0, "prefer-destructuring": 0, "no-unused-vars": 0, "@typescript-eslint/no-unused-vars": 1, "no-plusplus": 0, "import/prefer-default-export": 0, "import/no-dynamic-require": 2, "@typescript-eslint/no-var-requires": 2, "no-use-before-define": [ "error", { "functions": false } ], "@typescript-eslint/no-use-before-define": 0, "@typescript-eslint/explicit-function-return-type": 0, "@typescript-eslint/interface-name-prefix": 0, "no-invalid-this": 0, "babel/no-invalid-this": 2, "no-await-in-loop": "off", "array-callback-return": "off", "no-restricted-syntax": "off", "@typescript-eslint/no-explicit-any": 0, "import/no-extraneous-dependencies": 0, "import/no-unresolved": 0, "@typescript-eslint/explicit-member-accessibility": 0, "@typescript-eslint/no-object-literal-type-assertion": 0, "no-param-reassign": [ 2, { "props": false } ], "generator-star-spacing": "off", "indent": [2, 4, { "SwitchCase": 1 }], "eqeqeq": 0, "no-else-return": 2, "arrow-parens": 0, "space-before-function-paren": ["error", "never"], "comma-dangle": [2, "never"], "semi": [2, "always"] } }
注意"extends": ["plugin:vue/base"], 只能选择vue/base，不能用vue/recommend。不然会有规则冲突。
6. 项目文件转换
项目配置好后，开始对老代码进行改造，来支持ts的语法检测。
6.1 增加ts声明文件目录