【TypeScript】オブジェクトは 'undefined' である可能性があります。

2439 ワード
TypeScript tech テキストリンク

状況

optionalな値を使って条件付きレンダーしようとしていた。
しかし実行するとコードは動くが、
tsのエラーが出ている状態。

コード

改善前
hoge: Hoge & {
    fugas?: Piyo[] | undefined;
}

{hoge.fugas?.length >= 1 &&
  // 以下略
改善後
hoge: Hoge & {
    fugas?: Piyo[] | undefined;
}

{hoge.fugas &&
  {hoge.fugas?.length >= 1 &&
  // 以下略

先に hoge.fugas && でhoge.fugasが真だと確定させることにより解消。

参考記事

https://teratail.com/questions/363216

【TypeScript】初心者がReactの環境を整える
【Nuxt x Rails】サンプルTODOアプリ - 概要