Extend typescript definition for global properties

[kevcodez]

I initialized a fresh app with VIte + Typescript. It contains the vue-shims.d.ts. It contains

declare module "*.vue" {
    import { defineComponent } from "vue";
    const Component: ReturnType<typeof defineComponent>;
    export default Component;
}

Defined a new global property in the main.ts file.

app.config.globalProperties.$foo = "bar"

Now I want to let Typescript know this global property exists:

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $foo: string;
    }
}

The build now fails:

src/vue-shims.d.ts:5:15 - error 2305: Module '"../node_modules/vue/dist/vue"' has no exported member 'defineComponent'.
 
  declare module "*.vue" {
      import { defineComponent } from "vue";
               ~~~~~~~~~~~~~~~
      const Component: ReturnType<typeof defineComponent>;
      export default Component;

Could anyone help me with this? How do I define additional global properties without messing with the included vue-shims?

[kevcodez]

Fixed by moving to separate file and exporting an empty object.

export {}

declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        $foo: string;
    }
}

Also see https://stackoverflow.com/questions/63999118/how-to-declare-typescript-type-interface-for-custom-meta-fields-in-vue-router-v4