Chakra UI カスタムテーマの型定義拡張
はじめに
Chakra UIのバージョンを 1.6.5 から 1.7.4 へ上げたときに、カスタマイズしたthemeのvariantの指定で型エラーが起こるようになりました。原因を調べると 1.7.4 に上がったタイミングで、カスタマイズしたthemeの型の拡張設定をしていない場合、型エラーで怒られることがわかりました。
今回の遭遇したエラーが発生するまで、themeをカスタマイズして作成したvariantやsizeの型を定義でき、補完が効くことを知らなかったので、発生したエラーや調べたことをまとめました。
テーマのカスタマイズ
まず、Chakra UIではサイト全体のスタイルを定義したい場合、themeのカスタマイズを定義できます。今回はテーマの設定は書いていましたが、型定義拡張の設定はしていませんでした。
コンポーネントへのスタイル適用に関して、themeでサイト全体に指定する以外にも、いろいろやり方があって、こちらの記事が参考になりました。
カスタマイズしたテーマの型定義拡張方法
こちらが今回やりたかったことです。この拡張設定をすると、型の補完が効くようになるし、冒頭で書いたエラーも発生しなかったはずでした。基本的にドキュメント通りにやればうまくいきます。
以下のコマンドを実行して、CLIを追加とジェネレートします。
$ yarn add --dev @chakra-ui/cli
$ npx chakra-cli tokens ./src/themes/index.ts // npx chakra-cli tokens <path/to/your/theme.(js|ts)>
スクリプトに以下を追加
// package.json
"gen:theme-typings": "chakra-cli tokens ./src/themes/index.ts",
"postinstall": "npm run gen:theme-typings"
確認すると補完されてました。以上で型定義の拡張の設定は終わりです。
今回の遭遇したエラー
1.6.5から1.7.4へバージョン上げたときの型エラーについてです。
1.6.5から1.7.4に上げた際のエラー
variantの型でエラーが発生するようになりました。
$ yarn tsc --noEmit
... 抜粋
src/pages/form/step4/index.tsx:218:21 - error TS2322: Type 'string' is not assignable to type 'undefined'.
218 <Text variant="p1">
... 抜粋
エラーの原因
1.6.5からどの時点のバージョンで発生するか確認すると、1.7.4 に上げたタイミングで発生してました。チェンジログを見たところ、カスタマイズしたthemeの型を拡張していない場合、型エラーで怒られるようでした。（テーマの型定義を拡張したらエラー出なくなりました）
チェンジログ
Use the feature flag --strict-component-types for @chakra-ui/cli tokens to generate strict component type for the theming props variant and size.
以下のIssueが反映され、型エラーが出るようになってそうでした。正確な型定義情報にするため、variantなどカスタマイズしたthemeを追加した場合、その追加したthemeの型を生成して使わないといけなそうです。
Discussion