From 4d753d9549777fef73b160e13bc07c0f81a1cec6 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Thu, 23 Nov 2023 08:11:01 +0000
Subject: [PATCH 1/8] docs: typescript advanced

---
 .vitepress/config.ts                    |  6 +-
 src/api/general.md                      |  4 +-
 src/api/utility-types.md                | 18 +++++
 src/guide/typescript/advanced.md        | 99 +++++++++++++++++++++++++
 src/guide/typescript/composition-api.md |  5 +-
 5 files changed, 128 insertions(+), 4 deletions(-)
 create mode 100644 src/guide/typescript/advanced.md

diff --git a/.vitepress/config.ts b/.vitepress/config.ts
index 7be2308b6f..849f092646 100644
--- a/.vitepress/config.ts
+++ b/.vitepress/config.ts
@@ -286,6 +286,10 @@ export const sidebar: ThemeConfig['sidebar'] = {
         {
           text: 'TS with Options API',
           link: '/guide/typescript/options-api'
+        },
+        {
+          text: 'Typescript: Advanced',
+          link: '/guide/typescript/advanced'
         }
       ]
     },
@@ -700,7 +704,7 @@ export default defineConfigWithTheme<ThemeConfig>({
   markdown: {
     config(md) {
       md.use(headerPlugin)
-        // .use(textAdPlugin)
+      // .use(textAdPlugin)
     }
   },
 
diff --git a/src/api/general.md b/src/api/general.md
index 80eec455f9..51ed7c25ed 100644
--- a/src/api/general.md
+++ b/src/api/general.md
@@ -124,9 +124,11 @@ A type helper for defining a Vue component with type inference.
   You can extract the instance type of a component (equivalent to the type of `this` in its options) from the return type of `defineComponent()` like this:
 
   ```ts
+  import { ComponentInstance } from 'vue'
+  
   const Foo = defineComponent(/* ... */)
 
-  type FooInstance = InstanceType<typeof Foo>
+  type FooInstance = ComponentInstance<typeof Foo>
   ```
 
   ### Function Signature <sup class="vt-badge" data-text="3.3+" /> {#function-signature}
diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index d91655a631..c90dfd7727 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -104,6 +104,24 @@ Extract prop types from a runtime props options object. The extracted types are
   // }
   ```
 
+## ComponentInstance {#componentinstance}
+
+Used to extract the instance type of a component (equivalent to the type of `this` in its options).
+
+- **Example**
+
+```vue
+<script setup lang="ts">
+import { ComponentInstance } from 'vue'
+import Foo from './Foo.vue'
+
+const fooEl = ref<null | ComponentInstance<typeof Foo>>(null)
+</script>
+<template>
+  <Foo ref="fooEl" />
+</template>
+```
+
 ## ComponentCustomProperties {#componentcustomproperties}
 
 Used to augment the component instance type to support custom global properties.
diff --git a/src/guide/typescript/advanced.md b/src/guide/typescript/advanced.md
new file mode 100644
index 0000000000..0f0b03ff45
--- /dev/null
+++ b/src/guide/typescript/advanced.md
@@ -0,0 +1,99 @@
+# Typescript: advanced
+
+> This page assumes you've already read the overview on [Using Vue with TypeScript](./overview), Essentials and Components in-Depth.
+>
+
+## Components
+
+Components are hard to fully understand, even when reading the source-code or looking for examples. This section will explain more advanced topics and some use cases for some of the API's.
+
+### What's a component in typescript?
+
+> For what's a component please check [Components Basics](./../essentials/component-basics)
+
+For the examples we will be using [defineComponent](./../../api/general.html#definecomponent), it makes it easier to explain, same concepts are valid for [Single-File Components](./../../guide/scaling-up/sfc).
+
+```ts
+const Comp = defineComponent({
+  /* ... */
+})
+```
+
+In terms of typing Vue components are mainly composed by 3 parts:
+
+#### Options
+
+Used to declare the component's `props`, `emits`, `slots`, etc.
+
+```ts
+defineComponent({
+  props: {
+    msg: String
+  },
+  emits: {
+    clicked: (msg: string) => true
+  },
+  methods: {
+    onClick() {
+      this.$emit('clicked', this.msg)
+    }
+  }
+})
+```
+
+#### Instance
+
+Component's context (`this`) and retuned by [ComponentInstance](./../../api/utility-types#componentinstance)
+
+```ts
+const Comp = defineComponent({
+  props: {
+    msg: String
+  },
+  emits: {
+    clicked: (msg: string) => true
+  },
+  methods: {
+    onClick() {
+      // this.msg is typed as string
+      this.$emit('clicked', this.msg)
+    }
+  }
+})
+
+const compEl = ref<InstanceType<typeof Comp>>()
+
+compEl.value.msg //string
+compEl.value.onClick // function
+```
+
+### Render
+
+Contract to render the component, eg: `props` and `slots`.
+
+In this example we will use [h](../../api/render-function.md);
+
+```ts
+const Comp = defineComponent({
+  props: {
+    msg: String
+  },
+  emits: {
+    clicked: (msg: string) => true
+  },
+  methods: {
+    onClick() {
+      // this.msg is typed as string
+      this.$emit('clicked', this.msg)
+    }
+  }
+})
+
+// the second argument is the render contract.
+h(Comp, {
+  msg: 'hello',
+  onClick: () => {
+    // button clicked
+  }
+})
+```
diff --git a/src/guide/typescript/composition-api.md b/src/guide/typescript/composition-api.md
index 65b94a58d1..e8c8c2fc86 100644
--- a/src/guide/typescript/composition-api.md
+++ b/src/guide/typescript/composition-api.md
@@ -374,14 +374,15 @@ defineExpose({
 </script>
 ```
 
-In order to get the instance type of `MyModal`, we need to first get its type via `typeof`, then use TypeScript's built-in `InstanceType` utility to extract its instance type:
+In order to get the instance type of `MyModal`, we need to first get its type via `typeof`, then use Vue provided `ComponentInstance` utility to extract its instance type:
 
 ```vue{5}
 <!-- App.vue -->
 <script setup lang="ts">
+import { ComponentInstance } from 'vue'
 import MyModal from './MyModal.vue'
 
-const modal = ref<InstanceType<typeof MyModal> | null>(null)
+const modal = ref<ComponentInstance<typeof MyModal> | null>(null)
 
 const openModal = () => {
   modal.value?.open()

From d06d4b810edf404289038a4967ab38a55381c600 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Thu, 23 Nov 2023 17:11:42 +0000
Subject: [PATCH 2/8] added more

---
 src/api/utility-types.md         | 167 +++++++++++++++++++++++++++++++
 src/guide/typescript/advanced.md |  48 ++++++++-
 2 files changed, 211 insertions(+), 4 deletions(-)

diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index c90dfd7727..cada9951d3 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -225,3 +225,170 @@ SFC `<style>` tags support linking CSS values to dynamic component state using t
 
 - [v-bind() in CSS](/api/sfc-css-features#v-bind-in-css)
   :::
+
+## DeclareComponent {#declarecomponent}
+
+More user friendly way to generate or extend `DefineComponent` type.
+
+:::warning
+Note that you must define the properties, using `DeclareComponent` is just
+typescript, it will fail at runtime.
+:::
+
+- **Validator Example**
+
+```ts
+type Validator<T> = { value: T; validate(): boolean }
+declare function generateComponent<
+  T extends Record<string, Validator<any>>
+>(schema: T): DeclareComponent<{ [K in keyof T]: T[K]['value'] }>
+
+generateComponent({
+  test: {
+    value: 'test',
+    validate: () => true
+  }
+}).props.test // { type: String, required: true}
+```
+
+- **HoC Example**
+
+```ts
+declare function extendAsHTMLElement<T extends DefineComponent>(
+  options: T
+): T & DeclareComponent<HTMLAttributes>
+
+extendAsHTMLElement(
+  defineComponent({
+    setup:
+      (_, { attrs }) =>
+      () =>
+        h('input', attrs)
+  })
+).props.about // { type: String, required: false}
+```
+
+## ExtractComponentOptions\<T> {#extractcomponentoptions}
+
+Extracts component declared options.
+
+```ts
+const Comp = defineComponent({
+  props: {
+    foo: String
+  }
+})
+const options = {} as ExtractComponentOptions<typeof Comp>
+options.props // { foo: StringConstructor }
+```
+
+## ExtractComponentPropOptions\<T> {#extractcomponentpropoptions}
+
+Extracts the component props as the component was created, or the props from the ComponentPublicInstance.
+
+```ts
+const Comp = defineComponent({
+  props: {
+    foo: String
+  }
+})
+const props = {} as ExtractComponentPropOptions<typeof Comp>
+props.foo // StringConstructor
+```
+
+## ExtractComponentSlotOptions\<T> {#extractcomponentslotoptions}
+
+Extracts the component slots as the component was created.
+
+```ts
+const Comp = defineComponent({
+  slots: {} as SlotsType<{
+    foo: (bar: string) => any
+    baz: (bar: number) => any
+  }>
+})
+const slots = {} as ExtractComponentSlotOptions<typeof Comp>
+slots // SlotsType<{ foo: (bar: string) => any; baz: (bar: number) => any; }>
+```
+
+## ExtractComponentEmitOptions\<T> {#extractcomponentemitoptions}
+
+Extracts the component emits as the component was created.
+
+```ts
+const Comp = defineComponent({
+  emits: {
+    foo: (test: string) => true
+  }
+})
+const emits = {} as ExtractComponentEmitOptions<typeof Comp>
+emits.foo // (test: string) => true
+```
+
+## ObjectToComponentProps\<T> {#objecttocomponentprops}
+
+Converts an Record<string, any> into a props definition like object.
+
+Useful for extending component props.
+
+```ts
+
+```
+
+## ComponentEmitsAsProps\<T> {#componentemitsasprops}
+
+Converts `Emit` declaration into `props` declaration.
+
+```ts
+
+```
+
+## ComponentProps\<T> {#componentprops}
+
+Returns runtime props for a component.
+
+```ts
+const Comp = defineComponent({
+  props: {
+    foo: String
+  }
+})
+const props = {} as ComponentProps<typeof Comp>
+props.foo // string | undefined
+```
+
+## ComponentSlots\<T> {#componentslots}
+
+Returns runtime slots for a component.
+
+```ts
+
+```
+
+## ComponentEmit\<T> {#componentemit}
+
+Returns the `emit` function from options.
+
+```ts
+
+```
+
+## ComponentData\<T> {#componentdata}
+
+Returns the component bindings from `data` and `setup`.
+
+```ts
+
+```
+
+## DeclareComponent {#declarecomponent}
+
+More user friendly way to generate or extend `DefineComponent` type.
+
+:::warning
+This is only typescript, might fail at runtime, if you don't define the properties.
+:::
+
+```ts
+
+```
diff --git a/src/guide/typescript/advanced.md b/src/guide/typescript/advanced.md
index 0f0b03ff45..e210876b9a 100644
--- a/src/guide/typescript/advanced.md
+++ b/src/guide/typescript/advanced.md
@@ -1,7 +1,6 @@
 # Typescript: advanced
 
 > This page assumes you've already read the overview on [Using Vue with TypeScript](./overview), Essentials and Components in-Depth.
->
 
 ## Components
 
@@ -23,7 +22,7 @@ In terms of typing Vue components are mainly composed by 3 parts:
 
 #### Options
 
-Used to declare the component's `props`, `emits`, `slots`, etc.
+Used to declare the component's `props`, `emits`, `slots`, etc. It can also be a `function`.
 
 ```ts
 defineComponent({
@@ -43,7 +42,7 @@ defineComponent({
 
 #### Instance
 
-Component's context (`this`) and retuned by [ComponentInstance](./../../api/utility-types#componentinstance)
+[ComponentPublicInstance](../../api/component-instance.md), retuned by [ComponentInstance](./../../api/utility-types#componentinstance),
 
 ```ts
 const Comp = defineComponent({
@@ -67,7 +66,7 @@ compEl.value.msg //string
 compEl.value.onClick // function
 ```
 
-### Render
+#### Render
 
 Contract to render the component, eg: `props` and `slots`.
 
@@ -97,3 +96,44 @@ h(Comp, {
   }
 })
 ```
+
+#### Differences
+
+`Instance` and `Render` are pretty much the same, the main difference being `Instance` will set
+`$props` with `default` properties as **not** `optional`, while `Render` will set `default` `$props` as optional.
+
+```ts
+const Comp = defineComponent({
+  props: {
+    foo: {
+      type: String,
+      default: 'foo'
+    }
+  },
+  render() {
+    this.$props.foo
+  }
+})
+
+// valid because foo=string | undefined
+;<Comp foo={undefined}></Comp>
+```
+
+### defineComponent Advanced
+
+[defineComponent](./../../api/general.html#definecomponent), will accept component `Options` + `Instance` and return `Render` + `Options`.
+
+If you check the [defineComponent source-code](https://github.com/vuejs/core/blob/main/packages/runtime-core/src/apiDefineComponent.ts), you'll find there's a lot of generics and overloads, the reason for this is to make the API as flexible as possible, since Vue is very flexible in terms of declarations.
+
+#### Generics parameters
+
+`DefineComponent` generic order is pretty stable, but it's not guaranteed to be the same in future versions, so it's recommended to use [DeclareComponent](./../../api/utility-types.html#declarecomponent) instead.
+
+```ts
+
+
+
+### DefineComponent
+
+Returned from [defineComponent](./../../api/general.html#definecomponent),
+```

From 1110ded70f6768389f86a1a13bf88edb21024afc Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Thu, 23 Nov 2023 17:13:34 +0000
Subject: [PATCH 3/8] set unique

---
 src/api/utility-types.md | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index cada9951d3..32a0332b97 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -380,15 +380,3 @@ Returns the component bindings from `data` and `setup`.
 ```ts
 
 ```
-
-## DeclareComponent {#declarecomponent}
-
-More user friendly way to generate or extend `DefineComponent` type.
-
-:::warning
-This is only typescript, might fail at runtime, if you don't define the properties.
-:::
-
-```ts
-
-```

From a1ed4842d14fc61d63b7848f0d67c6fc1cd739f4 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Thu, 23 Nov 2023 17:48:09 +0000
Subject: [PATCH 4/8] Added generic example

---
 src/api/utility-types.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index 32a0332b97..6671fe29f6 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -268,6 +268,41 @@ extendAsHTMLElement(
 ).props.about // { type: String, required: false}
 ```
 
+- **Generic Example**
+
+You don't necessarily need to you `DeclareComponent`, but you can.
+
+> Is necessary to use `new<...>{ $props: { ... } }` for Generic components.
+
+```ts
+type ErrorLevel = 'debug' | 'warning' | 'error'
+
+declare function ErrorComponent<T>(options: T): T &
+  DeclareComponent<{
+    new <T extends ErrorLevel = 'debug'>(): {
+      $props: { type: T } & {
+        [K in `on${Capitalize<T>}`]: (msg: string) => void
+      }
+      $slots: SlotsType<Record<T, (msg: string) => any[]>>
+    }
+  }>
+
+const Comp = ErrorComponent(
+  defineComponent({
+    props: {
+      type: {
+        type: String as () => ErrorLevel,
+        default: 'debug'
+      }
+    },
+    emits: ['debug', 'warning', 'error']
+  })
+)
+;<Comp type="debug" onDebug={() => {}} />
+// @ts-expect-error onError is not there
+;<Comp type="debug" onError={(v) => {}} />
+```
+
 ## ExtractComponentOptions\<T> {#extractcomponentoptions}
 
 Extracts component declared options.

From 82a564b838f617a2b4c06ad53872b9a0bafe4da1 Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Thu, 30 Nov 2023 08:43:27 +0000
Subject: [PATCH 5/8] changes

---
 src/api/utility-types.md         | 71 ++++++++++++++++++++++++++++++--
 src/guide/typescript/advanced.md |  8 ++++
 2 files changed, 76 insertions(+), 3 deletions(-)

diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index 6671fe29f6..550a4c8f06 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -272,20 +272,18 @@ extendAsHTMLElement(
 
 You don't necessarily need to you `DeclareComponent`, but you can.
 
-> Is necessary to use `new<...>{ $props: { ... } }` for Generic components.
+> Is necessary to use `new<...>{ $props: { ... } }` for Generic components, using type helpers with Generic params might break generic types.
 
 ```ts
 type ErrorLevel = 'debug' | 'warning' | 'error'
 
 declare function ErrorComponent<T>(options: T): T &
-  DeclareComponent<{
     new <T extends ErrorLevel = 'debug'>(): {
       $props: { type: T } & {
         [K in `on${Capitalize<T>}`]: (msg: string) => void
       }
       $slots: SlotsType<Record<T, (msg: string) => any[]>>
     }
-  }>
 
 const Comp = ErrorComponent(
   defineComponent({
@@ -415,3 +413,70 @@ Returns the component bindings from `data` and `setup`.
 ```ts
 
 ```
+
+## DefineComponentOptions & DefineComponentFromOptions {#definecomponentoptions}
+
+Allows to get vue component options and generate `DefineComponent` type.
+
+:::warning
+The generic order is not prone to change, but it might, `Options` should be the last generic used, new generics will be added before `Options`.
+:::
+
+:::info
+Note that you if you need to handle generics, it should be it's own overload, since
+any change to the Generic definition might break the Generic type.
+:::
+
+```ts
+declare function defineComponentWithDefaults<
+  Props = never,
+  RawBindings = {},
+  D = {},
+  C extends ComputedOptions = {},
+  M extends MethodOptions = {},
+  Mixin extends ComponentOptionsMixin = ComponentOptionsMixin,
+  Extends extends ComponentOptionsMixin = ComponentOptionsMixin,
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  I extends ComponentInjectOptions = {},
+  II extends string = string,
+  S extends SlotsType = {},
+  Options extends {} = {}
+>(
+  options: DefineComponentOptions<
+    Props,
+    RawBindings,
+    D,
+    C,
+    M,
+    Mixin,
+    Extends,
+    E,
+    EE,
+    I,
+    II,
+    S,
+    Options
+  >,
+  defaults: Partial<
+    [Props] extends [string]
+      ? { [K in Props]?: any }
+      : ExtractPropTypes<Props>
+  >
+): DefineComponentFromOptions<
+  undefined extends Props ? {} : Props,
+  RawBindings,
+  D,
+  C,
+  M,
+  Mixin,
+  Extends,
+  E,
+  EE,
+  I,
+  II,
+  S,
+  Options
+>
+```
+
diff --git a/src/guide/typescript/advanced.md b/src/guide/typescript/advanced.md
index e210876b9a..5add90374b 100644
--- a/src/guide/typescript/advanced.md
+++ b/src/guide/typescript/advanced.md
@@ -137,3 +137,11 @@ If you check the [defineComponent source-code](https://github.com/vuejs/core/blo
 
 Returned from [defineComponent](./../../api/general.html#definecomponent),
 ```
+
+
+### Bespoke `defineComponent`
+
+Vue options are very hard to get the type hard, sometimes `defineComponent` is not enough and creating a bespoke `defineComponent` can be useful for some more advance cases, such as [@vue/test-utils](https://test-utils.vuejs.org/) [mount](https://test-utils.vuejs.org/api/#mount) method.
+
+
+http://localhost:5173/api/utility-types.html#definecomponentoptions
\ No newline at end of file

From 281a75cac9e29d4830fc030ca3c402ea7e83c35c Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Sun, 31 Dec 2023 09:53:14 +0000
Subject: [PATCH 6/8] added remaining utility types docs

---
 src/api/utility-types.md | 49 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/api/utility-types.md b/src/api/utility-types.md
index 550a4c8f06..94896f96a1 100644
--- a/src/api/utility-types.md
+++ b/src/api/utility-types.md
@@ -365,15 +365,27 @@ Converts an Record<string, any> into a props definition like object.
 Useful for extending component props.
 
 ```ts
-
+const props: ObjectToComponentProps<{ foo: 'bar' | 'baz', baz?: number }>
+ // props is:
+ {
+   foo: {
+    type: Prop<'bar' | 'baz'>,
+    required: true
+   },
+   baz: {
+    type: Prop<number>,
+    required: false
+   }
+ }
 ```
 
 ## ComponentEmitsAsProps\<T> {#componentemitsasprops}
 
-Converts `Emit` declaration into `props` declaration.
+Converts `Emit` declaration into `props` declaration, returned object will be optional.
 
 ```ts
-
+declare const emit: ComponentEmitsAsProps<{ emits: { foo: () => true } }>
+emit.onFoo?.() // ok
 ```
 
 ## ComponentProps\<T> {#componentprops}
@@ -395,7 +407,14 @@ props.foo // string | undefined
 Returns runtime slots for a component.
 
 ```ts
+const Comp = defineComponent({
+  slots: {} as SlotsType<{
+    default: (arg: { msg: string }) => any
+  }>
+})
 
+const slots = {} as ComponentSlots<typeof Comp>
+slots.default // { arg: { msg: string } } => any
 ```
 
 ## ComponentEmit\<T> {#componentemit}
@@ -403,7 +422,14 @@ Returns runtime slots for a component.
 Returns the `emit` function from options.
 
 ```ts
+const CompSlotsTyped = defineComponent({
+  emits: {
+    foo: (arg: string) => true
+  }
+})
 
+const emit = {} as ComponentEmit<typeof CompSlotsTyped>
+emit // (event: 'foo', arg: string) => void
 ```
 
 ## ComponentData\<T> {#componentdata}
@@ -411,7 +437,23 @@ Returns the `emit` function from options.
 Returns the component bindings from `data` and `setup`.
 
 ```ts
+const Comp = defineComponent({
+  data() {
+    return {
+      foo: 'string'
+    }
+  },
+
+  setup(props, ctx) {
+    return {
+      bar: 42
+    }
+  }
+})
 
+const data = {} as ComponentData<typeof Comp>
+data.foo // string
+data.bar // number
 ```
 
 ## DefineComponentOptions & DefineComponentFromOptions {#definecomponentoptions}
@@ -479,4 +521,3 @@ declare function defineComponentWithDefaults<
   Options
 >
 ```
-

From 9d4abd222732abfd9d1821e8e625e6c478f1c7ed Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Tue, 2 Jan 2024 08:51:55 +0000
Subject: [PATCH 7/8] wrapping up advanced

---
 src/guide/typescript/advanced.md | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/guide/typescript/advanced.md b/src/guide/typescript/advanced.md
index 5add90374b..5fb199b47e 100644
--- a/src/guide/typescript/advanced.md
+++ b/src/guide/typescript/advanced.md
@@ -127,21 +127,14 @@ If you check the [defineComponent source-code](https://github.com/vuejs/core/blo
 
 #### Generics parameters
 
-`DefineComponent` generic order is pretty stable, but it's not guaranteed to be the same in future versions, so it's recommended to use [DeclareComponent](./../../api/utility-types.html#declarecomponent) instead.
-
-```ts
-
-
+`DefineComponent` generic order is pretty stable, but it's not guaranteed to be the same in future versions, the reason is because it needs to support the full Vue behavior (eg: Mixins/Extends), so it's recommended to use the more stable helper [DeclareComponent](./../../api/utility-types.html#declarecomponent) instead.
 
 ### DefineComponent
 
-Returned from [defineComponent](./../../api/general.html#definecomponent),
-```
-
+Returned from [defineComponent](./../../api/general.html#definecomponent), has [Options](#options), [Render](#render) and [Instance](#instance) information about the component.
 
 ### Bespoke `defineComponent`
 
-Vue options are very hard to get the type hard, sometimes `defineComponent` is not enough and creating a bespoke `defineComponent` can be useful for some more advance cases, such as [@vue/test-utils](https://test-utils.vuejs.org/) [mount](https://test-utils.vuejs.org/api/#mount) method.
-
+Vue options are very hard to get the correct type, sometimes `defineComponent` is not enough and creating a bespoke `defineComponent` can be useful for some more advance cases, such as [@vue/test-utils](https://test-utils.vuejs.org/) [mount](https://test-utils.vuejs.org/api/#mount) method.
 
-http://localhost:5173/api/utility-types.html#definecomponentoptions
\ No newline at end of file
+For that use case we recommend using the utilities [DefineComponentOptions & DefineComponentFromOptions](../../api//utility-types.md#definecomponentoptions).

From 0bb3c2e277f81f7da0d13c3ff5717f8a1e552e4b Mon Sep 17 00:00:00 2001
From: Carlos Rodrigues <carlos@hypermob.co.uk>
Date: Tue, 2 Jan 2024 09:47:02 +0000
Subject: [PATCH 8/8] added explanation on defineComponent generics

---
 src/guide/typescript/advanced.md | 38 ++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/src/guide/typescript/advanced.md b/src/guide/typescript/advanced.md
index 5fb199b47e..b640550601 100644
--- a/src/guide/typescript/advanced.md
+++ b/src/guide/typescript/advanced.md
@@ -129,6 +129,44 @@ If you check the [defineComponent source-code](https://github.com/vuejs/core/blo
 
 `DefineComponent` generic order is pretty stable, but it's not guaranteed to be the same in future versions, the reason is because it needs to support the full Vue behavior (eg: Mixins/Extends), so it's recommended to use the more stable helper [DeclareComponent](./../../api/utility-types.html#declarecomponent) instead.
 
+```ts
+type DefineComponent<
+  PropsOrPropOptions = any,
+  RawBindings = any,
+  D = any,
+  C extends ComputedOptions = ComputedOptions,
+  M extends MethodOptions = MethodOptions,
+  Mixin extends ComponentOptionsMixin = {},
+  Extends extends ComponentOptionsMixin = {},
+  E extends EmitsOptions = {},
+  EE extends string = string,
+  PP = PublicProps,
+  Props = ResolveProps<PropsOrPropOptions, E>,
+  Defaults = ExtractDefaultPropTypes<PropsOrPropOptions>,
+  I extends ComponentInjectOptions = any,
+  II extends string = string,
+  S extends SlotsType = any,
+  Options extends Record<PropertyKey, any> = {},
+>
+```
+
+- `PropsOrPropOptions`: `Props` definition.
+- `RawBindings`: `setup` return type.
+- `D`: `data` return type.
+- `C`: `computed` object.
+- `M`: `methods` object.
+- `Mixin`: `mixins` union type `(MixinA | MixinB)[]`.
+- `Extends`: `extends` type.
+- `E`: `emits` object, if object declaration is used.
+- `EE`: `emits` string union type, if string is used.
+- `PP`: `PublicProps`, contains `class`, `style`, `VNode` specific props and [ComponentCustomProps](../../api/utility-types#componentcustomprops).
+- `Props`: Sanitised props, these are `PropsOrPropOptions` but with the resolved type.
+- `Defaults`: defaulted props
+- `I`: `inject` object, if object declaration is used.
+- `II`: `inject` string union type, if string is used.
+- `S`: `slots` object.
+- `Options`: Unaltered `Options` object used to define the component.
+
 ### DefineComponent
 
 Returned from [defineComponent](./../../api/general.html#definecomponent), has [Options](#options), [Render](#render) and [Instance](#instance) information about the component.