microsoft / TypeScript-Vue-Starter

A starter template for TypeScript and Vue with a detailed README describing how to use the two together.
MIT License
4.45k stars 592 forks source link

Getting IntelliSense from props #8

Closed Outpox closed 7 years ago

Outpox commented 7 years ago

Hello, I've been struggling with getting completion on props given by a parent component in .vue files.

<template>
    <div>
        {{myClass}}
    </div>
</template>

<script lang="ts">
import Vue from "vue";
import { TestClass } from '../types/TestClass'; // TestClass interface in a .d.ts

export default Vue.extend({
    props: ['testClass'],
    mounted() {
        console.log(this.testClass);
    }
});
</script>

My goal is to have autocompletion inside the template on the myClass object of type TestClass. So I'm trying to find a way to type my variable.

Here's what I've tried until now:

Using a computed property which return the type I want. No IntelliSense.

export default Vue.extend({
    computed: {
        myClass(): TestClass {
            return this.testClass;
        }
    }
)}

image

Creating a new variable in data which copy the initial value. No IntelliSense.

export default Vue.extend({
    data() {
        return {
            myClass: <TestClass> this.testClass
        }
    }
)}

Change props declaration to be able to specify the type. error TS2693: 'TestClass' only refers to a type, but is being used as a value here.

export default Vue.extend({
    props: {
        testClass: TestClass
    },
)}

Obviously the same error when trying to set the type property

export default Vue.extend({
    props: {
        testClass: {
            type: TestClass
        }
    },
)}

I feel like I'm just hitting a wall because this is not supported, which is kind of a bummer because I wanted the power of TypeScript combined with Vue.
I may have missed something or I'm just doing it wrong, if anyone have an idea please share :)

DanielRosenwasser commented 7 years ago

Unfortunately this is expected at the moment. This is just something the Vetur plugin may not yet support. Our team is willing to help the community where we can, but it's definitely no small task. CCing @octref.

Outpox commented 7 years ago

Alright thanks for the quick answer, I can keep on working without worrying to much.
Thanks for your work, there was really no struggle to setup my project by following your tutorial :+1:

octref commented 7 years ago

Working on it at https://github.com/octref/vetur/issues/145. Probably will take a while.

Outpox commented 7 years ago

Thanks @octref, I'm following the issue on your repo :)

Should I close the issue?

octref commented 7 years ago

Yea you can close it since this is an editor support issue. Nothing this repo could do on its side.