【TypeScript】 オプショナルチェーンについて【React】

はじめに

　本記事は、プログラミング初学者、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

オプショナルチェーンについて

オプショナルチェーンは?.演算子を用いて記述します。
?.に先行する変数やプロパティの値がnullまたはundefinedであれば、その後のプロパティは評価されず、undefinedが返ります。
使用例は以下の通りです。

user.ts

export type User = {
  name: string;
  // specialtiesはない可能性もある
  specialties?: Array<string>;
}

UserProfile.tsx

import React, { VFC } from 'react'
import { User } from './user'

type Props = {
  user: User;
}

export const UserProfile: VFC<Props> = (props) => {
  const { user } = props;
  return (
    <dl>
      <dt>名前</dt>
      <dd>{user.name}</dd>
      <dt>特技</dt>
      {/* specialtiesがnullまたはundefinedであれば、その後のプロパティは評価せず、undefinedを返す */}
      <dd>{user.specialties?.join(",")}</dd>
    </dl>
  )
}

App.tsx

import React, { useState } from 'react';
import './App.css';
import { UserProfile } from './UserProfile';


const user = {
  name: "田中",
  // specialtiesはなし
}


function App() {
  return (
      <UserProfile user={user} />
  );
}

export default App;

上記の例の場合に、UserProfile.tsxの<dd>{user.specialties?.join(",")}</dd>のspecialtiesの後に?.を記述しないとspecialtiesがundefinedであるため、join(",")が実行できず、エラーとなります。
specialtiesの後に?.を記述することでspecialtiesがnullやundefinedであれば、join(",")は実行されず、エラーなく表示されます。