What is the method for extracting a Vue instance from `defineComponent()` in Vue 3?

Question

What is the method for extracting a Vue instance from `defineComponent()` in Vue 3?

In Vue 3, it is now possible to write components 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>

I am curious about how to properly type the vue instance outside of the defineComponent function?

/// another ts file.
let modal:???; // what should be used in place of `???`?

modal.$props.foo // make correct inference for `$props.foo`

typescript vue.js

Answer 1

Answer №1

Learn how to leverage the InstanceType utility in TypeScript for extracting instance types

import Modal from './modal.vue'

type ModalInstance = InstanceType<typeof Modal>

type Foo = ModalInstance['$props']['foo']

https://i.sstatic.net/LC97S.png

Take a look at another example using a utility type:

import { AllowedComponentProps, Component, defineComponent, VNodeProps } from 'vue'

export type ExtractComponentProps<TComponent> =
  TComponent extends new () => {
    $props: infer P;
  }
    ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps>
    : never;
  
const TestComponent = defineComponent({
  props: {
    disabled: {
      type: Boolean,
    },
  },
});
  
type Props = ExtractComponentProps<typeof TestComponent>

// type Props = {
//   disabled?: boolean | undefined;
// }

Answer 2

Learn how to leverage the InstanceType utility in TypeScript for extracting instance types

import Modal from './modal.vue'

type ModalInstance = InstanceType<typeof Modal>

type Foo = ModalInstance['$props']['foo']

https://i.sstatic.net/LC97S.png

Take a look at another example using a utility type:

import { AllowedComponentProps, Component, defineComponent, VNodeProps } from 'vue'

export type ExtractComponentProps<TComponent> =
  TComponent extends new () => {
    $props: infer P;
  }
    ? Omit<P, keyof VNodeProps | keyof AllowedComponentProps>
    : never;
  
const TestComponent = defineComponent({
  props: {
    disabled: {
      type: Boolean,
    },
  },
});
  
type Props = ExtractComponentProps<typeof TestComponent>

// type Props = {
//   disabled?: boolean | undefined;
// }

Answer 3

Answer №2

The solution I initially thought of was to use

ReturnType<typeof defineComponent>

, but it lacked the necessary type information. Delving into how ReturnType could work with a generic method led me down a Stack Overflow rabbit hole that intrigued me.

Upon further investigation, I discovered that Vue offers an exported type called ComponentPublicInstance which can be easily utilized. This ComponentPublicInstance also has various generic parameters.

import { ComponentPublicInstance } from 'vue';

let instance: ComponentPublicInstance<{ prop: string }, { value: string }>;

Answer 4

The solution I initially thought of was to use

ReturnType<typeof defineComponent>

, but it lacked the necessary type information. Delving into how ReturnType could work with a generic method led me down a Stack Overflow rabbit hole that intrigued me.

Upon further investigation, I discovered that Vue offers an exported type called ComponentPublicInstance which can be easily utilized. This ComponentPublicInstance also has various generic parameters.

import { ComponentPublicInstance } from 'vue';

let instance: ComponentPublicInstance<{ prop: string }, { value: string }>;

What is the method for extracting a Vue instance from `defineComponent()` in Vue 3?

Answer №1

Answer №2

Similar questions

Enforcing alias types in TypeScript arguments is necessary for maintaining consistency and clarity

Attempting to assign various arrays based on a specific value but encountering an issue: it seems there may be an infinite update loop within the component's render function

Encountering a Typescript error while attempting to convert a JavaScript file to Typescript within an Express

How can I display the values stored in an array of objects in Angular 2

How can we efficiently determine if any of the keys in an array of objects contains a value that is present in another array of arrays object?

Array objects will be filtered based on a separate array within the data

Finding the ID of the element that was clicked with strict typing

Styling Components with MUI and Harnessing the Power of TypeScript

Inheritance within classes is ineffective

Encountering a discord bot malfunction while on my Ubuntu server

Error message indicating absence of content on faraway server while utilizing Axios baseURL feature

Generate an array with an extra attribute included

Changing the Redux state within a custom hook will not trigger a re-render

Using angular2-google-maps in conjunction with an Angular2 application

Should I choose JavaScript or TypeScript for Angular 2.0?

Apologies, but the module '@vue/babel-preset-app' could not be located

Ways to resolve the issue of incompatible parameters 'action' types in JavaScript

Testing React Hook Form always returns false for the "isValid" property

Connecting Multiple Relationships with Many-To-Many Matches

Tips for postponing 'not found' error until the data has finished loading in Vue.js