zukucode
主にWEB関連の情報を技術メモとして発信しています。
ASP.NET

ASP.NET Core + Reactで作成したプロジェクトにTypeScriptを導入する

ASP.NET Core + React dotnet watchの再起動時にReactのプロジェクトを再起動させない方法で、ASP.NET Core + Reactの構成で、hot reloadを使用した開発ができるようになりました。

ASP.NET + Reactのテンプレートで作成したプロジェクトは、TypeScriptを使用する構成になっていないため、独自にTypeScriptを導入します。

create-react-appのpwa-typescriptのテンプレートで作成したプロジェクトを参考に導入していきます。

ファイルをコピーするため、以下のコマンドでpwa-typescriptのプロジェクトを作成しておくと便利です。

npx create-react-app 適当なフォルダ名 --template pwa-typescript

package.jsonの確認

TypeScirptの導入にあたって、まずはpackage.jsonのdevDependenciesにtypescriptが記載されていることを確認します。

ASP.NET + Reactのテンプレートで作成したプロジェクトは、TypeScriptを使用する構成になっていませんが、なぜかtypescriptはデフォルトでインストールされています。

package.json
  "devDependencies": {
    "ajv": "^8.11.0",
    "cross-env": "^7.0.3",
    "eslint": "^8.18.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.0",
    "eslint-plugin-react": "^7.30.1",
    "nan": "^2.16.0",
    "typescript": "^4.7.4"
  },

パッケージのインストール

以下の型定義情報が必要なので、インストールします。

  • @types/react
  • @types/react-dom
  • @types/react-router-dom
$ npm install @types/react @types/react-dom @types/react-router-dom -D

tsconfig.jsonの作成

Reactのプロジェクトのルートディレクトリ（package.jsonと同じ階層）に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"
  ]
}

index.jsの修正

デフォルトで作成されたjsファイルを修正していきます。

まずはsrc\index.jsファイルを修正します。

ファイル名の拡張子をtsxに変更します。

するとVSCode上でエラーが表示されますので、エラーを解消するために以下のように修正を行います。

index.tsx
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href') ?? '';
const rootElement = document.getElementById('root');
const rootElement = document.getElementById('root') as HTMLElement;
const root = createRoot(rootElement);

root.render(
  <BrowserRouter basename={baseUrl}>
    <App />
  </BrowserRouter>);

修正後、npm startでプロジェクトを実行すると、エラーにならずに実行されることが確認できます。

ファイルのコピー

jsのままでもエラーは発生しませんが、他のjsファイルも必要に応じてtsまたはtsxに拡張子を変更していきます。

以下のファイルはpwa-typescriptプロジェクトのファイルをコピーしたほうが早いので、拡張子の変更ではなく、コピーして修正します。

以下のファイルを削除します。

  • reportWebVitals.js
  • service-worker.js
  • serviceWorkerRegistration.js
  • setupTests.js

以下のファイルをpwa-typescriptプロジェクトからコピーして追加します。

  • react-app-env.d.ts
  • reportWebVitals.ts
  • service-worker.ts
  • serviceWorkerRegistration.ts
  • setupTests.ts

これでTypeScriptの導入は完了です。

ASP.NET

関連記事