Vue 3 / Typescript：模板变量中的“找不到名称”答案

【问题标题】：Vue 3 / Typescript: "Cannot find name" in template variableVue 3 / Typescript：模板变量中的“找不到名称”
【发布时间】：2021-11-07 04:53:28
【问题描述】：

在 Vue 3 / Typescript 中，我收到以下错误：

“找不到名称”，在将数据变量引用到 ... 区域时。

我该如何解决这个问题？

请看附件截图。

非常感谢。

【问题讨论】：

您好！我也遇到了同样的问题，你找到解决办法了吗？
您使用的是 Volar 还是 Vetur？

标签： typescript vue.js vuejs3

【解决方案1】：

当我将 lang="ts" 添加到 vue 文件时，我遇到了类似的问题，因为我是 Vue 3 和 Typescript 的新手。我通过确保以下内容解决了这个问题：

export default

到

export default defineComponent({

在您的 .vue 文件中。

确保添加导入。

import { defineComponent }

您的数据也应该驻留在设置中。

setup () {
  return {
    loader: false,
    error: false,
    firstTime: false

【讨论】：

该应用使用的是 Options API 而不是 Composition API，目前无法升级/更改为 Composition API。 export default defineComponent({ 已经存在了。

【解决方案2】：

Composition API 极大地帮助解决了这个问题。在 Options API 中似乎没有处理该问题的明确路径。

在 Options API 中处理问题的一种方法：

创建一个与您正在使用的组件相对应的 MyComponent.d.ts 文件，并在该文件中添加以下内容：

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    myTroublesomeVariable: boolean // change here
  }
}

【讨论】：

【解决方案3】：

我有同样的问题。

检查 VSCode/TS 和 Volar 后找不到解决方案。

创建了微小的复制品（想在 Discord 中发布）：

<template>
  <input v-model="email" />
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  const email = ref('')
</script>

在我将此文件保存为Test.vue 后，其他文件中的错误消失了。对不起，但我不知道为什么......

【讨论】：

【解决方案4】：

我不知道你是否还有这个错误，但是，我也有这个。我通过修复一个静默的 TS 错误来修复它。当我修复了这个错误后，一切都恢复正常了。

编辑：我发现了我的错误。我在 *.d.ts 文件中放置了一个枚举，并且我在文件中使用了这个枚举，这给了我和你一样的错误。问题是枚举不能在 *.d.ts 文件中，因为它之后没有在 JS 中编译，并且您丢失了枚举的值。通过修复此错误，我不再显示错误。我的意思并不是说你的问题有一个简单的解决方案，而是可能像我一样，你有一个隐藏并导致这些错误的静默错误！

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
不是“解决”问题的好方法。组合 API 极大地帮助解决了这个问题。在 Options API 中似乎没有明确的方法来处理该问题。
@iknowmagic 我发现了我的错误。我在 *.d.ts 文件中放置了一个枚举，并且我在文件中使用了这个枚举，这给了我和你一样的错误。问题是枚举不能在 *.d.ts 文件中，因为它之后没有在 JS 中编译，并且您丢失了枚举的值。通过修复此错误，我不再显示错误。我的意思并不是说你的问题有一个简单的解决方案，而是可能和我一样，你有一个隐藏并导致这些错误的静默错误！

【解决方案5】：

您在<script lang="ts"> 中缺少setup，所以应该是：

<script setup lang="ts">

来自文档：

使用<script setup> 时，内部声明的任何顶级绑定（包括变量、函数声明和导入）都可以直接在模板中使用（...）

https://v3.vuejs.org/api/sfc-script-setup.html#top-level-bindings-are-exposed-to-template

【讨论】：

不，SFC语法不同：v3.vuejs.org/api/sfc-script-setup.html如果你使用这个synthax，你没有defineComponent，keys：props，data，components...你可以在vuejs3中使用vuejs2 synthax TS 组件。
仅适用于组合 API。