源宝导读:ERP平台的前端底层使用了Vue作为组件的基础架构,而使用了TypeScript语言进行组件的封装与开发。本文将简要介绍平台在使用TypeScript和Vue框架进行老功能重构时的经验总结。
一、背景
下面主要探讨是以下三个方面:
- 目前项目中使用到的vue+ts的哪些特性,还有哪些特性值得去使用,不会涉及到太多的ts语法知识;
- 老项目的迁移为ts,有哪些点需要改造;
- 各抒己见,探讨下各位都有哪些心得和见解。
二、为什么要用typescript
TypeScript简单介绍:
- 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法,生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript,所以 TypeScript 并不依赖于浏览器的支持,也并不会带来兼容性问题。
- TypeScript 是 JavaScript 的超集,这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展,如 class / interface / module 等。这样会大大提升代码的可阅读性。
总结优势:
- 静态类型检查: 类型校验,能够避免许多低级代码错误;
- IDE 智能提示: 使用一个方法时,能清楚知道方法定义的参数和类型和返回值类型;使用一个对象时,只需要.就可以知道有哪些属性以及属性的类型;
- 代码重构: 经过不停的需求迭代,代码重构避免不了,在重构时,如果前期有清晰和规范的接口定义、类定义等,对于重构帮助很大;
- 规范性和可读性: 类似于强类型语言,有了合理的类型定义、接口定义等,对于代码实现的规范性和可读性都有很大提高,不然搜索整个项目这个方法在哪里调用、怎么定义等。
个人认为最有价值点:写代码前,会先构思功能需求的整体代码架构。
三、安装和起步
一般我们会面临两个情况:
- 新项目创建;
- 觉得ts不错,想将老项目切换为vue+ts。
3.1、新项目起步
- 安装vue-cli3.0;
- vue create vue-ts-hello-world;
- 选择Manually select features,勾选typescript。其他配置根据项目情况勾选。
3.2、老项目切换为vue+ts
- 安装ts依赖(或使用yarn);
- yarn add vue-class-component vue-property-decorator;
- yarn add ts-loader typescript tslint tslint-loader tslint-config-standard —dev。
- 配置 webpack,添加ts-loader和tslint-loader;
- 添加 tsconfig.json;
// 这是平台目前用的tsconfig.json{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "experimentalDecorators": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strictNullChecks": false, "sourceMap": true, "baseUrl": ".", "types": [ "webpack-env", "jest" ], "paths": { "@/*": [ "src/*" ], // 别名追加 "components/*": [ "src/components/*" ], }, "lib": [ // 编译过程中需要引入的库文件的列表 "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules", "ui-tests" ]}
备注: ts 也可支持 es6 / es7,在 tsconfig.json中,添加对es6 / es7的支持。
"lib": [ "dom", "es5", "es6", "es7", "es2015.promise"]
- 添加 tslint.json 或者 prettierrc(可以视情况而定)。
// 目前平台使用的是.prettierrc.jsmodule.exports = { "$schema": "http://json.schemastore.org/prettierrc", "singleQuote": true, "endOfLine": "auto", "semi": false}
- 让 ts 识别 .vue。
declare module "*.vue" { import Vue from "vue"; export default Vue;}
-
- 而在代码中导入 .vue 文件的时候,需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 .ts 文件,不识别 *.vue 文件。
- 添加vue-shim.d.ts,让vue文件给vue模块来编译。
- 改造 .vue文件,将vue中script切换为