「array.findの返り値がundefindeになって怒られる」現象を回避する方法

原因

以下の様な処理で怒られる

// profile変数の型定義
  type Profile = {
    id: number;
    name: string;
    age: string;
  };

// 変数profilesの初期化
  const profiles: Profile[] = [
    {
      id: 1,
      name: "yamada",
      age: "24",
    },
  ];

// profiles配列からidが1のprofileを取得してtargetProfileへ代入
  const targetProfile = profiles.find((profile) => profile.id === 1);

// 適当にnullとProfile型を受け入れるselectProfile変数を初期化
  let selectProfile: Profile | null = null;

// ここで怒られる!!
  selectProfile = targetProfile;

find関数は１つも一致しない場合はundefindeが返ってくるため、型推論によって「もしかしたらundefindeかもしれない」となるのが原因。。。

解決策

簡単に解決できる。
Null合体演算子を使うだけで他の書き換えは不要。（?? <=コレ。クエスチョンマークが2つ並んだやつ）

  // profile変数の型定義
  type Profile = {
    id: number;
    name: string;
    age: string;
  };

  // 変数profilesの初期化
  const profiles: Profile[] = [
    {
      id: 1,
      name: "yamada",
      age: "24",
    },
  ];

  // profiles配列からidが1のprofileを取得してtargetProfileへ代入
  const targetProfile = profiles.find((profile) => profile.id === 1);

  // 適当にnullとProfile型を受け入れるselectProfile変数を初期化
  let selectProfile: Profile | null = null;

  // 怒られなくなった★
  selectProfile = targetProfile ?? null;

Null合体演算子

左辺がnullまたはundefindeのとき右辺を返し、左辺がnullまたはundefindeでなければ左辺を返す。
以前はif文で回避していたのでインラインで書けるNull合体演算子は革命でした。。。

おまけ回避術

怒られる変数の末尾に「!」を付けると回避できる。
TypeScriptを無視することになるので、100%undefindeが入らないときのみ利用したほうが良さそう。

selectProfile = targetProfile!;