vue.js - 解析错误：意外的标记 as。我如何在模板标签内使用 TypeScript 指定类型

我在 Vue 的 <template> 中使用 pug，控制台对我来说显示语法错误：

temp.vue：

<template lang="pug">
p {{ directions[directionName as keyof typeof directions] }}
</template>

<script lang="ts">
export default defineComponent({
  props: ["directionName"],
  setup() {
    enum directions {
      Left = "L",
      Right = "R",
      Up = "U",
      Down = "D",
    }

    return {
      directions
    }
  }
})
</script>

错误：

vue-router.esm-bundler.js:3325 SyntaxError: Unexpected identifier 'as' (at ...)

依赖项：

• vite: ^3.1.8
• vue: ^3.2.25
• pug: ^3.0.2
• @volar/vue-language-plugin-pug: ^1.0.9
• typescript: ~4.5.5
• vite-plugin-pug: ^0.3.1
• vue-tsc: ^1.0.9

我如何在 <template> 标签内进行类型转换？