初心者向け！TypeScriptとReactのuseState活用ガイド

こんにちは！
今日はReactの世界に潜ってTypeScriptと一緒にuseStateを使う方法について紹介します。

React開発の最初の一歩になるチュートリアルを簡潔にわかりやすく紹介しています。

useStateをTypeScriptと一緒に使ってみよう

まずは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の型推論を活かそう

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 が数値型であると推論してくれるからです。

とても便利ですね！

【初心者必見】React-Reduxの使い方をチュートリアルで学ぶ

React-Redux入門！初心者向けのハンズオンで楽々学ぼう。環境構築からカウンターアプリ作成まで！

gizanbeak.com

React＋Typescriptでクリックイベントを使用する方法を解説

ReactとTypescriptでクリックイベントをマスター！イベントハンドラ、型の活用、イベント制御についてわかりやすく解説します。

gizanbeak.com

まとめ

以上がTypeScriptと一緒に useState を使う方法と、その型推論の活用法についてです。

useState を活用することで関数コンポーネント内で状態管理を簡単に行うことができます。
また、TypeScriptの型推論を活用すればコードをよりシンプルに保つことができます。

Gizanbeak