[Vue3][TypeScript][ESLint] Setup構文のpropsが"'props' is assigned a value but never used"になる

Question

コード

<script setup lang="ts">
type Props = {
  username: string;
  password: string;
};

type Emits = {
  (e: "username-change", value: string): void;
  (e: "password-change", value: string): void;
  (e: "click"): void;
};

const props = defineProps<Props>();

const emit = defineEmits<Emits>();

function handleUsernameChange(event: Event): void {
  if (!(event.target instanceof HTMLInputElement)) {
    return;
  }
  emit("username-change", event.target.value);
}

function handlePasswordChange(event: Event): void {
  if (!(event.target instanceof HTMLInputElement)) {
    return;
  }
  emit("password-change", event.target.value);
}

function handleClick(): void {
  emit("click");
}
</script>

<template>
  <v-container>
    <v-text-field
      :value="username"
      label="ユーザー名"
      @input="handleUsernameChange"
    ></v-text-field>
    <v-text-field
      :value="password"
      label="パスワード"
      type="password"
      @input="handlePasswordChange"
    ></v-text-field>
    <v-btn color="primary" @click="handleClick">ログイン</v-btn>
  </v-container>
</template>

事象

13行目のpropsが'props' is assigned a value but never used.eslint@typescript-eslint/no-unused-varsと怒られてしまいます。

補足

※ eslintrc.js内にてvue/script-setup-uses-varsは設定済みで、その他の変数や関数はnot usedが表示されなくなりましたが、typeとの噛み合わせが悪いのか(?)、propsのみ上記Lintエラーが出てしまいます。

// rules内
"vue/script-setup-uses-vars": "error"

Answer 1

では13行目を
「const props = 」の部分を取って、

defineProps<Props>();

だけにしてみたらどうでしょうか

Comments

[ivokarlovic]

こちらでうまく動作しました！ありがとうございます。

Answer 2

投稿者の補足

props.usernameのようにすれば一応Lintエラーが出なくなるのですが、これは書き方としてどうなのでしょうか。。。propsを用いているのが明示的で良い気もするのですが。。。

<v-text-field
      :value="props.username"
      label="ユーザー名"
      @input="handleUsernameChange"
    ></v-text-field>
    <v-text-field
      :value="props.password"
      label="パスワード"
      type="password"
      @input="handlePasswordChange"
    ></v-text-field>