React TypeScript useState に型を設定したい

React の useState で返される state の型を指定したい

useState<型>(initial value) で state に型を強制できる

type IdolType = 'cute' | 'cool' | 'pop' | 'sexy';

const [type, setType] = useState<IdolType>('cute');
setType('foo');
// => Argument of type '"foo"' is not assignable to parameter of type 'SetStateAction<IdolType>'

setType() で IdolType の型以外の値を設定しようとするとエラーになる

Boolean しか入らないような state は直接 <boolean> と書ける

const [isHoshimiya, setIsHoshimiya] = useState<boolean>(true);

おわり

---

[参考]

• DefinitelyTyped/index.d.ts at 8a1b68be3a64e5d2aa1070f68cc935d668a976ad · DefinitelyTyped/DefinitelyTyped · GitHub
• TypeScriptを使用してuseState React Hookの型を設定する

実践TypeScript

Ann Clark Cookie Cutters 恐竜 クッキー型3個セット(Tレックス、ブロンドサウルス、トリケラトプス)、レシピ小冊子付き