时间戳

首页 > 解决方案 > 如何将 VUE JS 项目迁移到 TypeScript

javascript - 如何将 VUE JS 项目迁移到 TypeScript

问题描述

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

标签： javascripttypescriptvue.js

解决方案

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

对于已存在的 @vue/cli 创建的项目，您只需键入命令行即可添加 TypeScript 支持，这在https://cli.vuejs.org/core-plugins/typescript.html#installing-in-an-vue add typescript中有提到已经创建的项目。之后你可以在 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>

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

对于dataoptions 中的 props，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;
    },
},

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

推荐阅读