📖
React × TypeScript × Storybook で、CSF 2 の型を付ける
以下のような、 addon-controls を使った Storybook の CSF ファイルがある場合、 args は対象コンポーネントの props の型であってほしいが、当然 any になってしまう。
todo.stories.tsx
import { Todo } from './Todo'
export default {
title: 'Todo',
component: Todo
}
const Template = args => <Todo {...args} />
export const Default = Template.bind({})
Default.args = {
title: 'コードを書く',
done: false
}
そのような場合は、以下のように @storybook/react パッケージから型をインポートすればOK
(Prop は Todo コンポーネントのプロパティ定義が export されてるものとする）
todo.stories.tsx
import { Prop, Todo } from './Todo'
import { Story, Meta } from '@storybook/react
export default {
title: 'Todo',
component: Todo
} as Meta
const Template: Story<Prop> = args => <Todo {...args} />
export const Default = Template.bind({})
Default.args = {
title: 'コードを書く',
done: false
}
環境によっては、 Template.bind({}) の戻り値が、 Template の型を引き継がずに any 担ってしまうことがある。その場合は tsconfig に以下を追加することで、解決できる。
tsconfig.json
"strictBindCallApply": true
参考
Discussion