例えばこんな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とか全然いらなかった。。。
