【TypeScript】null回避の三項演算子を記述する方法ご紹介。

今回の記事はTypeScriptでJSX内のnull回避を行うための三項演算子の記述方法を記載します。初心者の方にも分かりやすいように記載していくので是非参考にしてみてください。

TypeScriptの三項演算子記述方法

TypeScriptはReactやVueの中で使用される最近の流行言語です。

そんなTypeScriptでJSX内でnull回避を行うための三項演算子の記述方法をご紹介します。

const test:string | null = ''

const App: React.VFC = () => {
  return (
    <div>
      {test==null ? 'nullである' : 'nullでない'}
    </div>
  );
}

export default App;

ファイル内の一番上で記載している変数はstring型かnullのどちらかであるという記述を行っております。仮にnullである場合、divで囲った部分の共同を見ていきましょう。

test==null ? 'nullである' : 'nullでない'
                 ↓
（  条件  ）? （  値1  ） : (   値2   )
                 ↓

（nullか?）? （ Yesの値 ） : ( Noの値 )

上記のような使い方となります。

では今回の記事は以上です。他にも多数のTypeScript関連の記事を記載しているので是非参考にしてみてください。