如何将 VUE JS 项目迁移到 TypeScript

Question

我想知道，我有没有办法将用 JavaScript 编写的 VUE JS 项目移动到 TypeScript，而无需重新编写所有内容。我的朋友告诉通过 VUE CLI 是可能的，但是因为我没有找到关于这种方式的文档或文章，所以我来问你。有没有人遇到过这种情况，如果有人可以随时告诉我您是如何将 VUE 项目迁移到 TypeScript 的。我的意思是所有当前用 js 编写的代码都被移动到打字稿中。

Answer 1

几周前，我刚刚尝试将一个 JS 项目转换为 TS。

对于已存在的@vue/cli 创建的项目，您只需vue add typescript在命令行中键入以添加 TypeScript 支持，这在https://cli.vuejs.org/core-plugins/typescript.html#installing-in-an- 中提到已经创建的项目。之后就可以在 TS 中编写 vue 代码了。

在 Vue 单文件组件中编写 TS 代码有两种方式：类样式或选项样式。我更喜欢第二种方式，因为我现有的所有代码都是在 options api 中编写的，而类 api 需要使用装饰器，这仍然是第 2 阶段的提议。

如果要将现有的 JS 编写的 Vue SFC 转换为 TS，只需添加lang="ts"如下<script>标签即可：

<script lang="ts">
</script>

并添加Vue.extends包装您的默认导出对象以支持 TS 中的类型提示。

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
});
</script>

之后你的代码可能无法通过类型检查，我找到了一些方法来修复一些经常发生的错误。

对于data选项中的道具，as XXType如果无法自动推断其类型，请添加以指定正确的类型：

data() {
    return {
        someArray: [] as string[], // if don't do this, the type of someArray is default never[], and throw errors when you try to push something into the array.
    };
},

对于props选项，添加as PropType<SomeType>以告诉 TS 此道具的类型（您应该为每个道具执行此操作）：

import { PropType } from 'vue';
// remember to import PropType from vue

props: {
    value: {
        type: Boolean as PropType<boolean>,
        required: true,
    },
},

另外，为您的计算值添加返回类型声明（如果需要，还有方法，我不知道什么时候应该为方法添加返回类型，但有时会出现一些错误......）：

computed: {
    someValue(): boolean {
        return !this.value;
    },
},

我认为在添加如上所述的类型符号后，您可以修复大多数类型错误并轻松通过类型检查。