Vue Pug模板中使用TypeScript类型断言报错，如何实现模板内类型转换？

问题原因 #

模板中的表达式是运行时执行的JavaScript代码，TypeScript的as类型断言属于编译时语法，无法在模板环境中直接解析，因此会触发Unexpected identifier 'as'的语法错误。

解决方案 #

方案1：在setup中处理类型转换（推荐）

将类型断言和逻辑处理移至<script>的TS代码中，把最终结果暴露给模板使用，既保证类型安全，又避免模板语法错误：

修改后的<script>部分：

import { defineComponent, computed } from 'vue'

export default defineComponent({
  props: {
    directionName: {
      type: String,
      required: true,
      // 添加入参验证，确保传入的directionName是合法枚举键
      validator: (val: string) => ['Left', 'Right', 'Up', 'Down'].includes(val)
    }
  },
  setup(props) {
    enum directions {
      Left = "L",
      Right = "R",
      Up = "U",
      Down = "D",
    }

    // 通过计算属性处理类型断言和取值
    const directionValue = computed(() => {
      return directions[props.directionName as keyof typeof directions]
    })

    return {
      directionValue
    }
  }
})

对应的Pug模板：

p {{ directionValue }}

方案2：模板中使用运行时安全取值

如果需要直接在模板中取值，可通过运行时判断避免错误（需提前确保directionName是合法键，或添加兜底逻辑）：

p {{ directions[directionName] || '未知方向' }}

关键说明 #

Vue模板不支持TypeScript的编译时语法（如as类型断言、类型注解等），所有模板表达式最终都会被编译为原生JavaScript执行，因此类型相关的处理必须放在TS代码中完成。

内容的提问来源于stack exchange，提问作者wayne