Vite + ReactプロジェクトをTypeScriptに移行する手順と発生しがちなエラーの解決方法

はじめに

Viteで作成したReactプロジェクト（JavaScript）をTypeScriptに移行する際、様々なエラーに遭遇することがあります。この記事では、移行手順と実際に遭遇したエラーの解決方法を紹介します。

環境

• Node.js
• npm create vite@latestで作成したReactプロジェクト（JavaScript）

1. 必要なパッケージのインストール

まず、TypeScriptと型定義ファイルをインストールします：

npm install -D typescript @types/react @types/react-dom

インストール後、正しくインストールされたか確認：

npm list typescript
npm list @types/react
npm list @types/react-dom

2. TypeScript設定ファイルの作成

tsconfig.jsonの作成

npx tsc --init

生成されたtsconfig.jsonを以下の内容で上書き：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.jsonの作成

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

3. vite.config.jsの変更

vite.config.jsをvite.config.tsにリネームし、内容を更新：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

4. main.jsxの修正

src/main.jsxをsrc/main.tsxにリネームし、以下のように修正：

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'  // 拡張子を.tsxに変更

// rootの存在チェックを追加
const rootElement = document.getElementById('root')

if (!rootElement) {
  throw new Error('Failed to find the root element')
}

const root = createRoot(rootElement)

root.render(
  <StrictMode>
    <App />
  </StrictMode>
)

遭遇したエラーと解決方法

エラー1: tsconfig.node.jsonが見つからない

ファイル '/path/to/project/tsconfig.node.json' が見つかりません。ts

解決策: tsconfig.node.jsonファイルを作成し、上記の設定を追加します。

エラー2: vite.config.tsが見つからない

構成ファイル 'tsconfig.node.json' で入力が見つかりませんでした。指定された 'include' パスは '["vite.config.ts"]' でした。

解決策: vite.config.jsをvite.config.tsにリネームし、内容を更新します。

エラー3: rootElementのnullチェックエラー

型 'HTMLElement | null' の引数を型 'Container' のパラメーターに割り当てることはできません。
型 'null' を型 'Container' に割り当てることはできません。

解決策: document.getElementById('root')の戻り値に対してnullチェックを追加します。

動作確認

すべての設定が完了したら、以下のコマンドで動作確認：

npx tsc --noEmit
npm run dev

まとめ

TypeScriptへの移行に時間がかかってしまい、記事にしようと思いました。その中で、いくつかのエラーに遭遇することがあります。本記事で紹介した解決方法を参考に、エラーに遭遇しても一つずつ解決していって欲しいです。