Vue
What TypeScript type to use for a variable to contain a mounted Vue Component #13808
Replies: 2 comments 2 replies
-
|
Hi @ejohanson-vi3, try using The root cause is likely a TypeScript type conflict. You probably have two slightly different versions of Vue's types floating around in your
Your import { ComponentPublicInstance } from "vue"
export class MyClass {
private vueComponent: ComponentPublicInstance
public constructor(vueComponent: ComponentPublicInstance) {
this.vueComponent = vueComponent
}
}Hope it helps |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the suggestion. I actually did try this at one time, but now the problem is you can't access any custom methods or properties on your Vue component. So the following does not work (but did work when I was using InstanceType): File HomeView.vue: File MyClass.ts: When you try to do |
Beta Was this translation helpful? Give feedback.
-
|
You're right, 1. The Quick Fix: Intersection Type This is the fastest way to solve your direct problem. You just tell TypeScript that the object is a Vue instance and has your method. // in MyClass.ts
import { type ComponentPublicInstance } from "vue"
// Manually create a type that merges the two
type HomeViewInstance = ComponentPublicInstance & {
doSomething: () => void;
}
export class MyClass {
private vueComponent: HomeViewInstance
public constructor(vueComponent: HomeViewInstance) {
this.vueComponent = vueComponent
this.vueComponent.doSomething() // works now
}
}2. The Better Fix: This is the modern Vue 3 way to handle this if you absolutely must pass an instance. You use // HomeView.vue
<script setup lang="ts">
import { MyClass } from "@/MyClass"
import { onMounted, getCurrentInstance } from "vue"
const doSomething = () => { console.log("Hello World") }
// This is the key. You're defining the component's public type.
defineExpose({ doSomething })
const instance = getCurrentInstance()
onMounted(() => {
if (instance?.proxy) {
const myClass = new MyClass(instance.proxy as any) // `as any` is an annoying but sometimes necessary evil here
}
})
</script>Now your original 3. The Real Best Practice: Don't Pass Honestly, the So instead of // useMyLogic.ts
export function useMyLogic() {
const doSomething = () => {
console.log("Hello from a composable")
}
return { doSomething }
}Then your component just uses it. It's clean, totally decoupled, and has no type issues. // HomeView.vue
<script setup lang="ts">
import { useMyLogic } from "@/useMyLogic"
// Just grab the functions you need
const { doSomething } = useMyLogic()
// Call it whenever
doSomething()
</script>This is the way to go for anything new. It's easier to test, reuse, and reason about. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you so much for the reply-- this is very helpful. For this particular mobile app, option 3 is not really a good option. The reason is because the app is 99+% background processing written in native Java and C, and the other 0.5% of the app is the single Vue.JS page to provide a very simple single-page UI. There are over 10k lines of native Java/C code code, and about 200 lines of Vue.JS UI code. So, moving the entire expansive background processing logic into composable Vue functions so that it can invoke a few Vue component methods seems backward. It makes much more logical sense to add the one Vue.JS page to the main app, which is why I'm passing the Vue component as a parameter. Options 1 and 2 seem more like workarounds, as you said. I mean, if I'm going to use a TypeScript cast, then rather than casting to "any" I might as well cast to the InstanceType and be done with it, like this: File HomeView.vue: File MyClass.ts: |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
I need to pass a mounted Vue component to a TypeScript class method. The question is, what type do I use for the parameter? For a long time, I used "InstanceType" and it worked fine. But I've recently updated a lot of settings and versions, and now suddenly this type no longer works, but produces the error during TypeScript compilation:
It's very easy to reproduce this with the two source files shown below: A Vue.JS component file, and a TypeScript file. When viewing the Vue component file in the code editor, it shows the red underline error on the call to
new Myclass(this). And you get the error shown above when running "npm run build" on the project.File HomeView.vue:
File MyClass.ts:
So what is the correct TypeScript type to use to accept a Vue component as a parameter?
Beta Was this translation helpful? Give feedback.
All reactions