CreateReactアプリでTypescriptを使用する方法

序章

Create React App は、Reactアプリケーションの構築を開始するための基本的なパッケージと構成のセットを提供します。 バージョン2.0では、公式のTypeScriptサポートが導入されました。 これにより、JavaScriptユーザーはReactフロントエンドフレームワークでTypeScript規則を使用して記述できるようになりました。 TypeScriptは、より安全で自己文書化されたコードを作成するのに役立つ強力なツールであり、開発者がバグをより早く発見できるようにします。

この記事では、Create React Appを使用して、TypeScriptでReactアプリをセットアップします。

前提条件

この記事をフォローするには、次のものが必要です。

• Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
• Reactにある程度精通している。 React.jsシリーズのコーディング方法をご覧ください。
• TypeScriptの規則にある程度精通している。
• コードヒントをサポートする最新のコードエディタをお勧めします。 Visual Studio Code は、IntelliSenseを介してこれを提供します。

このチュートリアルは、ノードv15.13.0、npm v7.8.0、react-scripts v4.0.3、react v17.0.2、およびtypescriptv4.2.3で検証されました。 。

TypeScriptCreateReactアプリの起動

まず、ターミナルウィンドウを開き、プロジェクトをビルドするディレクトリに移動します。

次に、create-react-appを--template typescriptフラグとともに使用します。

npx create-react-app cra-typescript-example --template typescript

ターミナルウィンドウに最初のメッセージが表示されます。

Creating a new React app in [..]/cra-typescript-example.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template-typescript...

--template typescriptフラグは、 cra-template-typescripttemplateを使用してビルドするようにCreateReactAppスクリプトに指示します。 これにより、メインのTypeScriptパッケージが追加されます。

注： Create React Appの以前のバージョンでは、--typescriptフラグを使用できましたが、このオプションは廃止されました。

インストールが完了すると、TypeScriptをサポートする新しいReactアプリケーションが作成されます。 プロジェクトディレクトリに移動し、コードエディタで開きます。

tsconfig.jsonファイルを調べる

ターミナルウィンドウに次のメッセージが表示されていることに気付いたかもしれません。

We detected TypeScript in your project (src/App.test.tsx) and created a tsconfig.json file for you.

Your tsconfig.json has been populated with default values.

tsconfig.jsonファイルは、JavaScriptプロジェクトのpackage.jsonと同様に、TypeScriptプロジェクトの構成に使用されます。

Create ReactAppによって生成されるtsconfig.jsonは、次のようになります。

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

この構成により、コンパイル先のECMAScriptのいくつかのコンパイルルールとバージョンが確立されます。

App.tsxファイルを調べる

それでは、App.tsxファイルを開いてみましょう。

src / App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

以前にCreateReactAppを使用したことがある場合、これはCreateReactAppがTypeScript以外のビルド用に生成するApp.jsファイルと非常によく似ていることに気付いたかもしれません。 JavaScriptプロジェクトと同じベースを取得しますが、TypeScriptサポートが構成に組み込まれています。

次に、TypeScriptコンポーネントを作成し、それが提供できる利点を調べてみましょう。

TypeScriptコンポーネントの作成

App.tsxファイルに機能コンポーネントを作成することから始めます。

function MyMessage({ message }) {
  return <div>My message is: {message}</div>;
}

このコードは、propsからmessageの値を取ります。 divをテキストMy message is:とmessage値でレンダリングします。

次に、TypeScriptを追加して、この関数にmessageパラメーターをstringにする必要があることを伝えましょう。

TypeScriptに精通している場合は、message: stringをmessageに追加してみてください。 ただし、この状況で行う必要があるのは、すべてのpropsのタイプをオブジェクトとして定義することです。

これを達成する方法はいくつかあります。

タイプをインラインで定義する：

function MyMessage({ message }: { message: string }) {
  return <div>My message is: {message}</div>;
}

propsオブジェクトの定義：

function MyMessage(props: { message: string }) {
  return <div>My message is: {props.message}</div>;
}

別のインターフェースを使用する：

interface MyMessageProps {
  message: string;
}

function MyMessage(props: MyMessageProps) {
  return <div>My message is: {props.message}</div>;
}

interfaceを作成し、それを別のファイルに移動して、タイプが他の場所に存在できるようにすることができます。

これはたくさんの文章のように見えるかもしれないので、もう少し書くことから何が得られるか見てみましょう。

このコンポーネントは、stringをmessageパラメーターとしてのみ受け入れることを伝えました。 それでは、Appコンポーネント内でこれを使用してみましょう。

TypeScriptコンポーネントの使用

このMyMessageコンポーネントをレンダリングロジックに追加して、使用してみましょう。

コンポーネントの入力を開始します。

<MyMessage

コードエディタがコードヒントをサポートしている場合は、コンポーネントの入力を開始すると、コンポーネントの署名が表示されることに気付くでしょう。

これにより、コンポーネントに戻ることなく、期待される値とタイプが提供されます。 これは、別々のファイルで複数のコンポーネントを処理する場合に特に便利です。

小道具の種類を調べる

次に、小道具の入力を開始します。

<MyMessage messa

messageと入力し始めるとすぐに、その小道具がどうあるべきかがわかります。

(JSX attribute) message: stringが表示されます。

タイプエラーの調査

文字列の代わりにmessageの数値を渡してみてください。

<MyMessage message={10} />

メッセージとして数字を追加すると、TypeScriptはエラーをスローし、これらの入力のバグを見つけるのに役立ちます。

次のようなタイプエラーがある場合、Reactはコンパイルすらしません。

Type 'number' is not assignable to type 'string'が表示されます。

結論

このチュートリアルでは、Create React Appを使用して、TypeScriptでReactアプリをセットアップします。

すべてのコンポーネントと小道具のタイプを作成できます。 最新のコードエディタを使用すると、コードヒントを利用できます。 また、TypeScriptではプロジェクトをタイプエラーでコンパイルすることさえできないため、エラーをより迅速にキャッチできます。

TypeScriptの詳細については、TypeScriptトピックページで演習とプログラミングプロジェクトを確認してください。