Type assertions in `<template>` are not stripped away with `<script lang="tsx">`

[DrJume]

Version

3.2.33

Reproduction link

https://stackblitz.com/edit/vue-issue-repro-5764?file=src/App.vue&terminal=dev

Steps to reproduce

1. Create a component with <script lang="tsx">.
2. Use a TypeScript type assertion as or : inside a prop binding in <template>.

What is expected?

TypeScript type assertions are compiled away as with <script lang="ts">.

What is actually happening?

Inside a Vue 3 SFC when using <script lang="tsx"> TS type assertions are not stripped away in the <template>, which leads to an 'Unexpected identifier' SyntaxError in the browser, because type assertion syntax is not valid JS.

[DrJume]

I am using <script lang="tsx"> because of a nice use case, where I am defining inline JSX Functional Components, which I can then use in the same .vue SFC and also export them for use in slots of the component.

[liulinboyi]

Only lang="ts" is supported for <script> blocks.

Example

[DrJume]

Yeah in the SFC Playground only lang="ts" is allowed, but in a local environment with Vite and plugin-vue and plugin-vue-jsx is it possible. It works also on StackBlitz (see repro above).

[DrJume]

[DrJume]

Here I am using a type assertion, because Vue does not currently support infered slot types, so I need to set them manually, as the current slot type is any.

[DrJume]

When using <script lang="ts"> everything is ok, because the TS Syntax is stripped away.

[liulinboyi]

Passing Slots

Example

App.vue

<!-- <script lang="ts" setup>  WORKS -->
<script lang="tsx">
import PersonComponent from './components/PersonComponent.vue';
import type { Person } from './types';
const myPerson: Person = {
  name: 'Mike',
  age: 58,
};

export default {
  components: {
    PersonComponent,
  },
  render() {
    return (
      <PersonComponent person={myPerson}>
        {{
          default: (data: any) => [
            `Name: ${JSON.stringify(data)}`,
            ,
            <br />,
            `Age: ${data.person.age}`,
          ],
        }}
      </PersonComponent>
    );
  },
};
</script>

[DrJume]

Thank you!

This is a good option, but I really like using the <template> syntax as it works with <script setup lang="tsx"> very nicely. Only thing which would need to be adressed is to strip away the TS syntax like it is done with <script setup lang="ts"> 👍

[liulinboyi]

Thank you!

This is a good option, but I really like using the <template> syntax as it works with <script setup lang="tsx"> very nicely. Only thing which would need to be adressed is to strip away the TS syntax like it is done with <script setup lang="ts"> 👍

You can take a cue from how naiveui use tsx.

[tazyong]

I also encountered this problem. This is a bug, yet 3 months have passed, and there is no intention to fix it. Very disappointed!

[liulinboyi]

I also encountered this problem. This is a bug, yet 3 months have passed, and there is no intention to fix it. Very disappointed!

Template and tsx should choose one for rendering

https://staging-cn.vuejs.org/guide/essentials/template-syntax.html
https://vuejs.org/guide/essentials/template-syntax.html

[richardtallent-erm]

I'm not sure if I should raise a separate issue or not. I'm seeing the same problem with a normal SFC (with TS enabled) and slots:

<NavList v-slot="{ item } as { item: IMenuModel }" :items="state.items">
    <div>{{ item.title }}</div>
</NavList>
...
<script setup lang="ts">
</script>

The above returns a Parsing error: ',' expected vue/no-parsing-error error from ESLint on the as keyword, suggesting the type assertion isn't stripped away properly.

The item slot variable within NavList has a type of IHasId, which IMenuModel extends. So, if I replace as with :, the ESLint error goes away, but I then get a TS error:

Type '{ item: IHasId; index: number; }' is not assignable to type '{ item: IMenuModel; }'.
Types of property 'item' are incompatible.`

The only workaround I've found is to cast item as any within NavList:

<slot :item="item as any" :index="index" />

This workaround works, but using as (or being able to have a generic prop on NavList!) would be cleaner.