React/Next.js コードを読むための TypeScript 超入門（3分でざっくり）

2025/11/23 · 7 min read

「TypeScript を極めたい」ではなく
「TS 付きの React/Next.js のコードを読めるようになりたい」人向けの超入門です。

ここでは、次のようなコードを 「怖がらずに読める」 ことをゴールにします。

type UserCardProps = {
  name: string;
  age: number;
  isAdmin?: boolean;
  onClick: () => void;
};

const UserCard = ({ name, age, isAdmin, onClick }: UserCardProps) => {
  return (
    <div onClick={onClick}>
      <h2>{name}</h2>
      <p>{age} 歳</p>
      {isAdmin && <span>管理者</span>}
    </div>
  );
};

1. 型注釈の基本：`:` の右側を読む

TypeScript でいちばんよく出てくるのは 変数の型注釈 です。

const age: number = 25;
const userName: string = "rinta";
const isAdmin: boolean = false;

: number → 数値型
: string → 文字列型
: boolean → 真偽値型

オブジェクトも同じです。

const user: {
  name: string;
  age: number;
  isAdmin: boolean;
} = {
  name: "rinta",
  age: 25,
  isAdmin: false,
};

読み方のコツ：

user は
name: string, age: number, isAdmin: boolean
というプロパティを持つオブジェクトの変数

と、日本語にして読めれば OK です。

2. 型に名前をつける：`type` と `interface`

毎回 { name: string; ... } と書くのは面倒なので、 型にも名前を付けて再利用 します。

type User = {
  name: string;
  age: number;
  isAdmin: boolean;
};

const user: User = {
  name: "rinta",
  age: 25,
  isAdmin: false,
};

type User = { ... }
→ 「User という名前のオブジェクト型」を定義

同じことは interface でも書けます。

interface User {
  name: string;
  age: number;
  isAdmin: boolean;
}

React/Next.js では、どちらもよく出てきます。
読むときは「どちらもオブジェクトの型に名前を付けている」と理解すれば十分 です。

任意プロパティ：`?` が付いているやつ

よく出てくるのが ? 付きのプロパティです。

type UserCardProps = {
  name: string;
  age: number;
  isAdmin?: boolean;
};

isAdmin?: boolean;
→ あってもなくてもいい boolean。
「任意のプロパティ」 という意味。

3. 関数の型を読む：`() => ...` 形式

関数にも型があります。

const add = (a: number, b: number): number => {
  return a + b;
};

a: number, b: number → 引数の型
): number → 戻り値の型

React の props では、「関数を受け取る」型 もよく出てきます。

type ListItemProps = {
  id: number;
  onSelect: (id: number) => void;
};

onSelect: (id: number) => void;
→ 数値 id を受け取って、何も返さない関数

ボタンなどでよく出てくる定番の形はこちら：

type ButtonProps = {
  label: string;
  onClick: () => void;
};

onClick: () => void;
→ 引数なし・戻り値なしの関数

4. ユニオン型と配列型・ジェネリクスを「読む」

ユニオン型：`A | B` の形

type ButtonVariant = "primary" | "secondary" | "danger";

type ButtonProps = {
  label: string;
  variant: ButtonVariant;
};

"primary" | "secondary" | "danger"
→ この3つの文字列のどれかだけを許す型

Next.js / React のコードでは、「状態」や「種類」をこうやって絞ることが多いです。

配列の型：`T[]`

type User = { name: string; age: number };

const users: User[] = [
  { name: "rinta", age: 25 },
  { name: "tanaka", age: 30 },
];

User[] → 「User 型の配列」

よくあるパターン：

const names: string[] = ["a", "b"];
const numbers: number[] = [1, 2, 3];

`User | null` と `useState<User | null>`

「値があるか、まだないか」 を表すときは、こういう型が出てきます。

type User = { name: string };

const [user, setUser] = useState<User | null>(null);

User | null
→ User 型もしくは null
useState<User | null>
→ 「User か null を入れる state」を作る

ここでの <...> は ジェネリクス と呼ばれますが、
最初は次のように読むだけで十分です。

useState<この型> = 「この型を入れる state フック」

5. React コンポーネントの中で「ここが TS」

最後に、よくあるコンポーネントを例に、
「ここからここまでが TypeScript の型情報」 だけを意識して見てみます。

type User = {
  name: string;
  age: number;
  isAdmin?: boolean;
};

type UserCardProps = {
  user: User;
  onClick: () => void;
};

const UserCard = ({ user, onClick }: UserCardProps) => {
  return (
    <div onClick={onClick}>
      <h2>{user.name}</h2>
      <p>{user.age} 歳</p>
      {user.isAdmin && <span>管理者</span>}
    </div>
  );
};

この中で TypeScript の型情報 はここだけです：

type User = { ... };
type UserCardProps = { ... };
({ user, onClick }: UserCardProps)

それ以外（const ... =, {}, <div>...</div> など）は JavaScript + JSX
TS に慣れるコツは、
「まず type と : 以降だけを拾って読む」 こと

まとめ

このページで扱ったのは、React/Next.js のコードを読むために最低限ほしい TypeScript のパーツです。

const value: 型 = 値;
オブジェクトの型 { name: string; ... }
type / interface で型に名前
? 付きプロパティ（任意）
関数の型 (id: number) => void
ユニオン型 "A" | "B" と配列型 T[]
User | null と useState<User | null>

このあたりが読めれば、
TypeScript 付きの React/Next.js コンポーネントは 「調べながらなら十分追える」レベル になります。

細かいテクニック（高度なジェネリクス、条件型など）は、
実際のプロジェクトで 必要になったときにググりながら足す くらいで十分です。