開発覚書はてな版

個人的な開発関連の備忘録

【TypeScript】Arrayからnull, undefinedを除外する拡張メソッドの実装

概要

今回は、Arrayにnull, undefinedを除外する拡張メソッドを実装します。

f:id:kakkoya:20211227142749p:plain

動作環境

  • TypeScript 4.5.x

対応方針

  • Array.filterを使用してnullとundefinedを除外する処理を拡張メソッドとして追加する。
  • Array.filterにType Guardを使用して、nullとundefinedを除外した型を返すようにする。
  • nullとundefinedを除外した型を作成するために NonNullableを使用する。

サンプルソース

trim.ts

export {};

declare global {
  interface Array<T> {
    /**
     * [拡張メソッド]
     * 配列内の null or undefined を除去
     * @return  null or undefined を除去後の配列
     */
    trim(): NonNullable<T>[];
  }
}

Object.defineProperty(Array.prototype, 'trim', {
  writable: false,
  value: function <T>() {
    const items = this as T[];
    return items.filter((item): item is NonNullable<T> => item !== null && item !== undefined);
  },
});

実行結果

import './trim';
const items = [1, null, undefined, 2].trim();

console.log(items);
// [1, 2]

サンプルコード一式

github.com

TypeScriptの拡張メソッド関連の記事

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com

kakkoyakakko2.hatenablog.com