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

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript 関数の定義と使用例のチュートリアル
  • 1つの記事でTypeScriptのデータ型について学ぶ
  • Typescript の as、疑問符、感嘆符の詳細な説明
  • webpackを使用してTypeScriptコードをパッケージ化およびコンパイルする方法を教えます
  • Typescript での infer キーワードの使用に関する詳細な理解
  • TypeScript の Enum が問題となる理由
  • TypeScript をインストール、使用、自動コンパイルする方法に関するチュートリアル
  • TypeScript インターフェース定義ケースチュートリアル

<<:  IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

>>:  MySQL ピボットテーブルについての簡単な説明

推薦する

MySQL IFNULL判定問題の解決方法

問題: mybatis によって返される null 型のデータが消え、フロントエンドの表示にエラーが...

WeChatアプレットは左にスワイプしてリスト項目を削除する効果を実現

この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...

Centos7にTenda U12ワイヤレスネットワークカードドライバーをインストールする際の問題を解決する

解決プロセス:方法1: CentOS7.3 のデフォルトのカーネル バージョンは低く、3.10.0-...

Linux 7.7 でスワップ パーティション SWAP を設定する方法

Linux システムの Swap パーティション、つまり swap パーティションは、一般に仮想メモ...

Linux で大きなファイルの内容を消去または削除する 5 つの方法

Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...

Navicat は CSV データを MySQL にインポートします

この記事では、Navicatを使用してcsvデータをmysqlにインポートする方法を参考までに紹介し...

Web ページでの Unicode 文字の使用の概要 (&#、\u など)

初期のコンピュータでは ASCII 文字しか使用できませんでしたが、コンピュータのアプリケーションの...

Centos7 への MySQL8 のインストールチュートリアル

MySQL 8 の新機能: MySQL をバージョン 5.x から 8.x に直接アップグレードする...

nginx を介してローカルでリバースプロキシを構成するプロセス全体

序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP ...

Reactスロットの使い方

目次必要コアアイデアReactでスロットを実装する2つの方法必要コンポーネントを自分で書きました。コ...

Vue を通じて QR コードスキャン機能を実装する

ヒントこのプラグインは https プロトコルでのみアクセスできます。http プロトコルはうまく機...

Vue+Openlayer で select を使用して要素を選択する実装コード

効果画像: 実装コード: <テンプレート> <div id="map&q...

Linux環境でのshadowsocks+polipoグローバルプロキシの設定

1. シャドウソックスをインストールするsudo apt-get install python-pi...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

シンプルなログインページを実装するための HTML+jQuery

目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...