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..94896f96a1 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.
@@ -207,3 +225,299 @@ 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}
+```
+
+- **Generic Example**
+
+You don't necessarily need to you `DeclareComponent`, but you can.
+
+> 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 &
+    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.
+
+```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
+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, returned object will be optional.
+
+```ts
+declare const emit: ComponentEmitsAsProps<{ emits: { foo: () => true } }>
+emit.onFoo?.() // ok
+```
+
+## 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
+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}
+
+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}
+
+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}
+
+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
new file mode 100644
index 0000000000..b640550601
--- /dev/null
+++ b/src/guide/typescript/advanced.md
@@ -0,0 +1,178 @@
+# 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. It can also be a `function`.
+
+```ts
+defineComponent({
+  props: {
+    msg: String
+  },
+  emits: {
+    clicked: (msg: string) => true
+  },
+  methods: {
+    onClick() {
+      this.$emit('clicked', this.msg)
+    }
+  }
+})
+```
+
+#### Instance
+
+[ComponentPublicInstance](../../api/component-instance.md), 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
+  }
+})
+```
+
+#### 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, 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.
+
+### Bespoke `defineComponent`
+
+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.
+
+For that use case we recommend using the utilities [DefineComponentOptions & DefineComponentFromOptions](../../api//utility-types.md#definecomponentoptions).
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()