[FIXED] How to annotate types in the template?

Issue

<template>
                 👇 Parameter 'el' implicitly has an 'any' type. -->
  <v-table :ref="el => (table.ref = el)"></v-table>
</template>

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

  export default defineComponent({
    setup() {
      return {
        table: ref({
          ref: null,
        }),
      }
    },
  })
</script>

Solution

Update: it is now supported.

---

Seems TypeScript support in the template is not available yet, quote from Vue's author Evan You:

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.

Reference: Support TypeScript in vue template

Answered By - Wenfang Du

Answer Checked By - David Goodson (PHPFixing Volunteer)