TypeScript 配列とオブジェクトの継承

関数で複雑な型を参照する時にハマったのでまとめておく

---

オブジェクトの配列を関数に継承する

type InputProp = {
  label: string;
  value: string;
};

この型があり

const forms: InputProp = [
    { label: "id", value: "0001" },
    { label: "name", value: "Tak" },
]

<FormTable rows={forms} />

このように受け渡すと失敗する
rows がないと言われる。

export type middleProp = {
  rows: InputProp[];
};

そのため、InputProp を使うためのミドルウェアとして
このような中にはさむ型の　middleProp が必要になる。

https://yutaro-blog.net/2022/03/21/react-search/

この yutaro さんの記事でも

type member = {
  name: string;
  country: string;
  food: string;
};

type MemberList = Array<member>;

member というオブジェクトの型
それを元にした memberList というオブジェクト配列の型を作成して

  const [memberList, setMemberList] = useState<MemberList>(allMemberList);

allMeberList という実際のデータから state を作るときの型に利用している。

---

オブジェクトのオブジェクトのタイプを使う

export type ObjectProp = {
  title: string;
  subTitle?: string;
};

オブジェクトの型を定義して

export type MiddleProp = {
  forms: CpFormObjectProp;
};

引き渡し用のミドルウェア的な型を定義

const formObject: MiddleProp["forms"] = {
  title: "BB";
  subTitle?: "Toy Gun Ammo";
};

ミドルウェアから form のプロパティに入っている
オブジェクトの型を呼び出し、オブジェクトの中身を入れる

<FormTable {...formObject} />

これは　forms では渡せないため、スプレッドで渡す。