web-dev-qa-db-ja.com

TypeScriptでuseState Reactフックにタイプを設定します

TypeScriptプロジェクトでReactを移行してフック機能（React v16.7.0-alpha）を使用していますが、非構造化要素のタイピングを設定する方法がわかりません。

以下に例を示します。

interface IUser {
  name: string;
}
...
const [user, setUser] = useState({name: 'Jon'});

user変数をIUser型に強制したい。私の唯一の成功した試用版は、2つのフェーズでそれを行うことです。入力、初期化：

let user: IUser;
let setUser: any;
[user, setUser] = useState({name: 'Jon'});

しかし、もっと良い方法があると確信しています。また、setUserは、IUserを入力として受け取り、何も返さない関数として初期化する必要があります。

また、初期化なしでconst [user, setUser] = useState({name: 'Jon'});を使用しても問題なく動作しますが、特に小道具に依存する場合は、TypeScriptを利用してinitの型チェックを強制したいと思います。

ご協力いただきありがとうございます。

reactjstypescriptreact-hooks
19
htaidirt

これを使って

const [user, setUser] = useState<IUser>({name: 'Jon'});

対応するタイプはこちらをご覧ください： https://github.com/DefinitelyTyped/DefinitelyTyped/blob/8a1b68be3a64e5d2aa1070f68cc935d668a976ad/types/react/index.d.ts#L844

39
Nurbol Alpysbayev

最初のuseStateはジェネリックを取り、これがIUserになります。 useStateによって返される2番目の非構造化要素を渡す場合は、Dispatchをインポートする必要があります。クリックハンドラーを備えたこの拡張バージョンの例を検討してください。

import React, { useState, Dispatch } from 'react';

interface IUser {
  name: string;
}

export const yourComponent = (setUser: Dispatch<IUser>) => {

    const [user, setUser] = useState<IUser>({name: 'Jon'});

    const clickHander = (stateSetter: Dispatch<IUser>) => {
        stateSetter({name : 'Jane'});
    }

    return (
         <div>
            <button onClick={() => { clickHander(setUser) }}>Change Name</button>
        </div>
    ) 
}

こちらをご覧ください answer 。

0
cham