インターフェース及び関数に指定可能な引数について

Question

こちら記事の下記コードで分からない箇所がありました為、お聞きしたいです

<script setup lang="ts">
interface Emits {
  (e: "input", value: string): void;
  (e: "update:value", value: string): void;
}

const emit = defineEmits<Emits>();

const handleInput = ({ target }: { target: HTMLInputElement }) => {
  emit("input", target.value);
  emit("update:value", target.value);
};
</script>

<template>
  <label>
    {{ label }}
    <input
      :class="disabledClass"
      :value="value"
      :type="type"
      :placeholder="placeholder"
      :disabled="disabled"
      @input="handleInput"
    />
  </label>
</template>

1点目ですが、interface Emits　に指定している(e: "input", value: string)こちらの部分が何を指しているかが分からないです。:横のvoidは戻り値(何も返さない)ことを指定しているとの認識おります。
2点目ですが、handleInput関数のemit()部分はemit関数の呼び出しだと理解しているのですが、({ target }: { target: HTMLInputElement })こちらの波括弧で括られた記法がどのような意味になるかが分からない状況です。

どなたかご助言頂けましたら幸いです

※追記です。
2点目につきましては、そもそもtargetやHTMLInputElementがどこから来たのかが不明な状況です

Answer 1

https://sbfl.net/blog/2019/08/26/javascript-bracketed-variables

Answer 2

(e: "input", value: string) こちらの部分が何を指しているかが分からない

関数の型ですね。Function Types

({ target }: { target: HTMLInputElement })こちらの波括弧で括られた記法

JavaScript の分割代入とTypeScriptの型指定です。呼び出し側が第一引数に指定したオブジェクトの target プロパティだけを取り出して、その型が HTMLInputElement です。

Comments

[ruuuu]

ご回答頂きまして、ありがとうございます。
重ね重ねのご質問となってしまい、大変恐縮なのですが、interfaceに指定の(e: "input", value: string)こちら箇所は名前がついていない関数が指定されているかと思いますが、この形では呼び出す際に２つの関数の内どちらが呼び出されるのか判断が付かないのではないかと思うのですが、どのようにして判断がなされいるかもしご存知でしたら教えて頂けましたら幸いです。

また、({ target }: { target: HTMLInputElement })　こちら部分では、「target」を２回使用しなくとも({ target }: HTMLInputElement )　の形の指定ではダメなのでしょうか。こちらにつきましてもお手数をおかけし申し訳ないですが、理由を教えて頂けましたらありがたいです。

[int32_t]

> ２つの関数の内どちらが呼び出されるのか判断が付かない

そうではなくて、この interface を持つと宣言されている変数に入っている関数はどちらの引数＆戻り型でもいいということです。
Vueは知らないので defineEmits がどういう意味なのかは私は知りませんが。

> の形の指定ではダメなのでしょうか。

試してみたらいいんじゃないでしょうか。

[ruuuu]

>そうではなくて、この interface を持つと宣言されている変数に入っている関数はどちらの引数＆戻り型でもいいということです。
ありがとうございます
こちら、そういった仕組みだったのですね。