TypeScript + Vue 3 - ReferenceError：未定义变量答案

【问题标题】：TypeScript + Vue 3 - ReferenceError: variable is not definedTypeScript + Vue 3 - ReferenceError：未定义变量
【发布时间】：2021-09-12 05:04:40
【问题描述】：

我在<script> 的开头声明了一个变量类型为any，然后我在同一个<script> 的一个方法中引用了它。我的 IDE 完全没有抱怨，但令人惊讶的是，我在控制台中看到了运行时错误：ReferenceError: flik is not defined。

也许这与 Vue 生命周期中围绕变量实例化的竞争条件有关？这很令人困惑，因为我在其他地方使用类似的模式没有这个问题。我下面的代码有什么问题？

<script lang="ts">
import Flickity from "./widgets/Flickity.vue";

declare var flik: any

export default defineComponent({
  components: {
    Flickity
  },
  methods: {
    addElement() {
      flik = this.$refs.flickity    //ERROR HERE: flik is undefined
      flik.append(this.makeFlickityCell())
    },
    makeCell() {
      const cell = document.createElement('div');
      cell.className = 'carousel-cell'
      cell.textContent = "Hi"
      return cell
    }
  },
  mounted() {
    this.addElement()
  }
});
</script>

【问题讨论】：

标签： javascript typescript vue.js flickity vue-flickity

【解决方案1】：

我认为这里不需要 declare，它实际上告诉 TypeScript 编译器 flik 已经在其他地方声明（例如，它是一个全局变量）。

只需将type assertion 用作any：

(this.$refs.flickity as any).append(this.makeFlickityCell())

【讨论】：

嗯，尝试这种方法“有效”，但只会在这一行上导致不同的运行时错误：Cannot read property 'append' of undefined
很高兴它对你有用。新错误意味着模板 ref 不存在，并且超出了此问题的范围。请注意，该错误不是由 TypeScript 引起的。