javascript - TypeScript + Vue 3 - ReferenceError:未定义变量
问题描述
any
我在我的开头声明一个变量具有类型,<script>
然后我在同一个方法中引用它<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>
解决方案
我认为这里不需要declare
,它实际上告诉 TypeScript 编译器flik
已经在别处声明(例如,它是一个全局的)。
只需将类型断言用作any
:
(this.$refs.flickity as any).append(this.makeFlickityCell())
推荐阅读
- amazon-web-services - 如何防止 Alexa 模拟器在第一个问题之后使用“打开(调用词)”重新调用我的技能?
- node.js - 在 Express 中托管 React 应用程序会返回 ERR_CONTENT_DECODEDING_FAILED
- python - 使用 SQLAlchemy 时访问 after_insert 和 before_insert 事件挂钩中的关系
- regex - 未捕获可选组
- javascript - 通过 JQuery 填充后,HTML 选择不刷新
- unit-testing - 连接字段的 Apex 触发器的单元测试
- python - tkinter - 如何在框架中调整屏幕大小?
- javascript - 为什么 (true && 'string') 在 JS 中等于 'string' 而不是 true?
- apache-spark - Spark 中的 Apache 光束 StateSpec
- asp.net - 回发后如何留在同一个标签上