Typescript type safety in `<template>`

What problem does this feature solve?

When using typescript and the various helper libraries that help add types to components, you can get pretty robust type safety in the typescript code itself.

However, when actually using the properties of the component in the html template, the strict type safety is lost, and the only protection the developer has to ensure the safety of the template are the checks that the vue template compiler performs itself, or that various linters are able to make.

For a quick example of broken code:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- this line will cause a runtime error, rather than being caught -->
    <!-- <p>{{ msg.someFakeFunction() }}</p> -->

    <!-- let's say these are both supposed to be numbers, -->
    <!-- that are going to be added together "get sum() { return this.a + this.b }" -->
    <!-- this won't cause a runtime error, but it will be surprisingly wrong -->
    <Sum :a="4" b="wrong!" />
  </div>
</template>

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

@Component({ components: { Sum } })
export default class HelloWorld extends Vue {
  @Prop() readonly msg!: string;
}
</script>

It would be very nice if, when using typescript as the script language for the component, the template was also compiled into some sort of typescript representation. This would necessarily mean that any other components used in the template would need to be typed, or they would be implicitly any.

The existing system already compiles templates to javascript render functions, so it seems like this would be possible. It could be added in a backwards-compatible way if the change was opt-in. Even though this change would detect many broken templates sitting around in people’s code, they might not appreciate them no longer compiling.

Is the vue team is already working on something like this? Since vue 3 is being rewritten in typescript, you might already have this in the plan?

What does the proposed API look like?

There are two basic API additions I can think of that would allow people to opt in to this change:

• An entirely different template compiler, that would be passed to vue-loader. It would probably make sense to use the existing one under the hood, but I’m not sure. This option would require that vue-loader give the compiler enough information to know if it should output typescript or not.
• An option passed to the existing compiler, or to vue-loader as a whole. This could be as simple as something like generateTyped: boolean = false. The docs could explain that the template render functions will be typed only if the script alongside the template is also in typescript.

It seems this is at least somewhat on people’s minds. It would be nice to not have to roll hacky loaders like this one. Deeper type safety is always a nice thing to have for the people who are searching for it.

I haven’t looked deeply into what this might require, but I would be happy to contribute code to this if it’s a welcome addition. I would also be happy to come up with the final API additions after figuring out how any existing code would have to change.

Thanks!

[guslen]

Only adding this to Vetur, doesn’t seem like a good idea. Passing option to enable this to the vue-loader sounds a lot more widely usable. The vetur implementation will be an island… I don’t use Vetur and I don’t think it is in the best interest of the entire community to add such a crucial feature only for one tool and not the actual compiler/ compilation infrastructure… After all this is the main reason people choose typescript for type safety at compile time. Solving the problem with a linter or grammar check tool, sounds more like a hack…

[Blackfaded]

Are there any news on this?