simple-web-system technology

Webに関する技術をシンプルに扱うブログ

reactのstorybookでcomponentに複雑なobjectを渡す必要がある時に楽する方法

例えばこんなinterfaceのデータがある

interface Data {
  property1: string
  property2: string
  // ...
  // 連番で続く
  // ...
  property30: string
  // また別の型とか
  nest: NestedData;
}

この内、上から10個だけ欲しいが、全てのプロパティが必要なわけではない時どうするか。

単純な話で必要なプロパティだけ定義して、最後にasを必要な型に変換してやればいい。 この際、Partialを使うと補完も出て書きやすい。(Partialなしでも可)

const data: Partial<Data> = {
  property1: "text",
} as Data;

<Component data={data} />

asは実行時に評価されるため、仮に必要なプロパティが欠けてる場合は、実行時にはundefinedになる。 上記の場合、property2の指定は必須のはずだが、実行時にはundefinedになっている。

さて、この手法が役立つのはuseContext等でStateやfunctionをまとめて定義している時だ。 自分もuseContextで持ってるStateやfunctionのMockをどうするか延々と悩んだ結果、この手法にいきついた。

あくまでstorybookでそこまで厳密に動かす必要もなかったので、ts-mockitoとかts-auto-mockとか全然いらなかった。。。