メインコンテンツへスキップ

TypeScript の追加

注: この機能は react-scripts@2.1.0 以降で利用可能です。

TypeScript は、プレーンな JavaScript にコンパイルされる、型付きの JavaScript のスーパーセットです。

インストール​

TypeScript を使用して新しい Create React App プロジェクトを開始するには、次を実行します。

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

または

yarn create react-app my-app --template typescript

以前に npm install -g create-react-app を使用して create-react-app をグローバルにインストールした場合は、npm uninstall -g create-react-app または yarn global remove create-react-app を使用してパッケージをアンインストールし、npx が常に最新バージョンを使用するようにすることをお勧めします。

create-react-app のグローバルインストールは、サポートされなくなりました。

既存の Create React App プロジェクトに TypeScript を追加するには、まずインストールします。

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

または

yarn add typescript @types/node @types/react @types/react-dom @types/jest

次に、任意のファイルを TypeScript ファイル (例: src/index.js を src/index.tsx) に名前を変更し、開発サーバーを再起動します!

型エラーは、ビルド時と同じコンソールに表示されます。開発を続行するか、プロジェクトをビルドする前に、これらの型エラーを修正する必要があります。高度な設定については、こちらを参照してください。

TypeScript と React の始め方​

tsconfig.json ファイルを作成する必要はありません。自動的に作成されます。生成された TypeScript 設定を編集することは許可されています。

トラブルシューティング​

プロジェクトが TypeScript を有効にして作成されていない場合、npx は create-react-app のキャッシュされたバージョンを使用している可能性があります。以前にインストールしたバージョンを npm uninstall -g create-react-app または yarn global remove create-react-app で削除してください ( #6119 を参照)。

現在 create-react-app-typescript を使用している場合は、Create React App への移行方法について、このブログ記事を参照してください。

定数 enum と名前空間はサポートされていません。 Babel を TypeScript で使用する際の制約については、こちらをご覧ください。