Свойство 'x' не существует для типа '{toggle():void}'

Question

Я новичок в машинописи. Теперь я установил приложение nuxt(мост с машинописным текстом) и создал компонент с именем 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

Поскольку Nuxt 3 использует Vue 3, определение компонента должно быть объявлено с помощью Vue defineComponentчтобы включить поддержку TypeScript :

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

В качестве альтернативы вы можете заменить <script> блок с <script setup> для более сжатого кода:

      <script setup lang="ts">
import { ref } from 'vue'
const active = ref(false)
const toggle = () => active.value = !active.value
</script>