Object is possibly ‘undefined’

7月 23, 2022typescript

原因

undefined(未定義)の場合があるので、その処理はできない場合があるのでtypescriptではエラーとなる。という意味です。

具体例

例えば、文字列の結合をする処理は、文字列の変数に対してはできるが、未定義の変数に対してはできない。つまりエラーになると言っています。
例えば、以下のようなコードです。

  type card = { id: string, tag?: string, title: string, text: string };

  const ShowCard: React.FC<card> = (props) => {
    // 文字列でない可能性の変数をreplace()しようとしているのでエラー
    const tag = props.tag.replace(',', ' ')
    
  }

以下のようにすると、解決します。

  type card = { id: string, tag?: string, title: string, text: string };

  const ShowCard: React.FC<card> = (props) => {
    let tag:string = "";
    if(props.tag){
      // tagが未定義の場合は通過させなければ良い
      tag = props.tag.toString().replace(',', ' ')
    }
  }

このサンプルではObject is possibly 'undefined’を解決しようとすると、別のエラーが出てそれを解決する必要があったので、あまり良いサンプルではないのですが、自分の備忘のために書きました。

動作環境

typescript

めでたし、めでたし。