TSの型エラーが解消できない

Question

実現したいこと

「オブジェクトは 'undefined' である可能性があります。ts(2532)」のエラーが解決できない

前提

配列のデータをカテゴリーごとに分割して新しいオブジェクトを生成する

処理自体は完成したがTSのエラーが解消できない

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

該当のソースコード

type BrandData = {
  brand: string
  color: string
  amount: number
}

type TransformedData = {
  [key: string]: {
    [key: string]: number[]
  }
}

  const data: BrandData[] = [
    {
      brand: 'aaa',
      color: 'red',
      amount: 1000,
    },
    {
      brand: 'aaa',
      color: 'red',
      amount: 2000,
    },
    {
      brand: 'bbb',
      color: 'blue',
      amount: 4000,
    },
  ]

  const transformedData = data.reduce((acc, item) => {
    const { brand, color, amount } = item

    if (!acc[brand]) {
      acc[brand] = {}
    }
    if (!acc[brand][color]) {
      acc[brand][color] = []
    }
    if (!acc[brand][color]?.includes(amount)) {
      acc[brand][color].push(amount)
    }

    return acc
  }, {} as TransformedData)

試したこと

1.anyの型を使用する
2.非nullアサーションを使用する
if (!acc[brand]![color]) {}

この2つの方法では解消できましたが、lintのエラーに引っかかってしまうため別の解消方法が必要です

Comments

[hoshi-takanori]

該当のソースコード、特にエラーは出ませんけど…。TypeScript のバージョンはいくつですか？

[shunta80]

4.9.5です！

[hoshi-takanori]

tsconfig.json で noUncheckedIndexedAccess を true にしたらエラーになりますね。失礼しました。
これによると仕様のようですね。acc[brand] や acc[brand][color] を変数に入れるしかないのかな…。
https://github.com/microsoft/TypeScript/issues/53702

[shunta80]

変数化してエラー解消する具体的な方法わかりましたら教えて頂きたいです🙇‍♂️

Answer 1

トランスパイラはデータをディクショナリに入れたかどうかまでは追ってくれないので、その前に挿入していたとしても、acc[brand]がundefinedになる可能性があると判定され、undefined[color] というアクセスはエラーになるよ、と言われていると思います。なので、トランスパイラにそれはない、とわかるように記述したほうがいいです。

多分こんな感じで、変数に入れるようにしたら大丈夫かと。

const transformedData = data.reduce((acc, item) => {
    const { brand, color, amount } = item;

    let colorsOfBrand = acc[brand];
    if(!colorsOfBrand){
        acc[brand] = colorsOfBrand = {}    
    }
    // この時点でcolorsOfBrand はundefinedでないと判定できる(同時にacc[brand] も絶対何かが入っている)

    let amountOfColor = colorsOfBrand[color];
    if(amountOfColor){
        colorsOfBrand[color] = amountOfColor = [];
    }
    // この時点でamountOfColor はundefinedでないと判定できる(同時にacc[brand][color] も絶対何かが入っている)

    if(amountOfColor.includes(amount)){
        amountOfColor.push(amount);
    }
    return acc;
}, {} as TransformedData);

Answer 2

ディクショナリではなくRecordを利用する方法はいかがですか？
文字列がキーとなるディクショナリ、という定義だけでは存在しないキーの可能性が潰せないためundefinedになってしまいます。

// brandとcolorを文字列ではなく型にする
type Brand = 'aaa' | 'bbb';
type Color = 'red' | 'blue';

type BrandData = {
  brand: Brand
  color: Color
  amount: number
}

// Recordで定義する
type TransformedData = Record<Brand, Record<Color, number[]>>

const data: BrandData[] = [
  {
    brand: 'aaa',
    color: 'red',
    amount: 1000,
  },
  {
    brand: 'aaa',
    color: 'red',
    amount: 2000,
  },
  {
    brand: 'bbb',
    color: 'blue',
    amount: 4000,
  },
]

// reduceにジェネリクスで型を指定すればasは不要になる
const transformedData = data.reduce<TransformedData>((acc, item) => {
  const { brand, color, amount } = item
  acc[brand][color].push(amount)
  return acc
}, { 'aaa': { 'red': [], 'blue': [] }, 'bbb': { 'red': [], 'blue': [] } }) // 初期値を型通りに設定してreduce内のif文を消す