これまでの記事では

基本型
型推論
関数型
オブジェクト型
Generics

など、TypeScriptの基本機能を解説してきました。

今回の記事では

ReactとTypeScriptを組み合わせる方法

を解説します。

現在のフロントエンド開発では

React + TypeScript

が非常に一般的になっています。

この記事では次の内容を解説します。

ReactでTypeScriptを使う理由
ReactプロジェクトのTypeScript化
propsの型定義
stateの型定義
イベントの型

ReactをTypeScriptで書くための基本を理解していきましょう。

なぜReactでTypeScriptを使うのか

ReactはコンポーネントベースのUIライブラリです。

アプリが大きくなると

コンポーネント数が増える
propsが複雑になる
state管理が増える

という問題が発生します。

JavaScriptだけで書くと次のような問題が起きます。

propsの構造が分からない
stateの型が不明
バグが実行するまで分からない

TypeScriptを使うと

props型
state型
関数型

を明確にできます。

これにより

バグ防止
可読性向上
IDE補完

などのメリットがあります。

ReactでTypeScriptを使う方法

ReactでTypeScriptを使う方法は大きく2つあります。

新規プロジェクト

React + TypeScriptのプロジェクトを作成します。

例（Vite）

“`bash id=”qg8pxh”
npm create vite@latest

テンプレート

id=”20n8o6″
react-ts

を選択します。

---

## 既存Reactに導入

既存プロジェクトでもTypeScriptを導入できます。

手順

id=”s0s7ck”
typescript
@types/react
@types/react-dom

をインストールします。

---

# Reactコンポーネントの型

Reactコンポーネントは次のように書きます。

tsx id=”jkjf2r”
function App() {
return

Hello

}

TypeScriptでは

id=”88w8nb”
tsx

拡張子を使います。

---

# propsの型定義

Reactで最も重要なのが

id=”3syyzd”
props

です。

TypeScriptでは次のように定義します。

---

## props型

ts id=”srsq2o”
type Props = {
title: string
}

---

## コンポーネント

tsx id=”i2qf7e”
function Header(props: Props) {
return

{props.title}

}

---

## 使用

tsx id=”t7n9dn”

もし

tsx id=”8ql3ru”

と書くとエラーになります。

---

# 分割代入

実務では次の書き方がよく使われます。

tsx id=”qzv6yn”
function Header({ title }: Props) {
return

{title}

}

この方が読みやすいです。

---

# stateの型

Reactでは

id=”q3iy9a”
useState

を使います。

TypeScriptでは型を指定できます。

---

## useState例

tsx id=”s8d9fx”
const [count, setCount] = useState(0)

この場合

id=”7m0d8h”
count

は

id=”y2c0re”
number

になります。

---

## オブジェクトstate

tsx id=”0vra0y”
type User = {
name: string
age: number
}

const [user, setUser] = useState()

---

# イベントの型

Reactではイベントにも型があります。

例

tsx id=”j5u7m0″
function handleClick(e: React.MouseEvent) {
}

---

## inputイベント

tsx id=”qqxgq3″
function handleChange(e: React.ChangeEvent) {
}

---

# React + TypeScriptのメリット

ReactでTypeScriptを使うメリットは大きく3つあります。

---

## propsの安全性

propsの型が明確になります。

---

## state管理が安全

stateの型を保証できます。

---

## IDE補完

VSCodeで

id=”wve8fh”
props
state
event

の補完が強力になります。

---

# 実務での利用例

React + TypeScriptは次のようなアプリで使われています。

* 管理画面
* SaaS
* ECサイト
* ダッシュボード

多くの企業が

id=”c4k9hj”
React + TypeScript
“`

を採用しています。

まとめ

この記事では ReactとTypeScript の組み合わせを解説しました。

重要なポイント

ReactではTypeScriptがよく使われる
propsに型を定義する
stateにも型を指定する
イベント型もある

TypeScriptを使うことでReactアプリの安全性が大きく向上します。

次回は

TypeScript実務パターン

を解説します。

ここでは

型設計
API型定義
プロジェクト構造

など、実務で重要なポイントをまとめます。

TypeScriptとReact（React開発でTypeScriptを使う方法） – 11/13