How to more explicitly declare a variable than via const?

Question

I have a component (NoteComponent) that emits note-not-saved. This message is handled via

<template>
(...)
    <NoteComponent @note-not-saved='() => noteNotSaved=true' />
(...)
</template>

noteNotSaved itself is defined in my <script> section:

<script setup lang='ts'>
(...)
  const noteNotSaved = ref(false)
(...)
</script>

The application works fine, I have however a weak warning from my IDE (JetBrains GoLand or WebStorm)

Variable noteNotSaved implicitly declared

What does that exactly mean? How can noteNotSaved be more explicitly declared than that?

Answer 1

The IDE may consider noteNotSaved=true as an implicit declaration of a global variable.

Try changing its value as follows:

const { createApp, ref } = Vue;

const NoteComponent = {
  template: `<button @click="$emit('note-not-saved')">Click</button>`
};

const App = {
  components: { NoteComponent },
  setup() {
    const noteNotSaved = ref(false);
    const setNoteAsNotSaved = () => {
      noteNotSaved.value = true;
    }
    return { noteNotSaved, setNoteAsNotSaved };
  }
};

createApp(App).mount("#myApp");

<script src="//unpkg.com/vue@next"></script>

<div id="myApp">
  <div><note-component @note-not-saved="setNoteAsNotSaved" /></div>
  <div><p>Note Not Saved: {{noteNotSaved}}</p></div>
</div>