最近考虑到老项目代码的可维护性以及稳定性,决定引入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"color: #ff0000">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. 总结
项目改造过程中,大部分时间都是在查配置兼容问题,配置这块解决了,改造起来速度还是挺快的。虽然前期会有一些改造成本,但是长远来看,还是有意义的。毕竟很多代码类型上的问题在开发阶段就可以暴露,不用等到运行时才发现了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]