create-react-appでTypeScriptを使う方法

create-react-appシリーズ

このブログポストはシリーズで作成しております。次はcreate-react-appのシリーズのリストです。

Reactとは
create-react-app
create-react-appでTypeScriptを使う方法
[TypeScript] create-react-appで絶対パスのimport
create-react-appでstyled-componentsの使い方
Jest
create-react-appでreact-testing-libraryを使ってテストする

概要

以前ブログでcreate-react-appを使ってReactプロジェクトを始める方法について説明しました。今回のブログポストではcreate-react-appで生成したReactプロジェクトでTypeScriptを使う方法について説明します。

ここで紹介するソースコードは下記のリンクで確認できます。

GitHub: https://github.com/dev-yakuza/study-create-react-app/tree/main/2.typescript

プロジェクト生成

次のコマンドを使ってReactプロジェクトを生成します。

npx create-react-app my-app

そして次のコマンドを使ってReactプロジェクトを実行します。

# cd my-app
npm start

問題なくReactプロジェクトが実行されたら下記のような画面をブラウザで確認することができます。

TypeScript適用

次はcreate-react-appで生成したReactプロジェクトへTypeScriptを適用する方法について説明します。

インストール

create-react-appで生成したReactプロジェクトへTypeScriptを適用するため必要なライブラリをインストールする必要があります。次のコマンドを使ってTypeScriptへ必要なライブラリをインストールします。

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

設定

TypeScriptを使うためtsconfig.jsonを使ってTypeScriptに関する設定をする必要があります。

TypeScriptのため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"
  },
  "include": [
    "src",
    "custom.d.ts"
  ]
}

ファイル拡張子修正

次はTypeScriptがソースコードを認識できるようにファイルの拡張子を修正する必要があります。srcフォルダの.jsファイル拡張子を.tsxまたは.tsの拡張子で変更します。

App.js > App.tsx
App.test.js > App.test.tsx
index.js > index.tsx
reportWebVitals.js > reportWebVitals.ts
setupTests.js > setupTests.ts

TypeScriptエラー修正

このように.jsファイル拡張子を.tsxまたは.tsで修正したらTypeScriptがエラーを表示します。このエラーを修正するためApp.test.tsxとApp.tsxファイルを開いて最上段へ下記の内容を追加します。

import React from 'react';

そしてreportWebVitals.tsファイルを開いて下記のように修正します。

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
...

そして./src/custom.d.tsファイルを作って下記のように修正します。

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
    SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;
}

実行

このように修正したReactプロジェクトがうまく起動するか確認するため下記のコマンドを実行してReactプロジェクトを実行します。

npm start

問題なくTypeScriptを設定したら下記のようにReactプロジェクトがブラウザで実行されることが確認できます。

Template

create-react-appを使う理由はReactプロジェクトでプロジェクトを生成する時、たくさんの設定をしないためですが、TypeScriptのためたくさんの設定をしました。しかし、TypeScriptは最近のJavaScriptでは重要な役割をしてるのでReactでもTypeScriptを使わなきゃならないです。

create-react-appもこのようなTypeScriptの重要性を認識してるので、TypeScriptをもっと簡単に提供するためTemplateオプションを提供してます。そしたら、create-react-appのTempateオプションを使ってReactのTypeScriptプロジェクトを生成してみましょう。

次のコマンドを実行してReactでTypeScriptが適用されたプロジェクトを生成します。

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

その後、当該フォルダを開いて見ると私たちが上で頑張って設定した内容と同じことが確認できます。

完了

今回のブログポストではcreate-react-appで生成したReactプロジェクトでTypeScriptを適用する方法についてみてみました。また、create-react-appを使って新しいReactプロジェクトを生成する時、Templateオプションを使ってもっと簡単にTypeScriptが適用されたReactプロジェクトを生成する方法もみてみました。

今度は皆さんのReactプロジェクトへTypeScriptを適用してみて下さい。

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！