templateInterpolationService && reflect-metadata Error

[nuochong]

• I have searched through existing issues
• I have read through docs
• I have read FAQ
• I have tried restarting VS Code or running Vetur: Restart VLS

Info

• Platform: Win
• Vetur version:0.31.3
• VS Code version:1.52.1

Problem

Reproducible Case

If you'd like to set type property of each prop value from its type definition, you can use reflect-metadata.

1. Set emitDecoratorMetadata to true.
2. Import reflect-metadata before importing vue-property-decorator (importing reflect-metadata is needed just once.)

import 'reflect-metadata'
import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class MyComponent extends Vue {
  @Prop() age!: number
}

vue-property-decorator docs

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
  @Prop() msg!: number;
  mounted() {
    console.log('mounted');
  }
}

"vetur.experimental.templateInterpolationService": true,

vetur

(property) __vlsComponentData__hello_world<Record<string, any>>.props: {
    [other: string]: any;
    msg: any;
}

console

vue.runtime.esm.js?2b0e:619 [Vue warn]: Invalid prop: type check failed for prop "msg". Expected Number with value 4444, got String with value "4444".

found in

---> <HelloWorld> at src/components/HelloWorld.vue
       <Home> at src/views/Home.vue
         <App> at src/App.vue
           <Root>

expect msg:number
actual msg:any

tsconfig

{
  "compilerOptions": {
    "target": "ES5",
    "module": "es2015",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "emitDecoratorMetadata":true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

{
  "dependencies": {
    "core-js": "^3.6.5",
    "reflect-metadata": "^0.1.13",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^6.1.0",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "typescript": "~3.9.3",
    "vue-template-compiler": "^2.6.11"
  }
}