VueJS TypeScript：如何在模板块忽略TypeScript错误？

• 针对单个模板元素/表达式的忽略
  如果你使用Volar（Vue官方推荐的IDE工具），可以在存在错误的模板元素上方添加<!-- @ts-ignore -->注释，忽略该元素的TypeScript检查：

  <template>
    <!-- @ts-ignore -->
    <div>{{ variableWithTypeError }}</div>
  
    <!-- @ts-ignore -->
    <CustomComponent :invalid-prop="someValue" />
  </template>
  

  注意：该注释需要紧邻目标元素，且需保持Volar版本较新（确保支持模板TS注释功能）。

• 将模板表达式移至脚本处理
  把模板中引发错误的复杂表达式转移到<script setup>里，通过计算属性或方法处理，再在脚本中用// @ts-ignore或类型断言消除错误，模板直接使用处理后的变量：

  <script setup lang="ts">
  import { ref, computed } from 'vue'
  const rawValue = ref<number | null>(null)
  
  // @ts-ignore 忽略脚本中的类型错误
  const displayValue = computed(() => rawValue.value!.toUpperCase())
  </script>
  
  <template>
    <div>{{ displayValue }}</div> <!-- 模板无类型错误 -->
  </template>
  

• 使用类型断言修正模板类型
  对于模板中绑定的属性或变量，直接在模板内使用类型断言（通过as关键字）修正类型，消除TS错误：

  <template>
    <div>{{ (rawValue as string).toUpperCase() }}</div>
    <CustomComponent :prop="someValue as TargetType" />
  </template>
  

• 全局关闭模板严格检查（不推荐）
  如果需要临时全局关闭模板的TypeScript严格检查，可以在tsconfig.json中修改vueCompilerOptions：

  {
    "compilerOptions": { /* ... */ },
    "vueCompilerOptions": {
      "strictTemplates": false,
      "ignoreTsErrors": true
    }
  }
  

  注意：此方法会关闭所有模板的TS检查，可能隐藏潜在问题，仅建议在特殊场景下临时使用。

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