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

说明

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

操作过程

image.png

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

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

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

项目文件变化

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

image.png

项目入口main.js变成了main.ts
eslintrc.js文件

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

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
        <p>
            For a guide and recipes on how to configure / customize this project,<br>
            check out the
            <a
                href="https://cli.vuejs.org"
                target="_blank"
                rel="noopener"
            >vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
            <li>
                <a
                    href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
                    target="_blank"
                    rel="noopener"
                >typescript</a>
            </li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
            <li>
                <a
                    href="https://vuejs.org"
                    target="_blank"
                    rel="noopener"
                >Core Docs</a>
            </li>
            <li>
                <a
                    href="https://forum.vuejs.org"
                    target="_blank"
                    rel="noopener"
                >Forum</a>
            </li>
            <li>
                <a
                    href="https://chat.vuejs.org"
                    target="_blank"
                    rel="noopener"
                >Community Chat</a>
            </li>
            <li>
                <a
                    href="https://twitter.com/vuejs"
                    target="_blank"
                    rel="noopener"
                >Twitter</a>
            </li>
            <li>
                <a
                    href="https://news.vuejs.org"
                    target="_blank"
                    rel="noopener"
                >News</a>
            </li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
            <li>
                <a
                    href="https://router.vuejs.org"
                    target="_blank"
                    rel="noopener"
                >vue-router</a>
            </li>
            <li>
                <a
                    href="https://vuex.vuejs.org"
                    target="_blank"
                    rel="noopener"
                >vuex</a>
            </li>
            <li>
                <a
                    href="https://github.com/vuejs/vue-devtools#vue-devtools"
                    target="_blank"
                    rel="noopener"
                >vue-devtools</a>
            </li>
            <li>
                <a
                    href="https://vue-loader.vuejs.org"
                    target="_blank"
                    rel="noopener"
                >vue-loader</a>
            </li>
            <li>
                <a
                    href="https://github.com/vuejs/awesome-vue"
                    target="_blank"
                    rel="noopener"
                >awesome-vue</a>
            </li>
        </ul>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

新增了tsconfig.js配置文件
新增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