1. ホーム
  2. reactjs

[解決済み] 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の対応する型