TypeScript 複雑すぎるユニオン型エラー(ts2590)の解決法
主な原因
このエラーは主に以下の状況で発生します:
- TypeScriptバージョンの不一致
- Chakra UIとTypeScriptの互換性問題
- Emotion.js設定との競合
- 型推論の複雑性の限界
問題の詳細説明
Chakra UIのButton
コンポーネントを使用する際、以下のエラーが発生する場合があります:
Expression produces a union type that is too complex to represent. ts(2590)
最小再現コード例:
import { Button } from "@chakra-ui/react"
function Page() {
return <Button onClick={(event) => {}}>Text</Button>
}
このエラーはTypeScriptがコンポーネントのプロップスタイプを処理する際、型の組合せ(ユニオン型)が複雑すぎると判定した場合に発生します。
効果的な解決策
方法1: VSCodeでプロジェクトのTypeScriptバージョンを使用する (推奨)
最も確実な解決策は、VSCodeがプロジェクト固有のTypeScriptバージョンを使用するよう設定することです。
手順1: GUIでの設定方法
- VSCodeで
.ts
または.tsx
ファイルを開く - コマンドパレットを開く(
Ctrl+Shift+P
orF1
) - 「TypeScript: Select TypeScript Version」を選択
- 「Use Workspace Version」を選択
手順2: 設定ファイルでの設定
.vscode/settings.json
に以下を追加(ファイルがない場合は新規作成):
{
"typescript.enablePromptUseWorkspaceTsdk": true,
"typescript.tsdk": "node_modules/typescript/lib"
}
注意点
typescript.tsdk
パスは絶対パスで指定してください。相対パスでは正常に動作しない場合があります
方法2: tsconfig.jsonのjsxImportSource
を修正する
特にNX環境やEmotion.jsを使用している場合に有効:
tsconfig.json
から以下の行を削除
"jsxImportSource": "@emotion/react"
- Emotionを使用している場合は代わりに
types
を追加
{
"compilerOptions": {
"types": ["@emotion/react/types/css-prop"]
}
}
- キャッシュをクリア
rm -rf node_modules yarn.lock package-lock.json dist .next
npm install # or yarn install
方法3: TypeScriptバージョンをダウングレード
最新のTypeScript(5.x)で問題が発生する場合:
npm install typescript@4.9.5 --save-exact
# または
yarn add typescript@4.9.5
TIP
Next.js 13を使用している場合、デフォルトのTypeScript 5.xを4.9.5に変更することで解決できるケースが報告されています
方法4: Chakra UIライブラリの更新
バージョン固有の問題を解決:
npm install @chakra-ui/react@latest
# 現在の最新安定版 (2024年時点で2.7.x)
その他の有効な手法
コンポーネント固有のワークアラウンド
特定コンポーネントでエラーが発生する場合:
<Checkbox
colorScheme="red"
css="" // 空のcssプロップを追加
/>
依存関係のクリーンインストール(上記で解決しない場合)
キャッシュと依存関係を完全にリセット:
npm ci # or npm clean-install
# または
yarn install --force
避けるべき非推奨の方法
非推奨
以下の方法は根本解決にならず、問題を隠蔽するだけです:
// @ts-ignore // エラーを無視(非推奨)
<Button onClick={() => {}}>Click</Button>
厳格モードの無効化
tsconfig.json
で"strict": false
に変更するとエラーは消えますが、型安全性が大幅に低下します
技術的背景と原因
このエラーが発生する根本的な原因:
- Chakra UIのコンポーネントが非常に多くのプロップス型をサポート
- イベントハンドラと組み合わせた場合の型推論の複雑化
- Emotion等のCSS-in-JSライブラリとの型競合
- TypeScriptコンパイラのユニオン型制限(最大100,000要素)
2023年後半のTypeScript 5.1+ではこの制限が緩和されましたが、大規模プロジェクトでは依然として発生する可能性があります。
最終的な推奨手順
- VSCodeのTSバージョンをワークスペースに設定
jsxImportSource
の設定を確認・調整- Chakra UI/TypeScriptを最新版に更新
- コンポーネント使用時に
css
プロパティを追加 - 上記で解決しない場合のみTypeScriptを4.9.5にダウングレード
これらの対策を行うことで、ts(2590)
エラーを効果的に解決し、Chakra UIをTypeScript環境で安全に使用できるようになります。