React で TypeScript をマスターする: ステップバイステップガイド-jsチュートリアル-php.cn

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

Mary-Kate Olsen

リリース： 2024-09-20 06:32:36

オリジナル

432 人が閲覧しました

Mastering TypeScript with React: A Step-by-Step Guide

??‍♀️ はじめに

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 サイトの他の関連記事を参照してください。