详解Vue2.5+迁移至Typescript指南

为什么要迁移至Typescript

Javascript本身是动态弱类型的语言，这样的特点导致了Javascript代码中充斥着很多Uncaught TypeError的报错，给开发调试和线上代码稳定都带来了不小的负面影响。

而Typescript提供了静态类型检查，使很多类型错误在编写时就已经发现，不会带到测试阶段。

同时，Javascript不定义model就可以使用一个对象，有人喜欢这样的灵活性，的确这样的语法在model不复杂的时候可以快速的开发出需要的功能，但一旦model庞大，找一个需要的属性值都不知道从何找起。而在Typescript中，我们需要使用TS中的interface type等方式先定义出model，才可以调用其属性值，所以Typescript极大的提高了代码的可读性。

可行性

因为TypeScript是JavaScript的超集，TypeScript 不会阻止 JavaScript 的运行，即使存在类型错误也不例外，这能让你的 JavaScript 逐步迁移至 TypeScript。所以可以慢慢地做迁移，一次迁移一个模块，选择一个模块，重命名.js文件到.ts，在代码中添加类型注释。当你完成这个模块时，选择下一个模块。

如何将已有的Vue项目迁移至Typescript

安装依赖

Vue官方提供了一个库Vue-class-component，用于让我们使用Ts的类声明方式来编写vue组件代码。Vue-property-decorator则是在Vue-class-component的基础上提供了装饰器的方式来编写代码。首先我们需要在package.json中引入这两个依赖。

我的项目是基于vue-cli@3.X创建的，还需要在项目中引入@vue/cli-plugin-typescript typescript两个依赖来完成Typescript的编译。

配置tsconfig.json

在项目根目录新建tsconfig.json,并引入以下代码

{ "compilerOptions": {  "target": "esnext",  "module": "esnext",  "strict": true,  "jsx": "preserve",  "importHelpers": true,  "moduleResolution": "node",  "experimentalDecorators": true,  "esModuleInterop": true,  "allowSyntheticDefaultImports": true,  "sourceMap": true,  "baseUrl": ".",  "noFallthroughCasesInSwitch":true,  "noImplicitAny":true,  "noImplicitReturns":true,  "noImplicitThis":true,  "types": [   "webpack-env"  ],  "paths": {   "@/*": [    "./app/common/*"   ],   "_app/*": [    "./app/*"   ],   "_c/*": [    "./app/common/components/*"   ],   "api/*": [    "./app/service/*"   ],   "assets/*": [    "./app/assets/*"   ]  },  "lib": [   "esnext",   "dom",   "dom.iterable",   "scripthost"  ], }, "include": [   // 在此出填写你的项目中需要按照typescript编译的文件路径  "app/**/*.ts",  "app/**/*.tsx",  "app/**/*.d.ts",  "app/**/*.vue", ], "exclude": [  "node_modules" ]}

特别需要注意的是，现在的vue项目中大多使用了webpack的alias来解析路径,在tsconfig.json中需要配置path属性，让typescript同样认识在webpack中配置的路径别名。