vue-never-type

仕事でVueを使っていて、追加と削除が繰り返される配列要素のオブジェクトに一意のid番号を振るの記事に書かれているオブジェクトの追加と削除を実装しようとして、 TypeScriptで書いている時にエラーが発生したので、その解消法について記載します。

発生したエラー

以下コードの3行目でType 'boolean' is not assignable to type 'never'.Vetur(2322)のエラーが発生しました。このエラーは解消しなくてもアプリが動きましたがエラー状態は気持ちが悪いので解消法を探しました。

1
2
3
4
5
6
7
8

        getNewId() {
            const usedIds = this.stats.reduce((accumulator, stat) => {
                accumulator[stat.id] = true;
                return accumulator;
            }, []);
            const nextid = usedIds.findIndex((exists) => !exists);
            return nextid < 0 ? usedIds.length : nextid;
        }

解消法

[] → [] as boolean[]のように記載することでエラーを解消できます。TypeScriptは、連結を使用して配列を削減するときに「never」型を推測するのはなぜですか？に記載されているようにboolean[]にキャストしてあげればOKです。

これは、[]の型がnever[]であると推論されているためだと思います。これは、空でなければならない配列の型です。型キャストを使用してこれに対処できます。

今回のコードは無理やり配列を作っているので、TypeScriptが値を持たないと判断してnever[]を返していたみたいです。

1
2
3
4
5
6
7
8

      const usedIds = this.sitePermmisons.reduce(
        (accumulator, sitePermmison) => {
          accumulator[sitePermmison.id] = true
          console.log(accumulator)
          return accumulator
        },
        [] as boolean[]
      )

最後に

今回のエラーはとても単純な内容でしたが、reduce, findIndexの使い方やVueでオブジェクトの追加、削除方法などをあまり理解していない状態だったので、色々と調べていたらかなり時間をかけてしまいました。 なんとなくの実装で進めると大はまりすることがあるので、理解しつつ作業のスピードを落とさないようにバランスを考えないとなーと思いました。