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-already-created-project中已提到。之后，您可以在TS中编写vue代码。

有两种方法可以在Vue单个文件组件中编写TS代码：类样式或选项样式。我喜欢第二种方式，因为我所有现有的代码都是用选项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;
    },
},

我认为在添加了上述类型符号后，您可以修复大多数类型错误和简单的通过类型检查。

如何将VUE JS项目迁移到TypeScript

1 个答案: