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())