かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

TypeScript VSCode で Expression produces a union type that is too complex to represent エラーになる

途中参加した Next.js (TypeScript) + chakra-ui を使ったプロジェクトを VS Code で開いたらコンポーネントが全面的に 複雑すぎる型 Expression produces a union type that is too complex to represent. エラーになっていました
Expression produces a union type that is too complex to represent.
なんもわからん…

VSCode の TypeScript とプロジェクトで使用されている TypeScript のバージョンが異なるのが原因

1. ワークスペースで使用する TypeScript を変更する

  1. VS Code⌘ + Shift + P でコマンドパレットを開く
  2. TypeScript: Select TypeScript version command を選択
  3. プロジェクトで使用している TypeScript を選択する

TypeScript: Select TypeScript version command

今回は Use Workspace Version の v4.9.5 を選択すればOKでした

2. 自動的に Workspace の TypeScript を使用するようにする

今回と同様の問題が発生するたびに毎回上記を手動で行うのは面倒です。
VS Code にはどの TypeScript を使用するかの設定があるるので指定しておけば面倒にならなそうです!

.vscode/settings.json に下記の設定を追加する

{
  "typescript.enablePromptUseWorkspaceTsdk": true
}

typescript.enablePromptUseWorkspaceTsdktrue ならプロジェクト (Workspace) の Lint を使い、false なら VS Code の Lint を使用する設定

この設定があり VS Code と プロジェクト の TypeScript のバージョンが異なる場合 Workspace の TypeScript を使用するか聞かれるので Allow を選択すれば OK!

複数人で開発する TypeScript のプロジェクトでは setting.json"typescript.enablePromptUseWorkspaceTsdk": true の設定を含めておけば幸せになれそうです!

おわり ₍ ᐢ. ̫ .ᐢ ₎


[参考]