エラーに怯えながら学んだ、React×TypeScriptの型定義入門｜ブログ

はじめに React開発をしていると、props や state の型がうまく定義されていないことで VSCode に「型が定義されていません」や「型 ‘undefined’ を割り当てることはできません」などと怒られることが多々あります。 最初はどうしてエラーが出るのかわからず、怯えていました。 ですが、型定義をしたらエラーが解消されると知り、調整しているうちに、 どうして型定義が必要なのか、型定義をするとどんな利点があるのか気になり調べてみました。 なぜTypeScriptで型を指定する必要があるのか ReactはJavaScriptで構築されたUIライブラリです。 JavaScriptは動的型付け言語であり、変数にどのような値でも代入できる柔軟さがありますが、その反面、型に起因するバグを実行時まで検出できないという弱点があります。 コード例： let count = 1; // 数値を代入 count = "one"; // 実行して初めてエラー（or 思わぬ動作）になる TypeScriptはこの弱点を補うために、静的型付けの仕組みを導入した言語です。 変数・関数・propsなどに明示的な型を指定することで、型の不一致によるエラーをコンパイル時に防ぐことができます。 コード例： let count: number = 1; // 数値を代入 count = "one"; // コンパイルエラー：「stringをnumberに代入できません」 型定義を行うことで、 ・型安全性の確保（予期しない型エラーの防止） ・propsの仕様の明確化 ・コードの可読性・保守性の向上 といったメリットが得られます。 特にReactではコンポーネント間でデータを受け渡すため、propsの型定義は非常に重要です。 型定義されていないとエラーが出る理由 tsconfig.json とは、TypeScriptコンパイラ（tsc）が「どのように」コードを解釈・変換するかを設定するファイルです。 プロジェクト内の .ts や .tsx ファイルは、この設定に従ってコンパイルされます。 tsconfig.jsonで "strict": true を設定していると、TypeScriptは型に関して最も厳密なチェックを行います。 ※「false」 にしてもすべてのエラーが消えるわけではなく、明らかな型不一致は引き続きエラーになります。 この設定は、エラーを防ぐための複数のチェック項目（noImplicitAny, strictNullChecks など）をまとめて有効化します。 ・代表的なチェック項目 noImplicitAny → 型が明示されていない変数・引数を自動的に any とみなさない。 明示的な型指定を求めることで、暗黙的な型ミスを防ぎます。 export default function greet(name) {// エラー: 'name' は暗黙的に 'any' 型になります console.log(name); } strictNullChecks → 変数が null や undefined を取る可能性を明示的に扱うよう要求します。 これにより「型 ‘undefined’ を割り当てることはできません」というエラーが発生します。 let userName: string = "Alice" userName = undefined // エラー：string に undefined は代入できない このように “strict”: true は「曖昧な型のままにしておかない」という方針を強制します。 最初はエラーが多くて煩わしく感じるかもしれませんが、これによって型の漏れや意図しない挙動を事前に防げるのがTypeScriptの強みです。 propsの型定義とは？ Reactコンポーネントでは、親コンポーネントから子コンポーネントに値を渡すために「props（プロパティ）」を使います。 TypeScriptを使う場合、このpropsにどんな型の値が渡ってくるのかを明確にすることで、より安全で読みやすいコードを書けます。 propsの型を定義する方法 propsの型は、主に type または interface を使って定義します。 どちらもオブジェクトの形を表現できます。 // MyComponent.tsx // typeを使う例 type Props = { title: string count?: number // ?をつけると任意のプロパティ items: string[] onClick: () => void } // interfaceを使う例 interface Props { title: string count?: number items: string[] onClick: () => void } export default function MyComponent ({ title, count, items, onClick }: Props) { return ( {title} {count}

{items.map((item, i) => ( {item} ))} Click ) } typeとinterfaceの違い どちらを使ってもpropsの型を定義できますが、次のような違いがあります。 | 比較項目 | type | interface | | --- | --- | --- | | ユニオン型/条件型が使える | 可能 | 不可 | | extendsによる継承 | 可能（交差型 \&\） | 可能（\extends\） | | 同名での再宣言（マージ | 不可 | 可能 | | 柔軟性・表現力 | 高い | やや制限あり | | 推奨される場面 | 複雑な型構成を扱うとき | 単純なオブジェクト構造や拡張前提のとき | つまり 単純なprops定義や拡張を想定する場合 → interface ユニオン型・条件型など柔軟さが必要な場合 → type どちらを選んでも動作上の差はなく、チーム内で統一するのがベストです。 ※比較項目について説明 ユニオン型とは： ユニオン型（|）は、「複数の型のうちどれか1つを取る」ことを表現します。 type Size = "small" | "medium" | "large" 条件型とは： 条件型は、ある型が別の型に代入可能かどうかで結果を分岐する仕組みです。 type IsString = T extends string ? "文字列です" : "文字列ではありません" type A = IsString // "文字列です" type B = IsString // "文字列ではありません" ※”T” とはジェネリクス型を利用する際によく使われるものです。 ジェネリクスとは、簡単に言うと「型を動的に扱えるようにするためのもの」です。 ジェネリクスと組み合わせることで、入力の型に応じて結果の型を動的に変えるような柔軟な型定義が可能です。 extendsによる継承とは： interface では extends、type では交差型（&）を使って他の型を拡張できます。 // interface の継承 interface BaseProps { id: number } interface UserProps extends BaseProps { name: string } // type の継承（交差型） type BaseProps = { id: number } type UserProps = BaseProps & { name: string } どちらも「共通のプロパティを引き継ぐ」ための構文ですが、 interface の方が継承構文として読みやすく、type は複数の型を柔軟に合成できる（交差・ユニオンなど）点が強みです。 同名での再宣言（マージ）とは： interface には宣言マージという特徴があります。 同じ名前で複数回定義すると、自動的に統合されます。 interface User { id: number } interface User { name: string } // 結果：{ id: number; name: string } として扱われる const u: User = { id: 1, name: "Taro" } これにより、ライブラリの型拡張（例：Express.Request にカスタムプロパティを追加）などが可能になります。 一方で、type では同名再定義はエラーになります。 type User = { id: number } type User = { name: string } // 再定義エラー そのため、公開APIや拡張前提の型はinterface、 局所的・一時的な型はtype が向いています。 どこで型を定義するのか？ TypeScriptでは、「スコープ」と「再利用性」を意識して型定義の場所を選ぶのが大切です。 共通で使う型は専用ファイルへ分離 → src/types/ ディレクトリを作り、APIレスポンス型・Props型・DBモデル型などをまとめておくと管理しやすいです。 特にLaravelなどバックエンドと型定義を共有する場合には必須です。 // src/types/props.ts export type CustomerProps = { id: number; name: string; email?: string; }; // src/components/Customer.tsx import type { CustomerProps } from '../types/props'; // importで読み込む export default function Customer({ id, name, email }: CustomerProps) { return ( {name} {email && {email}

} ); } メリット: 複数ページで共通利用できる APIレスポンスやDBモデルとの整合性が取りやすい 一箇所変更すれば全て反映される 局所的な型はコンポーネント内に書いておく → 使い回す予定がない小さなpropsは、同じファイルに書いておく方が保守しやすいです。 // src/components/Badge.tsx type Props = { label: string; color?: string; }; export default function Badge({ label, color = 'gray' }: Props) { return {label} ; } このように、スコープの広さと再利用性を意識することで、 型定義がプロジェクトのドキュメントとしても機能します。 おわりに 今回は、React×TypeScriptにおける基本的な型定義について紹介しました。 実際にReactで開発を進めていると、扱うデータがどんどん複雑になり、そのたびに型定義の大切さを実感します。同時に、型定義を正しく設計することの難しさも感じています。 型を理解し、使いこなすまでの道のりは長いですが、確実に開発を支えてくれる強力な味方です。 私はまだ駆け出しエンジニアですが、日々エラーと向き合いながら少しずつ学んでいます。 エラーが出たときは、すぐに解決方法を検索するだけでなく、 「なぜこのエラーが起こったのか」「なぜこのコードを書く必要があるのか」まで考えるように努力しています。そうすることで、ただ直すだけでなく、自分の理解が一歩ずつ深まっていくのを感じます。 これからもエラーに悩まされることはあると思いますが、 それを成長のきっかけとして、ひとつずつ丁寧に向き合っていきたいと思います。