開発者ドキュメント

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

getdocs

序章

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

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

前提条件

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

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

TypeScriptCreateReactアプリの起動

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

次に、 create-react-app とともに --template typescript 国旗：

  1. 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...

The --template typescript flagは、CreateReactAppスクリプトにcra-template-typescripttemplateを使用してビルドするように指示します。 これにより、メインの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.

The tsconfig.json ファイルは、TypeScriptプロジェクトを構成するために使用されます。 package.json JavaScriptプロジェクト用です。

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

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を使用したことがある場合は、これが App.js CreateReactAppがTypeScript以外のビルド用に生成するファイル。 JavaScriptプロジェクトと同じベースを取得しますが、TypeScriptサポートが構成に組み込まれています。

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

TypeScriptコンポーネントの作成

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

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

このコードは message からの値 props. レンダリングされます 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トピックページで演習とプログラミングプロジェクトを確認してください。

モバイルバージョンを終了