how to use components、props、computed、meteor with typescript

[Sven Wang]

I create an example project with typescript, but components、props、computed、meteor not work.
I pull the project to github：meteor-vue-typescript-example

Clone the repository, the code in imports/ui/layouts/App:

index.ts:

import Vue from 'vue';
import Component from 'vue-class-component';
import { Route } from 'vue-router';

import Dialog from '../Dialog';
import { Links } from '/imports/api/links';

@Component({
    components: { Dialog },
})
export default class extends Vue {
    // data
    transitionName: string = 'fade';
    dialogContent: string = 'dialog content';

    // computed not work
    get computedTransitionName() {
        console.log('computed', this.transitionName);

        return 'computed' + this.transitionName;
    };

    // meteor not work
    // meteor: {
    //     $subscribe: {
    //         'Links.list'() {
    //             return [];
    //         },
    //     },

    //     links() {
    //         return Links.find();
    //     }
    // },

    // events
    beforeCreate() {
        console.log('App beforeCreate');
    }

    created() {
        console.log('App created');
        // watch code
        this.$watch(
            '$route',
            (to: Route, from: Route) : void => {
                console.log('watch $route:', to, from);

            },
            { deep: true, immediate: true }
        );
    }

    beforeMount() {
        console.log('App beforeMount');
    }

    mounted() {
        console.log('App mounted');
    }

    beforeUpdate() {
        console.log('App beforeUpdate');
    }

    updated() {
        console.log('App updated');
    }

    activated() {
        console.log('App activated');
    }

    deactivated() {
        console.log('App deactivated');
    }

    beforeDestroy() {
        console.log('App beforeDestroy');
    }

    destroyed() {
        console.log('App destroyed');
    }

    // methods
};

index.vue:

<template>
    <div class="app">
        <transition :name="transitionName">
            <router-view class="child-view"></router-view>
        </transition>
        <!-- <div v-for="link in links" :key="link._id">{{ link.title }}</div> -->
        <!-- <Dialog :content="dialogContent"></Dialog> -->
    </div>
</template>

<style scoped lang="less" src="index.less">
</style>

<script lang="ts">
    import index from './index';
    export default index;
</script>

Can someone help me fix the bug? Thanks very much.

[Sven Wang]

I use vue-class-component and vue-property-decorator fixed this issue.
I updated the project: meteor-vue-typescript-example

Meteor.js + TypeScript + Vue.js + Vue-Router + Vuex

Name	Version
meteor	1.10.1
typescript	3.8.3
mongodb	4.2.1
node	12.16.1
npm	6.14.0
vue	2.6.11
vue-router	3.1.6
vuex	3.1.3