Soy bastante nuevo en mecanografiado. Ahora, configuré la aplicación nuxt (puente con mecanografiado) y creé un componente llamado menuIcon como tal;
<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>Está funcionando en el navegador, pero veo el siguiente error en mi terminal.
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 | };Aparentemente es algo relacionado con escribir, pero no estoy seguro de cómo solucionarlo. Agradecería mucho que alguien me arrojara luz sobre los problemas. Gracias por adelantado.
La definición del componente debe declararse con defineComponent de Vue para habilitar la compatibilidad con TypeScript . Nuxt Bridge recomienda usar defineComponent desde la importación de #app , aunque también puede importarlo desde @vue/composition-api . Es preferible usar el alias #app porque incluye tipos específicos de Nuxt de @nuxtjs/composition-api .
Ejemplo :
<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> El alias #app normalmente se configura en .nuxt/tsconfig.json , pero descubrí que es necesario volver a declararlo en tsconfig.json de la aplicación raíz para que funcione en VS Code:
{ "extends": "./.nuxt/tsconfig.json", "compilerOptions": { "paths": { ⋮ "#app": [ "node_modules/@nuxt/bridge/dist/runtime/index" ], } } }