質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
String

Stringは、ゼロ以上の文字から連続してできた文字の集合を扱うデータ型です。基本的にテキストを表すために使われます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

4019閲覧

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

MajinBoo

総合スコア16

String

Stringは、ゼロ以上の文字から連続してできた文字の集合を扱うデータ型です。基本的にテキストを表すために使われます。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2020/05/25 11:35

編集2020/05/25 11:59

前提・実現したいこと

tsx

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

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

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

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

tsx

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

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

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

該当のソースコード

tsx

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

試したこと

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

tsx

1type hogeType = { 2 string: "" | "hoge"; 3 setString: React.Dispatch<React.SetStateAction<string>>; 4}; 5 6const [string, setString]: hogeType = useState("");

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

typescript

1type HogeType = "hoge" | "";

typescript

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

以下、使用例です。(使用しているエディタはWebStormです)
イメージ説明

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

イメージ説明

参考になれば幸いです。

投稿2020/05/25 12:49

編集2020/05/25 13:10
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

MajinBoo

2020/05/25 13:22

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

2020/05/25 13:33

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問