React で TypeScript をマスターする: ステップバイステップ ガイド

??‍♀️ はじめに

TypeScript は JavaScript に静的型付けを追加し、潜在的なバグを実行前に検出するのに役立ちます。 React と組み合わせると、TypeScript はタイプ セーフを強制してコンポーネントを強化します。この記事では、React で TypeScript を使用するための重要な概念について説明します。

---

⚛️ React で TypeScript を使用するには?

まず、React プロジェクトに TypeScript をインストールする必要があります。最初から始める場合は、TypeScript を有効にして新しい React アプリを作成します。

npx create-react-app my-app --template typescript

既存のプロジェクトの場合、次のコマンドを実行して TypeScript を追加できます。

npm install typescript @types/react @types/react-dom

これで、.js や .jsx の代わりに .tsx ファイルの使用を開始できるようになり、React コンポーネントは TypeScript の機能を活用できるようになります。

---

React コンポーネント Prop のタイプ

React でコンポーネントを定義するときに、その props のタイプを指定して、コンポーネントの使用法をより明確かつ安全にすることができます。基本的な例を次に示します:

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

const UserCard = ({ name, age }: UserProps) => (
  <div>
    <h1>{name}</h1>
    <p>{age} years old</p>
  </div>
);

この例では、UserCard は 2 つのプロパティ、name (文字列) と age (数値) を想定しています。間違った型を渡そうとすると、TypeScript はエラーを表示します。

---

ReactNode と ReactElement の比較

React コンポーネントの入力に ReactNode または ReactElement をいつ使用するか疑問に思うかもしれません。

• ReactNode: React によってレンダリングできるものを表します。これには、文字列、数値、JSX、配列、null が含まれます。

• ReactElement: 実際の React 要素を参照します。これはより具体的であり、文字列や null をカバーしません。

例:

type CardProps = {
  children: ReactNode;
};

const Card = ({ children }: CardProps) => <div>{children}</div>;

// Usage
<Card><p>Hello, World!</p></Card>

ここでは ReactNode が使用されています。これは、子が React 要素だけでなく、任意のレンダリング可能な要素になる可能性があるためです。

---

タイプとインターフェイス

プロップやその他のオブジェクトの形状を定義する場合、タイプとインターフェイスの両方を使用できます。それで、違いは何ですか?

• タイプ: 共用体タイプまたはより複雑な組み合わせの作成に最適です。
• インターフェース: 追加の型の拡張または実装を計画している場合は、多くの場合、より適切です。

比較は次のとおりです:

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

// Using interface
interface LinkProps {
  href: string;
  openInNewTab?: boolean;
}

どちらも似ていますが、インターフェイスはより自然に拡張できます。

interface IconButtonProps extends ButtonProps {
  icon: string;
}

---

TypeScript で Props を入力するにはどうすればよいですか?

コンポーネントの props を型指定するには、型またはインターフェイスを宣言し、それをコンポーネントの props の型注釈として渡します。

例:

type AlertProps = {
  message: string;
  severity: 'error' | 'warning' | 'info';
};

const Alert = ({ message, severity }: AlertProps) => (
  <div className={`alert ${severity}`}>{message}</div>
);

---

機能コンポーネントの小道具を入力するにはどうすればよいですか?

機能コンポーネントの props を入力するには、React.FC を使用できます。または、props を明示的に宣言します。 React.FC が一般的に使用されていましたが、現在では明示的な型が多くの人に好まれています。

明示的な型を使用した例を次に示します:

type BadgeProps = {
  text: string;
  color: string;
};

const Badge = ({ text, color }: BadgeProps) => (
  <span style={{ backgroundColor: color }}>{text}</span>
);

この例では、Badge にはテキストと色という 2 つのプロップがあり、どちらも文字列として入力されます。

---

⛓ TypeScript でフックに反応する

React フックを TypeScript で入力して、コンポーネント内の状態およびエフェクト ロジックの型安全性を確保することもできます。

TypeScript で useState と useEffect を使用する方法は次のとおりです。

import { useState, useEffect } from 'react';

const Counter = () => {
  const [count, setCount] = useState<number>(0);

  useEffect(() => {
    console.log(`Count is: ${count}`);
  }, [count]);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

この例では、count が常に数値になるように useState フックが型付けされており、現在のカウントが変化するたびに useEffect がログを記録します。

---

これらのベスト プラクティスに従うことで、React アプリケーションで TypeScript の可能性を最大限に活用でき、より堅牢で保守しやすいコードが得られます。

SQL も使用している場合は、その前に、究極の SQL チートシートをチェックして、基本クエリと高度なクエリの両方で SQL スキルを向上させてください。

---

以上がReact で TypeScript をマスターする: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。