最近考虑到老项目代码的可维护性以及稳定性，决定引入ts做规范检测。因为介绍的东西比较基础，如果介绍的不对，麻烦指正。

1. 简介

TypeScript 是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持。网上关于ts的学习资料很多，这里不做详细介绍。可参考的学习网站：

ts.xcatliu.com/

typescript.bootcss.com/

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声明文件目录

项目中总会依赖一些资源包，或是自己开发的一些组件，这些文件需要补充声明文件，声明文件就是将多个声明语句放在一起，这些声明文件可统一放到一个目录里。这个目录需要包含在 tsconfig.json 文件的include里。

ms工程在根目录下新建 types 目录，目前包含 vue.d.ts, request.d.ts, dialog.d.ts, base.d.ts 等文件。

6.2 全局vue.d.ts声明文件

需要在ts环境下识别vue文件，需要添加 vue.d.ts 全局声明文件，例子如下：

import VueRouter, { Route } from 'vue-router';import RequestAxios from './request';declare module '*.vue' { import Vue from 'vue'; export default Vue;}declare module 'vue/types/vue' { interface Vue { $router: VueRouter; $route: Route; $request: RequestAxios; .... }}

6.2 vue文件的改造

vue文件的改造，只改造js部分，代码大致修改如下：

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';@Component({ components: { .... }})export default class MyComponent extends Vue { // prop @Prop({ default: () => {} }) readonly pageInfo !: any // data private showAnimation : boolean = true; // watch @Watch('showModuleIndex') onShowModuleIndexChanged(newValue: any) { this.$emit('input', newValue); } // computed get list() { const { page, cityList } = this; return page.cityList.split(',').map( cityId => cityList.find(c => String(c.id) === cityId) ); } // mounted private mounted() :void { this.initEditor(); } // methods private initEditor() :void { .... }}</script>

6.3 js文件的改造

将文件后缀名更改为.ts，然后加上类型就可以了。

7. 踩坑总结

大部分都是eslint校验时的报错，按照提示修复就可以了。

"vue/html-indent": [2, 4] eslint这条规则去掉

"plugin:vue/base"与"plugin:vue/recommend"的区别

...

8. 总结

项目改造过程中，大部分时间都是在查配置兼容问题，配置这块解决了，改造起来速度还是挺快的。虽然前期会有一些改造成本，但是长远来看，还是有意义的。毕竟很多代码类型上的问题在开发阶段就可以暴露，不用等到运行时才发现了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。