📘

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

2022/04/05に公開1件

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

Discussion

dev63

記事に書いた内容は型を絞る順番が悪く、冗長。
以下のようにすると良い。
Boolean() を使ってfalsyな値を弾くときに似ている。

// オブジェクトの定義
type Hoge = {
  fugas?: string[];
};

// オブジェクトのインスタンス化
const hoge: Hoge = {
  fugas: ['apple', 'banana']
};

// オプショナルチェーンを使用して、fugasが存在し、その長さが1以上であるかをチェック
if (hoge.fugas?.length ?? 0 >= 1) {
  console.log('fugasの長さは1以上です。');
} else {
  console.log('fugasは空、または存在しません。');
}