TypeScript + Vue 3 - ReferenceError：未定義變量

Question

我在<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>

Answer 1

我認為這里不需要declare ，它實際上告訴 TypeScript 編譯器flik已經在其他地方聲明（例如，它是全局的）。

只需將類型斷言用作any ：

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