Vue-next: Support TypeScript in vue template

[xiaoxiangmoe]

What problem does this feature solve?

Support TypeScript expression in template

What does the proposed API look like?

<template>
  <h1>{{ msg }}</h1>
  <button @click="(count as number)++">count is: {{ (count as number) +  1 }}</button>
  <p>
    Edit <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'HelloWorld',
  setup: (props: { readonly msg: string }) => {
    const { msg } = props;
    const count = ref(0 as unknown);
    return { msg, count };
  },
});
</script>

[pikax]

This will add quite more complexity to the template code, the solution for your problem would be better type inference in the template, with tools such as vetur and others.

[xiaoxiangmoe]

@pikax
I guess we are not talking about the same thing. I am using @vuedx, which has better vue 3 support and type inference than vetur. But I found that if we need to write more complex types, we need support ts expression in template.

[Eldar-X]

I am also dreaming about ts support in templates. For example it's my favorite part of angular especially when you have large and complex project and need to change something, you mostly don't look into templates, you just change script part and never know if your template part is broken :(

[CyberAP]

Vue supports runtime template compilation. Bringing support for TypeScript in templates would mean that you'll get different levels of template support for pre-compiled and post-compiled applications, which in result would complicate things for developers and maintainers. In the example above you could provide better type safety by using methods or computeds instead of inline expressions.

[yyx990803]

This is technically doable:

1. We use @babel/parser to parse inline expressions, which already comes with TypeScript support for free. I tested by adding typescript to the parser plugin list and your example compiles just fine.

2. We need to add a pass to strip type annotations, which can be done with esbuild so that will still be reasonably fast.

Obviously this won't work for the in-browser build, but runtime and build-time compilations already have different levels of support.

Still, I'll need to play with this and @vuedx to see whether the benefit justifies the extra cost.

[limingzhiguang]

I think use computed or methods

[phroggyy]

I think there is an alternate use case here which is usage of syntax that is in TS but not necessarily in the ES standard yet. Null coalescing and the elvis operator are both things I feel are missing.

However, I don't think a blanket "support TS in templates" might be the best solution. The ideal solution would be if we could pass expressions through the same build system as the script section, which would ensure you can use all the same features in templates as in the script. I'm not familiar with the template compiler and it seems like this might be problematic though.