Storybook 7「satisfiesMeta」ってなに？

少し前にStorybookのバージョン7が登場し現在キャッチアップ中の私です。
その中でも本記事は「型安全」が向上したことについてフォーカスしたいと思います！

本記事は勉強録です。
学習中につき誤った解釈がある場合はぜひご指摘ください…。

どう型の安全性が向上したのか？

Storybookの7からは必須の引数がない場合にエラーを出しくれるようになりました！

公式のサイトにもありますが、CSF3とTypeScript4.9　satisfies operatorの組み合わせによって実現できるのでご認識ください。

satisfiesMetaどうやって使うのか？

公式サイトのコードを引用して理解を深めたいと思います。

CSF2だと下記のように書かれてました。

export default {
  title: 'Button',
  component: Button
} as Meta<typeof Button>;

CSF3でsatisfiesMetaを利用すると下記のようにかけます。

const meta = {
  title: 'Button',
  component: Button,
} satisfies Meta<typeof Button>;

こうすることで必須引数が不足している場合TypeScriptのエラーが出るようになります。

まとめ

satisfiesMetaが利用できるようになったことで他にも嬉しいことがあるようです。
これまでStorybookには知っている程度しか触れてこなかった筆者はそのメリットを説明できるほどの知識が現時点ではありませんが、satisfiesMetaを使って安全な運用ができるように書き方含め学んでいきたいと思います！