なぜ型エラーが起きるのかわかりません。。。【TypeScript】

Question

前提・実現したいこと

https://www.typescriptlang.org/play で以下を試していたのですが、何が型エラーの原因になっているのか分からなかったので原因が知りたいです。教えてください。
※ version は v 4.1.2 で試しています。

発生している問題・エラーメッセージ

type A = {
  items: {
    itemId: 100 | 200;
  }[];
  upperCode: 'A';
  lowerCode: 'a';
};

type B = {
  items: {
    itemId: 100 | 200;
  }[];
  upperCode: 'B';
  lowerCode: 'b';
};

type AorB = (A | B)

const func = (
    raws: AorB[],
    code: string
) => {
    // ここで型エラーがおきました。
    const ret: AorB[] = raws.map( raw => {
        if (raw.upperCode === code) {
            return {
                items: raw.items,
                upperCode: raw.upperCode,
                lowerCode: raw.lowerCode
            }
        }
        return raw;
    })
    return ret
}

型エラーの内容は↓

Type '{ items: { itemId: 100 | 200; }[] | { itemId: 100 | 200; }[]; upperCode: "A" | "B"; lowerCode: "a" | "b"; }[]' is not assignable to type 'AorB[]'.
  Type '{ items: { itemId: 100 | 200; }[] | { itemId: 100 | 200; }[]; upperCode: "A" | "B"; lowerCode: "a" | "b"; }' is not assignable to type 'AorB'.
    Type '{ items: { itemId: 100 | 200; }[] | { itemId: 100 | 200; }[]; upperCode: "A" | "B"; lowerCode: "a" | "b"; }' is not assignable to type 'B'.
      Types of property 'upperCode' are incompatible.
        Type '"A" | "B"' is not assignable to type '"B"'.
          Type '"A"' is not assignable to type '"B"'.(2322)

ただし、下記のように「lowerCode」の型定義とmapで返すオブジェクトの「lowerCode」をコメントアウトしたら型エラーがなくなりました！！

type A = {
  items: {
    itemId: 100 | 200;
  }[];
  upperCode: 'A';
//  lowerCode: 'a';   コメントアウトしました。
};

type B = {
  items: {
    itemId: 100 | 200;
  }[];
  upperCode: 'B';
//  lowerCode: 'b';   コメントアウトしました。
};

type AorB = (A | B)

const func = (
    raws: AorB[],
    code: string
) => {
    // 型エラーが起きない！！
    const ret: AorB[] = raws.map( raw => {
        if (raw.upperCode === code) {
            return {
                items: raw.items,
                upperCode: raw.upperCode,
//                lowerCode: raw.lowerCode   コメントアウトしました。
            }
        }
        return raw;
    })
    return ret
}

エラーが起きた理由と起きなくなった理由が知りたいです。

Answer 1

mapの中でのrawはA|B型ですので、そのままプロパティを取れば、raw.upperCodeは"A" | "B"型に、raw.lowerCodeは"a" | "b"型になります。

そして、このupperCodeとlowerCodeの関連性が消えてしまった型条件では、uppueCode: "A", lowerCode: "b"のような組み合わせが発生しうるようになってしまい、これはA|Bに入れられないためエラーとなります。

Comments

[TuTettuuu]

なるほど、uppueCode: "A", lowerCode: "b" みたいな組み合わせの可能性がたしかに含まれてしまっていますね。ありがとうございます。