Subscribe on changes!

interface merging `ComponentCustomProperties` cause type error

avatar
Jan 28th 2022

Version

3.2.29

Reproduction link

codesandbox.io

Steps to reproduce

I was reading https://v3.vuejs.org/guide/typescript-support.html#augmenting-types-for-globalproperties

I tried this:

import axios from 'axios'

declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $http: typeof axios
    $validate: (data: object, rule: object) => boolean
  }
}

but the code below will show an error if I have the above code

Module '"../../node_modules/vue/dist/vue"' has no exported member 'defineComponent'.Vetur(2305)

import { defineComponent } from "vue";

you can confirm the error at here

What is expected?

x

What is actually happening?

x


x

avatar
Jan 28th 2022

Please read the yellow warning box at the end of that example in the docs again.

Either move the code into a .ts file that does contain some imports or exports or do this in the .d.ts file:

export {};

declare module "vue" {
  export interface ComponentCustomProperties {
    $accessor: boolean;
  }
}