Skip to content
This repository has been archived by the owner on Nov 16, 2023. It is now read-only.

Getting IntelliSense from props #8

Closed
Outpox opened this issue May 13, 2017 · 5 comments
Closed

Getting IntelliSense from props #8

Outpox opened this issue May 13, 2017 · 5 comments

Comments

@Outpox
Copy link

Outpox commented May 13, 2017

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
Copy link
Member

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
Copy link
Author

Outpox commented May 13, 2017

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 👍

@octref
Copy link

octref commented May 13, 2017

Working on it at vuejs/vetur#145. Probably will take a while.

@Outpox
Copy link
Author

Outpox commented May 13, 2017

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

Should I close the issue?

@octref
Copy link

octref commented May 13, 2017

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

@Outpox Outpox closed this as completed May 13, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants