How to migrate VUE JS project to TypeScript [closed]

Question

i was wondering, i there any way a VUE JS project written in JavaScript to be moved to TypeScript without re-writing everything. Friend of mine told it was possible via the VUE CLI, but because i didn't found a doc or some article about this way, i came to ask you. Did someone experienced this, and if there is someone feel free to tell me how you moved your VUE project to TypeScript. I mean all of the current code written in js to be moved to typescript.

Answer 1

I just tried to transform a JS project into TS a few weeks ago.

For an existed @vue/cli created project, you could just type vue add typescript in command line to add TypeScript support, which is mentioned in https://cli.vuejs.org/core-plugins/typescript.html#installing-in-an-already-created-project. After that you could write vue codes in TS.

There are two ways to write TS codes in Vue single file components: in class style or in options style. I prefer the second way because all my existed codes were written in options api, and the class api requires usage of decorators which is still a stage 2 proposal.

If you want to transform an existed Vue SFC written in JS into TS, you could just add lang="ts" in the <script> tag like this:

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

And add Vue.extends to wrap your default exported object to support type hints in TS.

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

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

After that your codes may not pass the type checks, and I found some ways to fix some frequently happened errors.

For props in data options, add as XXType to specify the correct type if the type of which couldn't be infered automatically:

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.
    };
},

For props options, add as PropType<SomeType> to tell TS the type of this prop(you should do this for every prop):

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

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

Also, add return type declarations for your computed values(and methods if needed, I don't know when I should add return types for methods but sometimes there were some errors...):

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

I think after adding type notations as mentioned above, you could fix most type errors and easilly pass type checks.