2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

はじめに

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.jsvite.config.tsにリネームし、内容を更新:

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

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

4. main.jsxの修正

src/main.jsxsrc/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.jsvite.config.tsにリネームし、内容を更新します。

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

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

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

動作確認

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

npx tsc --noEmit
npm run dev

まとめ

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?