動的に型が変わるオブジェクトをpropsで渡したい

Question

Next.js + TypeScriptでシステムを作っています。
componentにpropsを渡す部分で Type 'CategoryDetail[]' is missing the following properties のエラーが出ているのでそれを消したいのですが、どのように解消したら良いでしょうか。

設計として少し特殊なのが、APIからのjsonレスポンスの型がカテゴリによって異なる点です。
具体的には、以下のように details の配列には Details が入るのですが、 Details の中の category_details は category_name によって Shirt だったり Bag だったりします。

{
    "data": {
        "id": 1,
        "details": [
            {
                "id": 1,
                "category_name": "shirt",
                "category_detail": {
                    "id": 1,
                    "size": "small",
                    "color": "white"
                }
            },
            {
                "id": 2,
                "category_name": "bag",
                "category_detail": {
                    "id": 13,
                    "width": 30,
                    "height": 15
                }
            },
            {
                "id": 3,
                "category_name": "shirt",
                "category_detail": {
                    "id": 45,
                    "size": "large",
                    "color": "pink"
                }
            }
        ]
    }
}

export interface Box {
  id: number;
  details: Details[];
}

export interface Details {
  id: number;
  category_name: string;
  category_detail: CategoryDetail[];
}

export interface Shirt {
  id: number;
  size: string;
  color: string;
}

export interface Bag {
  id: number;
  width: number;
  height: number;
}

export type CategoryDetail = Shirt | Bag;

上記の前提で、問題のエラーが出ている箇所は以下です。

const Foo: NextPage = () => {
  const { box } = useFetchBox();

  return (
    <div>
      {box.details.map((detail) => (
        {detail.category_name === "shirt" && <ShirtDetail categroy_detail={detail.category_detail} />} // error: Type 'CategoryDetail[]' is missing the following properties from type 'ShirtDetail': id, size, color
        {detail.category_name === "bag" && <BagDetail categroy_detail={detail.category_detail} />} // error: Type 'CategoryDetail[]' is missing the following properties from type 'BagDetail': id, width, height
      ))}
    </div>
  )
}

detail.category_name === "shirt" && のように指定した上で <ShirtDetail /> にpropsを渡そうとしているので動きそうなものなんですが、上記の通りlintエラーが出てしまいます。なにがいけないのでしょうか？（ interface の定義方法がなにかしら誤っているのか...？）
自分では修正方法の見当がつかないため、アドバイスいただけますと幸いです。よろしくお願い致します。

Comments

[hoshi-takanori]

category_detail は配列ではないのでは。
あとは tagged union を使えば…。

Answer 1

detail.category_name === "shirt" && のように指定した上で <ShirtDetail /> にpropsを渡そうとしているので動きそうなものなんですが

category_nameの値とcategory_detailの関係性が型としては示されていませんので、detail.category_detailはShirt | Bagのままであり、それ以上の型は決まりません。

いちばんシンプルには、categroy_detail={detail.category_detail as Shirt}のようにキャストしてください。

Comments

[ta539tg70]

ご回答ありがとうございます！なるほどです。
ご教示いただいた方法を試してみたところ、以下の状況になっています。

1. `categroy_detail={detail.category_detail as Shirt}` にしてみたところ `'Shirt' refers to a value, but is being used as a type here. Did you mean 'typeof Shirt'?` と新たに出た

2. サジェストの通り `category_detail={detail.category_detail as typeof Shirt}` にすると `Conversion of type 'CategoryDetail[]' to type 'VFC<ShirtDetailProps>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.` と新たに出た

3. サジェストの通り `category_detail={detail.category_detail as unknown as typeof Shirt}` にすると `Type 'VoidFunctionComponent<ShirtDetailProps>' is missing the following properties from type 'Shirt': id, size, color` と新たに出た

4. 手詰まり状態

`ShirtDetail` の中はシンプルに以下のような感じです。

```typescript
interface ShirtDetailProps {
category_detail: Shirt;
}

const ShirtDetail: React.VFC<ShirtDetailProps> = ({
category_detail,
}) => {
return (
// some code
);
};

export default ShirtDetail;
```

こちらはどのように対処したら良いのでしょうか...。

[ta539tg70]

コメントだとコードブロックが変換されないのですね...。見づらくて申し訳ないですが、お知恵をお借りできますと幸いです。

[maisumakun]

> `'Shirt' refers to a value, but is being used as a type here.

型定義以外に変数としてのShirtが存在する状況ではありませんか？（名前を変えて両者を区別できるようにする必要があります）

[ta539tg70]

おおおお、おっしゃる通りでした！ありがとうございます！
もうひとつのShirtの名前を変えたところ `category_detail={detail.category_detail as unknown as Shirt}` でエラーが消えるようになりました！！！本当にありがとうございました！！！