Update composition-api.md Typing Generic Component Template Refs

vuejs/language-tools#3206
vuejs · Sep 12, 2023 · cc65cb5 · cc65cb5
1 parent 7fe90c5
commit cc65cb5
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
@@ -397,3 +397,18 @@ import type { ComponentPublicInstance } from 'vue'
 
 const child = ref<ComponentPublicInstance | null>(null)
 ```
+
+If `MyModal` is a generic component, you should use `ComponentExposed` from the `vue-component-type-helpers` package instead of TypeScript's built-in `InstanceType` utility:
+
+```ts
+<script setup lang="ts">
+import MyModal from './MyModal.vue'
+import type { ComponentExposed } from 'vue-component-type-helpers'
+
+const modal = ref<ComponentExposed<typeof MyModal> | null>(null)
+
+const openModal = () => {
+  modal.value?.open()
+}
+</script>
+```