分割代入で定義した変数に、型を明示したい。

Question

前提・実現したいこと

type NameType = "hoge" | "fuga"

const getButtonName = (e: React.MouseEvent<HTMLButtonElement>) => {
  const { name } = e.currentTarget;
  ...
};

上記の変数nameはIDE（VSCode）が推論する型はstring型ですが、別に定義したNameTypeを変数nameに付与したいです。

発生している問題・エラーメッセージ

以下は問題が発生するコードと、それに対するエラーメッセージです。

const { name: NameType } = e.currentTarget;

'NameType' が宣言されていますが、その値が読み取られることはありません。

const { name }: NameType = e.currentTarget;

型 'EventTarget & HTMLButtonElement' を型 'NameType' に割り当てることはできません。

試したこと

TypeScript で 分割代入 {a, b} = c を使う - Qiita

上記ページを参考に、下記のコードを書いてみました。

const { name }: { name: NameType } = e.currentTarget;

結果、下記のエラーが表示されました。

型 'EventTarget & HTMLButtonElement' を型 '{ name: NameType; }' に割り当てることはできません。

プロパティ 'name' の型に互換性がありません。
型 'string' を型 'NameType' に割り当てることはできません。

Answer 1

nameを取り出したあとにasでキャストするとかでないと難しいと思います。

const { name } = e.currentTarget;
const buttonName = name as NameType

const { name }: { name: NameType }と型注釈を入れてもevent.currentTargetとは型に互換性がないことは変わらないと思います。asは安全ではない操作ですが、他の方法で型をつけられたとしてもそもそも実行時に"hoge" | "fuga"であるかの保証なんてできませんし、どのみち安全ではない操作にはなってしまうと思います。

Answer 2

分割代入の元になるオブジェクトの型の定義があれば、型情報を受け取れるかなと思います。

コード

type NameType = "hoge" | "fuga"

const anyValue: any = {
  name: "hoge"
}

type value = {
  name: NameType
}

if (anyValue.name === "hoge" || anyValue.name === "hoge") {
  const {name}: value = anyValue
  console.log(name)
}