Vue-next: Property 'xxx' does not exist on type 'ComponentPublicInstance'

[weishijun14]

Version

"vue": "^3.0.0"
"eslint": "^6.7.2"
"typescript": "~3.9.3"
vue-cli@latest

Reproduction link

Steps to reproduce

import { defineComponent, PropType } from "vue";

interface ComplexMessage {
  title: string;
  okMessage: string;
  cancelMessage: string;
}

const BarCharts = defineComponent({
  setup() {},
  props: {
    message: {
      type: Object as PropType<ComplexMessage>,
      required: true,
      validator(message: ComplexMessage) {
        return !!message.title;
      }
    }
  },
  data() {
    return {};
  },
  created() {
    console.log(this.message); // ts2339
  },
  render() {
    return <div>1</div>;
  }
});

export default BarCharts;

What is expected?

No ts warning

What is actually happening?

ts warning show:

Property 'message' does not exist on type 'ComponentPublicInstance<Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; concat?: string[] | undefined; join?: string | undefined; ... 17 more ...; flat?: unknown[] | undefined; }> | Readonly<...>, ... 8 more ..., ComponentOptionsB...'.
  Property 'message' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Readonly<{ [x: number]: string; } & { length?: number | undefined; toString?: string | undefined; toLocaleString?: string | undefined; ... 19 more ...; flat?: unknown[] | undefined; }> | Readonly<...>; ... 10 more ...; $watch(source: string | Function, cb: Function,...'.ts(2339)

---

file name: BarCharts.tsx,
use vscode vetur@latest.

[weishijun14]

[weishijun14]

This is fine.

but : https://v3.vuejs.org/guide/component-props.html#prop-validation

[Zcating]

You should use arrow function while using validator or default attr. #2474

[littlesmilelove]

You should use arrow function while using validator or default attr. #2474

This answer is correct.

[ravenclaw900]

I'm having the same problem, but with data instead of props. I don't have any validators or anything like that, and it works just fine when using javascript.

<script lang="ts">
export default {
  data() {
    return {
      platform: "x86_64"
    };
  },
  computed: {
    showMachines() {
      return this.platform === "arm" || this.platform === "aarch64"; // Error here, on platform
    },
    showAarch64() {
      return this.platform === "aarch64"; // Here too, same place
    }
  }
};
</script>

[LinusBorg]

1. use defineComponent() to let TS know you are actually defining a Vue component
2. try annotating the return values of the computed's:

showMachines(): boolean {

For more help, please use chat.vuejs.org