TypeScriptの型エラー（ts(7053)）が発生する

Question

いつもお世話になっています。

次のコードは、return obj[abcd.key][abcd.val];の行でエラーが出ます。

const obj = {
  a: {
    b: 1,
  },
  c: {
    d: 3,
  },
}

type T = {key: "a", val: "b"} | {key: "c", val: "d"};

function func(abcd: T) {
  // Element implicitly has an 'any' type because expression of type '"b" | "d"' can't be used to index type '{ b: number; } | { d: number; }'.
  // Property 'b' does not exist on type '{ b: number; } | { d: number; }'.ts(7053)
  return obj[abcd.key][abcd.val];
}

しかし、次のコードはエラーが出ません。

const obj = {
  a: {
    b: 1,
  },
  c: {
    d: 3,
  },
}

type T = {key: "a", val: "b"} | {key: "c", val: "d"};

function func(abcd: T) {
  switch (abcd.key) {
    case "a":
      return obj[abcd.key][abcd.val];
    case "c":
      return obj[abcd.key][abcd.val];
  }
}

1つ目のコードでエラーが出る原因は何でしょうか？そして、どのように修正すればエラーがなくなるでしょうか？教えていただけると嬉しいです。

Answer 1

後者の場合、switchで条件分岐したことでType Guardが働いて、case 'a':以下ではabcdの型が{key: "a", val: "b"}に決まっています。

どのように修正すればエラーがなくなるでしょうか？

たとえば、objの型をRecord<'a' | 'c', Record<'b' | 'd', number>>のように緩めてしまう方法もありますが、それがtoshiyanさんの希望に合致するかはわからないです。