【React】TypeScript x React基礎

TypeScript x React基礎

ReactとTypeScriptは、強力な組み合わせで、アプリケーションの開発をより安全で保守しやすくします。TypeScriptは、JavaScriptに静的型チェックを追加し、開発者により多くのコードの品質と信頼性を提供します。以下は、TypeScriptとReactを組み合わせて使う基本的な手法についてのガイドです。

1. プロジェクトの初期化

まず、TypeScriptとReactを組み合わせたプロジェクトを初期化します。Create React Appを使用して、簡単にセットアップできます。

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

上記のコマンドで、TypeScriptテンプレートを使用したReactプロジェクトが作成されます。

2. コンポーネントの作成

srcフォルダ内にcomponentsフォルダを作成します

TypeScriptを使用すると、コンポーネントに対して型を定義できます。例えば、以下のように関数コンポーネントのプロップスに対する型を指定できます。

components/MyComponent.tsx

import React from 'react';

interface MyComponentProps {
  name: string;
  age: number;
}

const MyComponent: React.FC<MyComponentProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

いちいちinterfaceで指定するのがめんどくさかったら別の書き方もできます！
(でも、多くの場合は、typesフォルダを作成し、そこに各コンポーネントで使う型を指定してインポートして型を使います)

components/MyComponent.tsx

import React from "react";

const MyComponent: React.FC<{ name: string; age: number }> = ({
  name,
  age,
}) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

export default MyComponent;

App.tsx

import "./App.css";
import React from "react";
import MyComponent from "./components/MyComponent";

const App: React.FC = () => {
  return (
    <div className="App">
      <MyComponent name="Naoya_pro" age={22} />
    </div>
  );
};

export default App;

3. ステートの管理

クラスコンポーネント内でステートを管理する場合も、型を利用してステートの形状を定義できます。

components/Counter.tsx

import React, { useState } from "react";

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

  const increment = () => {
    setCount(count + 1);
  };

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

export default Counter;

4. ルーティング

React Routerを使用して、アプリケーション内でページの遷移を管理する場合も、型を活用できます。

# npmの場合
npm i react-router-dom@6

# yarnの場合
yarn add react-router-dom@6

App.tsx

import "./App.css";
import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import MyComponent from "./components/MyComponent";
import Counter from "./components/Counter";

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/my-component" element={<MyComponent name="Naoya_pro" age={22} />} />
        <Route path="/counter" element={<Counter />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

これらの手法により、TypeScriptとReactを組み合わせて、アプリケーションの開発をより型安全かつ保守しやすくすることができます。型による補完とエディタのサポートを活用して、開発効率を向上させましょう。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！