reflect-metadata not working

[vertic4l]

We do have class components with props but the whole type checking part does not work.

Currently we have vue-class-component, vue-property-decorator + reflect-metadata with the flag set in tsconfig. But we could set any prop to some components and TypeScript won't complain about it.

How can we get this to work?

[stefusilviu]

Same here:

• TS 3.5.2
• vue-property-decorator 8.3.0
• reflect-metadata 0.1.13

[stefusilviu]

@vertic4l I solved this by importing reflect-metadata before everything else on the $root component (App.vue). It seems like you don't have to import on each component.

[kendallroth]

👍 I had the order reversed and was missing the emitDecoratorMetadata: true property in tsconfig.json, but everything worked as expected after!

[nuochong]

{
  "dependencies": {
    "core-js": "^3.6.5",
    "reflect-metadata": "^0.1.13",
    "vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.3.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"
  }
}

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

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

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld :msg="4444"/>
  </div>
</template>

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "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"
  ]
}

Expectation prompt msg:string
Practical tips msg:any