为什么要迁移至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中配置的路径别名。
添加全局声明文件
因为在ts文件中是无法识别vue文件的，所以需要在项目根目录新建shims-vue.d.ts文件，添加以下代码，来让ts识别vue文件。
import Vue from 'vue'; declare module '*.vue' { export default Vue; }
由下而上的迁移
因为是迁移已经存在的项目，不建议开始就把main.js重命名为main.ts,对于绝大多数Vue项目，main.js引入了太多的依赖，我们应该首先从依赖着手，自下而上的迁移Typescript。对于项目中一些偏底层，甚至是框架维护者所提供的库函数，我们不关心其实现逻辑，所以没有必要将其改写为ts文件，只需要给其加声明文件供我们的业务代码调用即可。
在我的项目中，service层的逻辑非常简单，仅仅是传参数调用接口，没有添加任何其他的逻辑，逻辑如此简单其实没有什么必要改写为ts文件，所以我为service层的文件编写声明文件，来为调用service层的代码提供类型声明。
声明文件编写方法
一个js文件如下
//service.js import axios from '@/libs/api.request' export default { /** * 创建账户 * @param {Object} data * @param {String} data.accountType optinal * @param {String} data.username * @param {String} data.password * @param {String} data.gender X | F | M * @param {String} data.email * @param {Number} data.level */ createAccount(data) { return axios.request({ url: `/api/account/createUser`, method: 'post', data: data }).then((res) => [res, null]).catch((err) => [null, err]); }, }
可以看到，在使用typescript之前，对于一个函数的参数和返回值等信息的提示是通过jsdoc实现的，能够在调用时确定参数类型及名称，但jsdoc毕竟只是注释，并不能提供类型校验，所以在这里我们为其编写声明文件，编写后的声明文件如下