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