In the TypeScript component, the error Property does not exist on type 'Vue'

Version

2.5.16

Reproduction link

https://codesandbox.io/s/github/weihongyu12/vue-typescript-demo

Steps to reproduce

Uses @vue/cli to build the project. The configuration uses TypeScript. However, in the process of using, in the methods, there is no access to the computed. The construction does not exist on type ‘Vue’.

<template>
  <ul
    v-if="show"
    class="picker">
    <li
      v-for="(item, index) of pickerList"
      :key="index">{{ item }}</li>
  </ul>
</template>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name : 'Picker',
  props: {
    columns: {
      type: Array,
      default: [],
    },
    show: {
      type: Boolean ,
      default: false,
    },
  },
  computed: {
    pickerList(): Array<string> {
      const arr = [];
      const columns: any = this.columns;
      for (const item of columns) {
        arr.push(item.title);
      }
      return arr;
    },
    pickerMap() : Map<string, number> {
      const map = new Map();
      const columns: any = this.columns;
      for (const item of columns) {
        map.set(item.title, item.id);
      }
      return map;
    },
  },
  methods: {
    onConfirm(value: string): void {
      const resumeId = this.pickerMap.get(value);  // Property 'pickerMap' does not exist on type 'Vue'.
      this.$emit('confirm', resumeId);
    },
  },
});
</script>

What is expected?

I don’t know if it’s because of my writing, or because of the configuration that caused me this error. I wrote the code based on the official document. I believe it can be build successfully.

What is actually happening?

When I run npm run build, an error Property ‘pickerMap’ does not exist on type ‘Vue’. The complete prompt is as follows:

ERROR in E:/project/demo/src/components/picker.vue
44:29 Property 'pickerMap' does not exist on type 'Vue'.
     42 | methods: {
     43 | onConfirm(value: string): void {
   > 44 | const resumeId = this.pickerMap.get(value);
        | ^
     45 | this.$emit('confirm', resumeId);
     46 | },
     47 | },

---

I do not know of any reason for this error. It is imperative that I have a friend to help me solve this error, but I hope that the official can speed up the improvement of TypeScript’s documentation, because I believe TypeScript will become popular. Thank you.

[weihongyu12]

Official documentation is really too little for TypeScript

[mediafreakch]

You can type Data, Methods, Computed and Props like this:

interface Props {
  columns: string[]
  show: boolean
}

interface Data {
  isVisible: boolean
}

interface Computed {
  pickerList: string[]
  pickerMap: Map<string, number>
}

interface Methods {
  onConfirm: (value: string) => void
}

export default Vue.extend<Data, Methods, Computed, Props>({
  methods: { ... },
  data() { ... },
  computed: { ... },
  props: { ... },
  render() { ... }
})

This way the Typescript errors should go away. Note that for the example above to work, you need to have props defined as an object, not in the props: [] syntax. For the latter, the type definition needs to be different.