こんにちは!
今日はReactの世界に潜ってTypeScriptと一緒にuseStateを使う方法について紹介します。
まずはTypeScriptで useState
を使ってみましょう。
以下のコードは簡単なカウンターコンポーネントの例です。
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState<number>(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
};
export default Counter;
ここで注意すべきは useState<number>(0)
の部分です。
この行では useState
に初期値 0
を渡しています。
また、<number>
によってこの state
が数値であることをTypeScriptに伝えています。
これによってこの useState
で 使用できる変数が数値 がであることが保証できるわけですね。
TypeScriptは初期値から型を推論できるので多くの場合に、useState
の 型を明示的に指定する必要はありません 。
以下の例では useState
の引数に 0
を渡していますが、<number>
の部分を省略しています。
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, setCount] = useState(0); // numberと推論される
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Add</button>
</div>
);
};
export default Counter;
このように <number>
を省略しても問題ありません。
なぜなら、TypeScriptは 0
が数値であることから count
が数値型であると推論してくれるからです。
とても便利ですね!
以上がTypeScriptと一緒に useState
を使う方法と、その型推論の活用法についてです。
useState
を活用することで関数コンポーネント内で状態管理を簡単に行うことができます。
また、TypeScriptの型推論を活用すればコードをよりシンプルに保つことができます。
TypeScriptのハテナマークとオプショナルチェーンの使い方
TypeScriptのテンプレートリテラルで変数を簡単に文字列に埋め込む方法
TypeScriptで輝くインデックス型の完全ガイド
TypeScriptの魔法!インクリメント演算子の使い方完全解説
TypeScriptで型安全なコードを書こう!アンビエント宣言と型定義ファイルの使い方
TypeScript のアロー関数でジェネリクスを使いこなす方法
【実践TypeScript】デコレータを使いこなす!効率的なコーディングテクニック解説
TypeScriptアクセス演算子:public, private, protectedの使い方
TypeScriptの型安全を高める魔法 keyof と typeof の使い方