TypeScript + Vue 3 - ReferenceError: variable is not defined
TypeScript + Vue 3 - ReferenceError: variable is not defined
我在 <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>
我认为这里不需要 declare
,它实际上告诉 TypeScript 编译器 flik
已经在别处声明(例如,它是全局的)。
只需将 type assertion 用作 any
:
(this.$refs.flickity as any).append(this.makeFlickityCell())
我在 <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>
我认为这里不需要 declare
,它实际上告诉 TypeScript 编译器 flik
已经在别处声明(例如,它是全局的)。
只需将 type assertion 用作 any
:
(this.$refs.flickity as any).append(this.makeFlickityCell())