How to extend component options type definition?

[b12k]

🖖🏻 Hello

I want to ask how to extend component options definition the right way?
I want to add a custom static method to the component, lets name it fetch.
This method would have an interface like fetch(store: Store): void.

In the type definitions of vue and its internals I found:

/**
 * Interface for declaring custom options.
 *
 * @example
 * ```ts
 * declare module '@vue/runtime-core' {
 *   interface ComponentCustomOptions {
 *     beforeRouteUpdate?(
 *       to: Route,
 *       from: Route,
 *       next: () => void
 *     ): void
 *   }
 * }
 * ```
 */
export declare interface ComponentCustomOptions {
}

My shims-vue.d.ts looks like:

declare module '*.vue' {
  import type { DefineComponent } from 'vue';

  const component: DefineComponent<
    Record<string, unknown>,
    Record<string, unknown>,
    unknown
  >;
  export default component;
}

When I'm adding declare module '@vue/runtime-core' ...

import type { Store } from './store'; 

declare module '@vue/runtime-core' {
  interface ComponentCustomOptions {
    fetch(store: Store): void;
  }
}

declare module '*.vue' {
  import type { DefineComponent } from 'vue';

  const component: DefineComponent<
    Record<string, unknown>,
    Record<string, unknown>,
    unknown
  >;
  export default component;
}

I'm getting and error TS2305: Module '"vue"' has no exported member 'DefineComponent'..

Can someone, please, advice me how to do it the right way?

Thank you in advance!

[tony19]

First, you should use declare module "vue" instead of declare module "@vue/runtime-core". The latter doesn't work properly in Vite projects.

You could move your module augmentation to its own .d.ts, and this works in projects scaffolded either by Vue CLI or Vite:

// my-custom-options.d.ts
import { Store } from "./store"

declare module "vue" {
  interface ComponentCustomOptions {
    fetch?(store: Store): void
  }
}

// shims-vue.d.ts
declare module "*.vue" {
  import type { DefineComponent } from "vue"
  const component: DefineComponent<{}, {}, any>
  export default component
}

[b12k]

Hmm. If I do it like suggested i'm starting getting errors on import { createSSRApp } from 'vue';

[tony19]

Can you share a link to a reproduction?

I cannot reproduce that problem:

[LinusBorg]

https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties

In order to take advantage of module augmentation, you will need to ensure the augmentation is placed in a TypeScript module. That is to say, the file needs to contain at least one top-level import or export, even if it is just export {}. If the augmentation is placed outside of a module, it will overwrite the original types rather than augmenting them!