ReactとTypeScriptの基本

ReactにおけるTypeScriptの役割

Reactは、コンポーネントベースの設計を基にしてユーザーインターフェースを構築するための強力なライブラリです。一方、TypeScriptは型安全性を提供し、より堅牢でメンテナンス性の高いコードを書くための手助けをします。この二つを組み合わせることで、次のような利点が得られます。

型安全な開発

TypeScriptを使うことで、コンパイル時に型エラーを検出できます。これにより、ランタイムエラーを未然に防ぎ、予測可能な動作を保証します。

例: コンポーネントのProps（プロパティ）に型を付けることで、親コンポーネントから渡されるデータの形式が保証されます。

tsx

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

const Button: React.FC<ButtonProps> = ({ label, onClick }) => (
  <button onClick={onClick}>{label}</button>
);

上記の例では、labelが文字列であり、onClickが関数であることが保証されます。

自動補完と開発効率向上

TypeScriptを使用すると、エディタでコード補完や型のヒントが表示されます。これにより、APIの誤用を減らし、開発スピードを向上させます。

大規模アプリケーションへの対応

型を使用することで、複雑なコードベースでも構造を明確に保つことができます。これにより、リファクタリングが容易になり、新しい機能を追加する際のリスクが低減します。

TypeScriptの基本

ReactにおけるTypeScriptの活用を理解するには、TypeScriptの基礎概念を押さえておくことが重要です。ここでは簡単に復習します。

TypeScriptの基礎概念

TypeScriptは、JavaScriptに型システムを追加したスーパーセットです。以下は基本的な概念です：

型アノテーション: 変数や関数に明示的な型を指定します。
インターフェースと型エイリアス: 複雑なデータ構造を定義します。
ユニオン型と交差型: 型を組み合わせて柔軟な設計が可能です。

型アノテーション

型アノテーションを使用して、変数や関数の型を明確に定義します。

let name: string = "John";
let age: number = 25;

function greet(name: string): string {
  return `Hello, ${name}`;
}

インターフェースと型エイリアス

データ構造を定義するための方法です。インターフェースはオブジェクトの形状を定義し、型エイリアスは任意の型に別名をつけます。

interface User {
  id: number;
  name: string;
}

type Product = {
  id: string;
  price: number;
};

ユニオン型と交差型

ユニオン型は複数の型のいずれかを受け入れることを示し、交差型は複数の型を組み合わせます。

// ユニオン型
let id: string | number;
id = 123;
id = "ABC";

// 交差型
interface A {
  propA: string;
}

interface B {
  propB: number;
}

const obj: A & B = {
  propA: "Hello",
  propB: 123,
};