React+TypeScriptプロジェクト構築事例解説

React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそれほど面倒ではなく、公式 Web サイトにも非常に明確な手順が記載されています。方法は2つあります:

1. TypeScript を使用して React プロジェクトを直接ビルドするには、追加のパラメータを追加する必要があり、テンプレートではデフォルトの cra-template を使用できません。代わりに cra-template-typescript を使用してください。

npx create-react-app tsreactdemo --template typescript

作成成功のプロンプトは、元のものとあまり変わりません。プロジェクト パスに直接移動し、yarn start または npm start を実行します。

プロジェクトに入るときは、急いで始める必要はありません。まず、ファイルがどのようになっているかを見てみましょう。デフォルトで tsconfig.json が作成され、src ディレクトリ内のデフォルトの index.js および App.js ファイルは、ts バージョンの index.tsx および App.tsx に変更されます。

package.json の依存関係を確認できます。

実際、依存関係は @types/jest、@types/node、@types/react、@types/react-dom だけです。

当初、Typescript React プロジェクトを作成するために使用したコマンドは npx create-react-app xxx --typescript のようでしたが、これはもう不可能です。後続のパラメータは、直接 --typescript ではなく --template typescript にする必要があります。これは説明が必要です。私たちがミスをしたわけではありません。実際、最初はこのように使用されていました。現在は更新されており、方法が変わっています。このことから、Web フロントエンドの変化が速すぎることがわかります。1、2 年勉強しないと、認識が完全に覆される可能性があります。 これは、--typescript が作成できないことを意味するものではありません。エラーなしで作成されますが、デフォルトは react プロジェクトであり、typescript コンテンツは含まれません。

また、このようにプロジェクトを作成する場合、公式ドキュメントではcreate-react-appツールをグローバルにインストールしないことも推奨されています。最新バージョンでは、npx create-react-appを介して最新のreactプロジェクトを直接作成できます。create-react-appをグローバルにインストールし、バージョンが最新でない場合は、古いバージョンのreactプロジェクトが作成されている可能性が非常に高くなります。インストールされている場合は、npm uninstall -g create-react-appで直接アンインストールできます。

2. React プロジェクトに基づいて、TypeScript 関連の依存関係を追加するだけです。

npm インストール typescript @types/react --save

まず、デフォルトの React プロジェクトを作成します。

コマンドでは、--typescriptを直接追加しました。これは前に言ったことです。元々はこの方法で作成されていましたが、現在この方法は機能しません。ただし、エラーは報告されません。作成されるデフォルトのプロジェクトはreactプロジェクトで、使用されるテンプレートはcra-templateです。

TypeScript 依存関係を直接追加します。

実際、tsconfig.json ファイルを追加せずに、このように追加することができます。プロジェクトに大きな変更を加えずに依存関係を直接追加したようなものです。

index.js および App.js ファイルを index.tsx および App.tsx に変更すると、npm start または yarn start によってデフォルトで tsconfig.json ファイルが作成されます。これは公式 Web サイトでも明記されています。tsconfig.json を手動で作成する必要はありません。

デフォルトで生成された tsconfig.json ファイルの内容を確認することもできます。

{
  "コンパイラオプション": {
    "ターゲット": "es5",
    "ライブラリ": [
      「ドム」、
      "dom.iterable",
      「エスネクスト」
    ]、
    "allowJs": 真、
    "skipLibCheck": true、
    "esModuleInterop": 真、
    "allowSyntheticDefaultImports": true、
    "厳密": 真、
    "forceConsistentCasingInFileNames": true、
    "noFallthroughCasesInSwitch": true、
    "モジュール": "esnext",
    "モジュール解像度": "ノード",
    "resolveJsonModule": true、
    "isolatedModules": true、
    "noEmit": 真、
    "jsx": "react-jsx"
  },
  "含む"： [
    「ソース」
  ]
}

実際、手動で作成するとこうなると思うので、そのまま自動生成させるのが良いでしょう。

React+TypeScript によるプロジェクト構築の事例紹介はこれで終了です。React+TypeScript によるプロジェクト構築に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。