With templateInterpolation, check that components are passed props with the correct types

[mikeyhew]

• I have searched through existing issues
• I have skimmed through docs
• I have read FAQ

Info

• Platform: macOS
• Vetur version: 0.22.6
• VS Code version: 1.40.1

Problem

Vetur's template interpolation feature is great, it typechecks the javascript expressions that appear in the <template> section of a single-file component. This includes the values passed to v-for and v-if, as well as the properties passed to other components.

There are two things missing though:

• it doesn't check that a components exists and is registered in the first place, and
• it doesn't check that the component receives all the required props, or that the values passed as props to the component have the right type for that prop.

I'm not sure what is required for this to work, and it may take a coordinated effort with the vue project to get access to components' types in the code that vetur generates. This is a necessary requirement though, for vetur templates to be just as type-safe as JSX.

Reproducible Case

<!-- ComponentA.vue -->
<template>
  <div>
    <p v-if="x > 5">{{ x }} is greater than 5</p>
    <p v-if="x === 5">{{ x }} is equal to 5</p>
    <p v-if="x < 5">{{ x }} is less than 5</p>
  </div>
</template>
<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    x: {
      type: Number,
      required: true,
    },
  },
});

<!-- ComponentB.vue -->
<template>
  <div>
    <!-- this should be an error, because `theNumber` is a string, and 
         `ComponentA` expects `x` to be a number -->
    <ComponentA :x="number" />
  </div>
</template>
<script lang=ts>
  import Vue from "vue";
  export default Vue.extend({
    data() {
      return {
        theNumber: "four",
      };
    },
  });
</script>

[ktsn]

We do plan to implement this feature. There are a few problem on the way though.

1. The current prop type is not accurate - it does not handle required option and won't appear on type level. It's already solved in Vue 3 implementation.
2. We need to collect component type and its registered name from components options.
3. How to deal with globally registered component?

[octref]

Tracked in #1596.