As you know, as of Vue 3, component could be written in TypeScript:
/// modal.vue
<template>
<div class="modal"></div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "Modal",
props: {
foo: String,
bar: String
},
mounted() {
this.$props.foo // how to type `this` out of this context?
}
});
</script>
My question is how can I type the vue instance out of the defineComponent
function?
/// another ts file.
let modal:???; // what the `???` should be?
modal.$props.foo // infer `$props.foo` correctly
defineComponent({ setup: function , name: 'some name' }); As you see, all these cases are responsible for different scenarios, yet the return type is always the same: a defineComponent interface with all the types you need to apply for the props, data and the other settings that are needed for the component.
You need to bind the value into the component and then emit a new value to the parent when you click a link. If you emit the event input and bind the value value , then you can use v-model .
The "simple" answer I was going to give was to use ReturnType<typeof defineComponent>
however that doesn't carry any of the type information. As I started to look at how ReturnType
could be used with a generic method I fell down stackoverflow rabbit hole where these seemed like something to explore
However after looking at it, vue has an exported type ComponentPublicInstance
that can be used fairly easily. ComponentPublicInstance
also has handful of different generic parameters.
import { ComponentPublicInstance } from 'vue';
let instance: ComponentPublicInstance<{ prop: string }, { value: string }>;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With