Vue.js の Storybook で args に型を指定

Vue.js の .stories.ts ファイル内で args が any になっていたので対応してみました。

• 対応した内容

追記

You can type check SFC files with vue-tsc and get editor support in VSCode by installing the Vue Language Features (Volar) and TypeScript Vue Plugin extensions.

2 つの拡張と @storybook/vue3 を使用することにより
.stories.ts ファイル内でも Vue コンポーネントの型が確認できるようになっていたようです。

初期設定

以下の手順により Vue.js のプロジェクト設定と Storybook 設定を実施

yarn create vite . --template vue-ts
yarn
npx sb init --builder @storybook/builder-vite

設定後、 src/stories/Button.stories.js ファイルの拡張子を .ts に変更

ここで Button.stories.ts ファイルを開くと args など any になってしまっています。

対応内容

以下が対応内容となります。

Storybook の args の型について #1

• .stories.ts ファイル内で Storybook 用の型指定
• コンポーネントのスクリプトを .ts ファイルに分離

.stories.ts ファイル内で Storybook 用の型指定

上記 Issue での回答を参考に型指定を実施

• .stories.ts での型指定

ただし、この状態だとコンポーネントの型が取得できていませんでした。

コンポーネントのスクリプトを .ts ファイルに分離

以下はコンポーネントの型取得について参考にした Issue です。

今回対応した PR では前述の .stories.ts 内での型指定の手順と前後しているのですが、
.stories.ts 内でコンポーネントの型を取得するためにスクリプト部分を分離しました。

• コンポーネントからスクリプトを .ts ファイルに分離

SFC とは・・・

Nuxt を使用する場合か、そのバージョンによってはコンポーネント側で拡張子を指定する必要があるかもしれません。

<script lang="ts" src="./Button.ts"></script>

対応の結果

対応により型が指定され argsType や args でのサジェストが出るようになりました。

もしかしたら別に正しい方法があるのかもしれません。