VS CodeのChakra UIコンポーネントを使ったときに「式は、複雑すぎて表現できない共用体型を生成します。ts()2590」エラーが起こった時には

エラー内容

Chakra UIのコンポーネントを使用したときに、vscode上で下記のような赤線のエラーが起こってしまいました。

式は、複雑すぎて表現できない共用体型を生成します。ts(2590)

対応方法

vscodeのtypescriptのバージョンとディレクトリにあるpackage.jsonのtypescriptのバージョンが異なっているときに起こるようなので、下記の方法で同じバージョンとなるように設定してください。

1. vscodeでtypescriptのファイルを開く
2. コマンドパレットを開いて(ショートカットは command + Shift + P)、TypeScript: TypeScriptのバージョンを選択...を選択する
3. ワークスペースのバージョンを使用を選択する

私の場合は最初に3のワークスペースのバージョンを使用がなかったので、.vscode/.settings.jsonに下記を追加しました。

 "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "node_modules/typescript/lib",

参考

https://zenn.dev/nyatinte/articles/1777eb483319d2

https://stackoverflow.com/questions/74847053/how-to-fix-expression-produces-a-union-type-that-is-too-complex-to-represent-t