「Type 'string | undefined' is not assignable to type 'string'. Type 'undefined' is not assignable to type 'string'」の解決方法

問題

Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.Vetur(2322)

以前このようなエラーで「undefinedを許可しているのになぜstringじゃないと怒られているんだ？？」と困惑したことがあった。

下記のsuffixのように型定義していて、stringをsuffixに入れても上記のようなエラーがある。

interface Item {
  value: string
  num?: string
}

原因

suffixはstringかundefinedしか受け付けないとしているが、それがundefinedかどうかによって処理を書き分けられていないことが問題である。

multiplyNumber(item: Item) {
         return item.num *= 2
    },

例えば上記のコードでは例えばAPIでItemをうまく取得できて、numをmultiplyNumber関数の引数に入れることができるのであれば、問題はない。
ただAPIの通信が失敗してしまって、Itemを取得できずにnumがundefinedとなってしまった場合はitem.undefined *= 2となってしまうため本記事最初のエラーが出てしまうという仕組みだと思われる。

解決方法

下記のコードのようにitem.numがundefinedである場合はif文に進まないという処理をすることでこの問題を回避することができた。

multiplyNumber(item: Item) {
        if (item.num) {
            return item.num *= 2
        }
    },