Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to get the type of a component in vuejs?

I am building a vuejs application in typescript. I want to make maximum use of the typings available.

Most of the time the typings and type inference just works fine.

In some pieces of code I would like to pass a reference to a specific component type. i.e.

const MyComponent = Vue.extend({...});

function myFunction(someComponent: MyComponent) {
    ...
}

This unfortunately results in the error:

'MyComponent' refers to a value, but is being used as a type here.

Something that works is this, where I create an instance and then use typeof of that instance in the function declaration:

const MyComponent = Vue.extend({...});

let myComponentInstance = new MyComponent();
function myFunction(someComponent: typeof myComponentInstance ) {
    ...
    someComponent.someProperty;
    ...
}

Is there a way to do this without having to create an instance of MyComponent? To me it feels like is should be possible as the knowledge is there.

Edit:

With the suggestion of @Bill-Naylor I got it down to this.

const MyComponent =  Vue.extend({
    data() {
        return {
            test: "test"
        }
    }
});

let dummy = () => new MyComponent();
export type MyComponentInstance = ReturnType<typeof dummy>

let test : MyComponentInstance;
let str = test.test;

Is it possible to get it down even more without the dummy function?

Edit2:

It is possible with InstanceType<...>.

This works:

const MyComponent =  Vue.extend({
    data() {
        return {
            test: "test"
        }
    }
});

export type MyComponentInstance = InstanceType<typeof MyComponent>

let test : MyComponentInstance;
let str = test.test;
like image 476
J. Vergeer Avatar asked Oct 21 '19 14:10

J. Vergeer


People also ask

What type is a Vue component?

Components are reusable Vue instances with custom HTML elements. Components can be reused as many times as you want or used in another component, making it a child component. Data, computed, watch, and methods can be used in a Vue component.

Can I use v-model on a component?

Using v-model on a custom component allows us to do both of these stops with one directive. value acts as our source of truth. We bind it to our child component to set the value of our input, and when our input changes - we update with value = $event - which sets value to the new value of our input.

What is $El in VueJS?

The $el option in Vue provides Vue with an existing HTML element to mount the Vue instance generated using the new keyword. this. $el. querySelector is used to access HTML elements and modify the element's properties. this.

What Vue use () does?

Vue. use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once. For the flag component, it declares a global component that you can refer within your components, such that in the following example will render correctly.


1 Answers

With the help of @BillNaylor who pointed me into the right direction I was able to find a solution.

I need to use InstanceType<...>

Example:

const MyComponent =  Vue.extend({
    data() {
        return {
            test: "test"
        }
    }
});

export type MyComponentInstance = InstanceType<typeof MyComponent>

let test : MyComponentInstance;
let str = test.test;
like image 136
J. Vergeer Avatar answered Oct 18 '22 18:10

J. Vergeer