Skip to content

TypeScript 複雑すぎるユニオン型エラー(ts2590)の解決法

主な原因

このエラーは主に以下の状況で発生します:

  • TypeScriptバージョンの不一致
  • Chakra UIとTypeScriptの互換性問題
  • Emotion.js設定との競合
  • 型推論の複雑性の限界

問題の詳細説明

Chakra UIのButtonコンポーネントを使用する際、以下のエラーが発生する場合があります:

ts
Expression produces a union type that is too complex to represent. ts(2590)

最小再現コード例:

tsx
import { Button } from "@chakra-ui/react"

function Page() {
  return <Button onClick={(event) => {}}>Text</Button>
}

このエラーはTypeScriptがコンポーネントのプロップスタイプを処理する際、型の組合せ(ユニオン型)が複雑すぎると判定した場合に発生します。

効果的な解決策

方法1: VSCodeでプロジェクトのTypeScriptバージョンを使用する (推奨)

最も確実な解決策は、VSCodeがプロジェクト固有のTypeScriptバージョンを使用するよう設定することです。

手順1: GUIでの設定方法

  1. VSCodeで.tsまたは.tsxファイルを開く
  2. コマンドパレットを開く(Ctrl+Shift+P or F1
  3. 「TypeScript: Select TypeScript Version」を選択
  4. 「Use Workspace Version」を選択

ワークスペースバージョンの選択

手順2: 設定ファイルでの設定

.vscode/settings.jsonに以下を追加(ファイルがない場合は新規作成):

json
{
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

注意点

typescript.tsdkパスは絶対パスで指定してください。相対パスでは正常に動作しない場合があります

方法2: tsconfig.jsonのjsxImportSourceを修正する

特にNX環境やEmotion.jsを使用している場合に有効:

  1. tsconfig.jsonから以下の行を削除
json
"jsxImportSource": "@emotion/react"
  1. Emotionを使用している場合は代わりにtypesを追加
json
{
  "compilerOptions": {
    "types": ["@emotion/react/types/css-prop"]
  }
}
  1. キャッシュをクリア
bash
rm -rf node_modules yarn.lock package-lock.json dist .next
npm install   # or yarn install

方法3: TypeScriptバージョンをダウングレード

最新のTypeScript(5.x)で問題が発生する場合:

bash
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ライブラリの更新

バージョン固有の問題を解決:

bash
npm install @chakra-ui/react@latest
# 現在の最新安定版 (2024年時点で2.7.x)

その他の有効な手法

コンポーネント固有のワークアラウンド

特定コンポーネントでエラーが発生する場合:

tsx
<Checkbox
  colorScheme="red"
  css=""  // 空のcssプロップを追加
/>

依存関係のクリーンインストール(上記で解決しない場合)

キャッシュと依存関係を完全にリセット:

bash
npm ci  # or npm clean-install
# または
yarn install --force

避けるべき非推奨の方法

非推奨

以下の方法は根本解決にならず、問題を隠蔽するだけです:

ts
// @ts-ignore  // エラーを無視(非推奨)
<Button onClick={() => {}}>Click</Button>

厳格モードの無効化

tsconfig.json"strict": falseに変更するとエラーは消えますが、型安全性が大幅に低下します

技術的背景と原因

このエラーが発生する根本的な原因:

  1. Chakra UIのコンポーネントが非常に多くのプロップス型をサポート
  2. イベントハンドラと組み合わせた場合の型推論の複雑化
  3. Emotion等のCSS-in-JSライブラリとの型競合
  4. TypeScriptコンパイラのユニオン型制限(最大100,000要素)

2023年後半のTypeScript 5.1+ではこの制限が緩和されましたが、大規模プロジェクトでは依然として発生する可能性があります。

最終的な推奨手順

  1. VSCodeのTSバージョンをワークスペースに設定
  2. jsxImportSourceの設定を確認・調整
  3. Chakra UI/TypeScriptを最新版に更新
  4. コンポーネント使用時にcssプロパティを追加
  5. 上記で解決しない場合のみTypeScriptを4.9.5にダウングレード

これらの対策を行うことで、ts(2590)エラーを効果的に解決し、Chakra UIをTypeScript環境で安全に使用できるようになります。