属性 'x' 在类型"{toggle()：void}" 上不存在

Question

我对打字还是个新手。现在，我已经设置了next (bridge with typescript)应用程序，并创建了一个名为menuIcon的组件;

<div class="container">

<div class="menu-icon" :class="active ? 'change' : ''" @click="toggle">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div
class="overlay"
:class="active ? 'overlay-slide-right' : 'overlay-slide-left'"
@click="toggle"
id="overlay"
>
<!-- html contents here -->
</div>
</div>
</template>
<script lang="ts">

export default {
data(){
const active:boolean=false;
return{
active
}
},
methods: {
toggle():void{
this.active= !this.active
},
},
};
</script>
<style scoped>
/*css contents here*/
}
</style>

它可以在浏览器中工作，但我在终端中看到以下错误:

TS2339: Property 'active' does not exist on type '{ toggle(): void; }'.
41 |   methods: {
42 |     toggle():void{
> 43 |        this.active= !this.active
|             ^^^^^^
44 |     },
45 |   },
46 | };
ERROR in components/MenuIcon.vue:43:27
TS2339: Property 'active' does not exist on type '{ toggle(): void; }'.
41 |   methods: {
42 |     toggle():void{
> 43 |        this.active= !this.active
|                           ^^^^^^
44 |     },
45 |   },
46 | };

显然是关于打字的问题，但我不知道如何修复它。我将非常感谢任何人就这些问题向我说明。提前谢谢。

Answer 1

组件定义需要用Vue的defineComponent声明以启用TypeScript支持。next Bridge建议从#app导入中使用defineComponent，尽管您也可以从@vue/composition-api导入它。最好使用#app别名，因为它包含@nuxtjs/composition-api中的next特定类型。

示例:

<script lang="ts">
import { defineComponent } from '#app';
👇
export default defineComponent({
data() {
const active:boolean = false;
return {
active
}
},
methods: {
toggle(): void {
this.active = !this.active
},
},
});
</script>

#app别名通常在.nuxt/tsconfig.json中设置，但我发现有必要在根应用程序的tsconfig.json中重新声明它以在VS Code中工作:

{
"extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
"paths": {
⋮
"#app": [
"node_modules/@nuxt/bridge/dist/runtime/index"
],
}
}
}

演示