string型のstateに具体的な文字列の型を指定して、setStateできる文字列を限定したい。

Question

前提・実現したいこと

const [string, setString] = useState("");

上記のstringstateを""か"hoge"だけsetStateできるようにしたいです。
言い方を換えれば、""と"hoge"以外はstringstateにsetStateできないようにしたいです。

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

現状は下記のコードになっています。

const [string, setString]: [
    "" | "hoge",
    React.Dispatch<React.SetStateAction<string>>
  ] = useState("");

エラーメッセージは下記の通りです。

型 '["", Dispatch<SetStateAction<"">>]' を型 '["" | "hoge", Dispatch<SetStateAction<string>>]' に割り当てることはできません。
型 'Dispatch<SetStateAction<"">>' を型 'Dispatch<SetStateAction<string>>' に割り当てることはできません。
型 'SetStateAction<string>' を型 'SetStateAction<"">' に割り当てることはできません。
型 'string' を型 'SetStateAction<"">' に割り当てることはできません。

該当のソースコード

const [string, setString]: [
    "" | "hoge",
    React.Dispatch<React.SetStateAction<string>>
  ] = useState("");

試したこと

下記の通りtypeを設定しました。

type hogeType = {
  string: "" | "hoge";
  setString: React.Dispatch<React.SetStateAction<string>>;
};

const [string, setString]: hogeType = useState("");

すると、下記のエラーが表示されました。

型 '[string, Dispatch<SetStateAction<string>>]' を型 'hogeType' に割り当てることはできません。
型 'hogeType' は配列型ではありません。

Answer 1

以下のようにすると、よいかと思います。

type HogeType = "hoge" | "";

const [string, setString] = useState<HogeType>("");

以下、使用例です。(使用しているエディタはWebStormです)

上記の9行目で、空文字列を許容されない文字列 "fuga" に変更すると、以下のように型エラーが表示されます。

参考になれば幸いです。

Comments

[MajinBoo]

ありがとうございます！！！
実現したいことを完璧に実現できました！！！！
ありがとうございます！！！！

[jun68ykt]

どういたしまして????
> 実現したいことを完璧に実現できました！！！！
とのことでよかったです ????