一行命令使已有vue-cli项目支持typescript

说明

项目使用vue-cli 4.4.6版本，一开始由于历史原因我的项目并不支持ts，由于vue3.0即将问世，因此决定在已有的项目中引入typescript。笔者查阅了网上现有的迁移文章，很多文章都写的不是很清晰，并且步骤不是很全。
本篇文章教你一行命令使已有项目支持typescript，并且兼容以前的js文件，基本不用改写以前的代码。
如果你成功了，记得收藏和点赞哦～
如果遇到问题，也可以私信我。

操作过程

image.png

首先输入命令
vue add @vue/typescript

然后按照给出的提示配置ts设置。
主要包含以下配置：

1. 是否使用类风格的组件语法
2. 是否使用babel做转义
3. 是否将已有的js文件转换为ts文件
4. 是否允许.js文件被编译
5. 是否跳过所有声明文件的类型检查

项目文件变化

我们看支持ts之后项目文件的变化

image.png

1. 项目入口main.js变成了main.ts

2. eslintrc.js文件

   
   
   image.png
3. package.json 和 package-lock.json，新增了一些ts所需的插件和工具
4. 新增了HelloWorld.vue样例文件

5. 新增了tsconfig.js配置文件

6. 新增shims-tsx.d.ts 和 src/shims-vue.d.ts文件
   然后我们的项目就支持ts啦，我们就可以快乐地写ts啦，我们可以配置一个指向HellowWorld.vue的路由，就可以预览到页面内容了。

   
   
   image.png

注意事项

另外还要注意的是本项目使用ant-design-vue，在main.ts中不能使用Vue.use(message)/Vue.use(notification)，否则会报错，我们只需要使用
import {message, notification} from 'ant-design-vue';
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;
在项目中便可以使用this.$message.error()等方法了。

参考文档

https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-typescript/README.md