📝

Chakra UI カスタムテーマの型定義拡張

2022/01/18に公開約2,500字

はじめに

Chakra UIのバージョンを 1.6.5 から 1.7.4 へ上げたときに、カスタマイズしたthemeのvariantの指定で型エラーが起こるようになりました。原因を調べると 1.7.4 に上がったタイミングで、カスタマイズしたthemeの型の拡張設定をしていない場合、型エラーで怒られることがわかりました。
今回の遭遇したエラーが発生するまで、themeをカスタマイズして作成したvariantやsizeの型を定義でき、補完が効くことを知らなかったので、発生したエラーや調べたことをまとめました。

テーマのカスタマイズ

まず、Chakra UIではサイト全体のスタイルを定義したい場合、themeのカスタマイズを定義できます。今回はテーマの設定は書いていましたが、型定義拡張の設定はしていませんでした。

https://chakra-ui.com/docs/theming/customize-theme
コンポーネントへのスタイル適用に関して、themeでサイト全体に指定する以外にも、いろいろやり方があって、こちらの記事が参考になりました。

カスタマイズしたテーマの型定義拡張方法

こちらが今回やりたかったことです。この拡張設定をすると、型の補完が効くようになるし、冒頭で書いたエラーも発生しなかったはずでした。基本的にドキュメント通りにやればうまくいきます。

https://chakra-ui.com/docs/theming/advanced

以下のコマンドを実行して、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.

https://chakra-ui.com/changelog#02-01-2022

以下のIssueが反映され、型エラーが出るようになってそうでした。正確な型定義情報にするため、variantなどカスタマイズしたthemeを追加した場合、その追加したthemeの型を生成して使わないといけなそうです。

https://github.com/chakra-ui/chakra-ui/issues/5153

https://github.com/chakra-ui/chakra-ui/pull/5243

まとめ

  • Chakra UIのカスタムテーマで、variantやsizeなどをカスタマイズしたコンポーネントは型定義を拡張できます。ドキュメントは こちら です。

  • 逆に型定義を拡張する設定をしていない場合、1.7.4からIssueが反映されて、TypeScriptのエラーが発生するようになります。

GitHubで編集を提案

Discussion

ログインするとコメントできます