途中参加した Next.js (TypeScript) + chakra-ui を使ったプロジェクトを VS Code で開いたらコンポーネントが全面的に 複雑すぎる型 Expression produces a union type that is too complex to represent.
エラーになっていました
なんもわからん…
VSCode の TypeScript とプロジェクトで使用されている TypeScript のバージョンが異なるのが原因
1. ワークスペースで使用する TypeScript を変更する
- VS Code で
⌘ + Shift + P
でコマンドパレットを開く TypeScript: Select TypeScript version command
を選択- プロジェクトで使用している TypeScript を選択する
今回は Use Workspace Version の v4.9.5
を選択すればOKでした
2. 自動的に Workspace の TypeScript を使用するようにする
今回と同様の問題が発生するたびに毎回上記を手動で行うのは面倒です。
VS Code にはどの TypeScript を使用するかの設定があるるので指定しておけば面倒にならなそうです!
.vscode/settings.json
に下記の設定を追加する
{ "typescript.enablePromptUseWorkspaceTsdk": true }
typescript.enablePromptUseWorkspaceTsdk
は true
ならプロジェクト (Workspace) の Lint を使い、false
なら VS Code の Lint を使用する設定
この設定があり VS Code と プロジェクト の TypeScript のバージョンが異なる場合 Workspace の TypeScript を使用するか聞かれるので Allow を選択すれば OK!
複数人で開発する TypeScript のプロジェクトでは setting.json に "typescript.enablePromptUseWorkspaceTsdk": true
の設定を含めておけば幸せになれそうです!
おわり ₍ ᐢ. ̫ .ᐢ ₎
[参考]
- TypeScript: Expression produces a union type that is too complex to represent. ts(2590) · Issue #3714 · chakra-ui/chakra-ui · GitHub
- typescript - How to fix "Expression produces a union type that is too complex to represent. ts(2590)"? - Stack Overflow
- 2022年4月26日 りあクト! 第6章 ESLintの適用ルールをカスタマイズする (p.54~) - 6時だョ!!全員集合!!
- ChakraUIの「式は、複雑すぎて表現できない共用体型を生成します。ts(2590)」対処法