＜LINEボット開発＞liffIdがundefinedの可能性があるという理由で怒られる時の対処法

Vue.js、TypeScriptでLINEボット開発時、環境変数からliffIdを読み込む際に以下のエラーが発生しました。

index.vue

const liffIdDef = process.env.VUE_APP_LIFF_ID;

liff.init({ liffId: liffIdDef });

//エラー　　Type 'string | undefined' is not assignable to type 'string'.
//エラー Type 'undefined' is not assignable to type 'string'.

liff.init関数の引数に渡すオブジェクトのliffIdプロパティにundefinedな値が入ってしまう可能性があるということで怒られています。

index.d.tsでは以下のように型定義されており、liffIdプロパティには確実にstring型の値を与えなくてはいけないようです。

interface Config {
    liffId: string;
    analytics?: Analytics;
}

liffIdDefが常にstring型の値を持つように、デフォルト値(ここでは”0″)を設定します。

const liffIdDef = process.env.VUE_APP_LIFF_ID ?? "0";

liff.init({ liffId: liffIdDef });

Null合体演算子（??）は左辺が null または undefinedの場合、右辺の値を返します。

Null 合体演算子 (??) - JavaScript | MDN

Null 合体演算子 (??) は論理演算子の一種です。この演算子は左辺が null または undefined の場合に右の値を返し、それ以外の場合に左の値を返します。

仮に環境変数をうまく読み込めずprocess.env.VUE_APP_LIFF_IDがundefinedになっても、liffIdDefには0が代入されます。

これで型チェックで怒られなくなりました。

あとがき

Null合体演算子（??）のところはOR演算子（｜｜）を使用するとより安全かもしれません。

OR演算子（｜｜）では、左辺が以下のようなfalsyな値だった場合、右辺の値を返します。

false
null
NaN
0
-0
On
空文字列 ("" または '' または ``)
undefined

引用：https://developer.mozilla.org/ja/docs/Glossary/Falsy