[解決済み] TypeScriptでuseStateに型を設定するReact Hook
2022-03-09 08:57:06
質問
React with TypeScriptのプロジェクトをフック機能(React v16.7.0-alpha)を使うように移行しているのですが、構造化されていない要素の型付けをどう設定すればいいのかがわかりません。
以下はその例です。
interface IUser {
name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});
を強制したい。
user
変数が
IUser
. 私が唯一成功した試みは、2つのフェーズで行うことです。入力と初期化の2段階です。
let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});
でも、もっといい方法があるはずです。また
setUser
を受け取る関数として初期化する必要があります。
IUser
を入力とし、何も返さない。
また、注目すべきは
const [user, setUser] = useState({name: 'Jon'});
初期化なしでも問題ないのですが、特にpropsに依存している場合は、TypeScriptを活用してinit時に強制的に型チェックを行いたいと思います。
よろしくお願いします。
解決方法は?
これを使う
const [user, setUser] = useState<IUser>({name: 'Jon'});
をご覧ください。 DefinitelyTypedの対応する型
関連
-
[解決済み】<Router>の外側で<Link>を使用してはならない
-
[解決済み] Uncaught (in promise) Error: リクエストに失敗、ステータスコード404
-
[解決済み] React JSXのforEach()でHTMLが出力されない
-
[解決済み] TypeScript で `window` に新しいプロパティを明示的に設定するにはどうすればよいですか?
-
[解決済み] TypeScriptでの取得と設定
-
[解決済み] useEffect React Hook使用時の依存性欠如の警告を修正する方法
-
[解決済み】TypeScriptのインターフェースと型について
-
[解決済み】useState setメソッドが変更を即座に反映しない。
-
[解決済み】React Hooks useState()でオブジェクトを使用する。
-
[解決済み】Typescript。Reactのイベントタイプ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み] FontAwesomeの無料パッケージに含まれているアイコンのオブジェクト名はどこにあるのですか?
-
[解決済み] material-ui-pickers KeyboardDatePicker をモーメントで使用するには?
-
[解決済み] Angular 2の*ngForのReactでの同等品
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] axios-mock-adapter onGet mock data not effective.
-
[解決済み] eslint: no-case-declaration - case ブロックで予期しない字句の宣言があった。
-
[解決済み] validateDOMNesting警告React
-
[解決済み] Reactプロジェクトに.envファイルを追加する