"as" TypeScript keyword yields error within Vue template

[serhez]

Prettier 2.5.1
Playground link

# Options:
--parser vue
--embedded-language-formatting auto
--single-quote
--tab-width 4
--print-width 120

Input:

<template>
<p v-if="isFolder(file)">{{ (file as mymodule.Folder).deadline }}</p>      
</template>

<script lang="ts">
</script>

<script setup lang="ts">
</script>

<style scoped lang="scss">
</style>

Output:

SyntaxError: Unexpected token, expected "," (1:8)
> 1 |  (file as mymodule.Folder).deadline 
    |        ^

Expected behavior:
prettier should recognise TypeScript patterns such as the as keyword within Vue templates. I believe this issue has to do with the --embedded-language-formatting system not being able to parse the keyword, as when this option is set off the error is not given; however, setting this option off is not a suitable solution as it is quite useful.

[fisker]

Any reference that this is allowed in Vue SFC?

[serhez]

@fisker I don't know about any Vue doc covering this specific use case, so official support on this is unknown to me. However, AFAIK Vue 3 fully supports TypeScript and the as keyword is part of the language. Furthermore, my app runs just fine with a bunch of as keywords in the templates, including an identical example to the one given above (which is not the same as Vue officially supporting it, which is what you are asking, but still).

For more context, prettier not only throws an error with the {{ }} syntax, but also with things like:

<p v-if="isFolder(file as mymodule.Folder)">test</p>

[serhez]

@fisker never mind, it is officially supported. Here you have an example in the official docs.

[fisker]

Thank you.

[serhez]

To add a bit more context: using the as keyword within the <script> section does work fine, so the bug is only happening with embedded TS within templates.

[fisker]

We need to update the vue expression parser to allow typescript syntax, luckily we have babel-ts, so we don't need use typescript parser.

Original posted prettier/plugin-pug#365 (comment)

That's a related issue from plugin.