Property 'X' does not exist on type CombinedVueInstance using TypeScript Prop Validator

[RehanSaeed]

Version

2.5.16

Reproduction link

https://codepen.io/muhammadrehansaeed/pen/XPWKyJ

Steps to reproduce

Use Typescript to build this component:

export default Vue.extend({
  props: {
    delay: {
      default: 600,
      type: Number,
      validator: function(value: number) {
        return value >= 0;
      }
    },
    minValue: {
      default: 0,
      type: Number
    }
  },
  data() {
    return {
      valueInternal: 0
    };
  },
  methods: {
    reset(): void {
      this.valueInternal = this.minValue; <----THIS LINE ERRORS
    }
  }
});

What is expected?

The component builds.

What is actually happening?

The following error is thrown:

Property 'minValue' does not exist on type 'CombinedVueInstance<Vue, { isVisibleInternal: boolean; valueInternal: number; }, { reset(): void; }, {}, Readonly<{}>>'.
methods: {
  reset(): void {
    this.valueInternal = this.minValue;
                                               ^
  }
}

If I remove the validator from the prop, the error goes away. If I remove the data section, the error also goes away.

[KaelWD]

Typescript bug? validator: (value: number) => value >= 0 also removes the error.

[RehanSaeed]

@KaelWD That works! But why?

[KaelWD]

¯\_(ツ)_/¯

They both have the same type signature, so no idea. I'd try to reproduce it without vue and open an issue on https://github.com/Microsoft/TypeScript

[pikax]

if you do

    delay: {
      default: 600,
      type: Number ,
      validator(value:number){
        return value >= 0;
      }
    } as PropOptions<number>

seems to be working, typescript seems not picking up the type

[alexsasharegan]

Ran into this issue yesterday and @pikax suggestion fixed this for me. I didn't know about PropOptions<Type>.

[danjohnso]

I had this happen with a Date prop. If I had just the type, it was ok:

 date: {
    type: Date
}

But when I added a default value, everything broke in the component:

 date: {
    type: Date,
    default: () => new Date()
}

Unless you cast the object like mentioned above:

 date: {
    type: Date,
    default: () => new Date()
} as PropOptions<Date>

For anyone googling the seemingly unrelated error, you will get this for every property in your component:

Property 'Name' does not exist on type 'CombinedVueInstance<Vue, object, object, object, Record<never, any>>' Vetur(2339)

[seyfer]

import {PropOptions} from 'vue';

 date: {
    type: Date,
    default: () => new Date()
} as PropOptions<Date>

leads to eslint error

  11:13  error  'PropOptions' is defined but never used  no-unused-vars

but I do not want to switch off no-unused-vars rule. what should I do?

parserOptions:
    parser: "@typescript-eslint/parser"
    ecmaVersion: 8
    sourceType: module

plugins:
    - "@typescript-eslint"

extends:
    - 'eslint:recommended'
    - 'plugin:vue/strongly-recommended'
    - 'plugin:@typescript-eslint/recommended'

[Suya1671]

import {PropOptions} from 'vue';

 date: {
    type: Date,
    default: () => new Date()
} as PropOptions<Date>

leads to eslint error

  11:13  error  'PropOptions' is defined but never used  no-unused-vars

but I do not want to switch off no-unused-vars rule. what should I do?

parserOptions:
    parser: "@typescript-eslint/parser"
    ecmaVersion: 8
    sourceType: module

plugins:
    - "@typescript-eslint"

extends:
    - 'eslint:recommended'
    - 'plugin:vue/strongly-recommended'
    - 'plugin:@typescript-eslint/recommended'

try import type its avalible on newer ts versions