最近考虑到老项目代码的可维护性以及稳定性,决定引入ts作规范检测。由于介绍的东西比较基础,若是介绍的不对,麻烦指正。css
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持。网上关于ts的学习资料不少,这里不作详细介绍。可参考的学习网站:html
cnpm i typescript ts-loader --save-dev
复制代码
在项目根目录下添加 tsconfig.json 文件。tsconfig.json 文件用来指定ts的编译选项。配置可参考:typescript.bootcss.com/tsconfig-js…react
项目工程 tsconfig.json 文件配置以下:(仅作参考)webpack
{ "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" ] } 复制代码
webpack.config.js 打包文件修改,新增对.ts文件的打包配置。ios
module.exports = { entry: { app: ['@babel/polyfill', './src/main.ts'] } } 复制代码
tsx针对react项目文件的支持,由于咱们的工程基于vue开发,支持.ts文件就能够了。web
module.exports = { resolve: { extensions: ['.js', '.vue', '.json', '.css', '.ts'] } } 复制代码
使用ts-loader来转换ts文件。vue-router
module.exports = { module: { rules: [ { test: /\.ts?$/, loader: 'ts-loader', exclude: /node_modules/, options: { appendTsSuffixTo: [/\.vue$/], } } ] } } 复制代码
cnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-typescript eslint-plugin-typescript --save-dev
复制代码
@typescript-eslint/parser ts文件解析器typescript
@typescript-eslint/eslint-plugin 版本号须要与@typescript-eslint/parser的版本一致,解析器相关的配置选项
eslint-config-typescript 针对ts项目配置的eslint检测规范
.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。否则会有规则冲突。
项目配置好后,开始对老代码进行改造,来支持ts的语法检测。
项目中总会依赖一些资源包,或是本身开发的一些组件,这些文件须要补充声明文件,声明文件就是将多个声明语句放在一块儿,这些声明文件可统一放到一个目录里。这个目录须要包含在 tsconfig.json 文件的include里。
ms工程在根目录下新建 types 目录,目前包含 vue.d.ts, request.d.ts, dialog.d.ts, base.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; .... } } 复制代码
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> 复制代码
将文件后缀名更改成.ts,而后加上类型就能够了。
大部分都是eslint校验时的报错,按照提示修复就能够了。
参考连接: www.yodfz.com/detail/43/w…
"vue/html-indent": [2, 4] eslint这条规则去掉
"plugin:vue/base"与"plugin:vue/recommend"的区别
...
项目改造过程当中,大部分时间都是在查配置兼容问题,配置这块解决了,改造起来速度仍是挺快的。虽然前期会有一些改形成本,可是长远来看,仍是有意义的。毕竟不少代码类型上的问题在开发阶段就能够暴露,不用等到运行时才发现了。