TypeScriptのプリミティブ型を拡張して便利メソッドを生やす

入力値が空であるかどうかを確認して、空だったらPOST処理を走らせたくない。

という要件は往往にして存在するわけで、Stringが空であるかどうかを返してくれるメソッドがありそうなもんだと思ったがこれがないのである。

そこで偉大なる先輩がStringなどプリミティブな型を拡張していたのを思い出す。

ちょうど下記記事の手法を採用して文字列が空であるかどうかを返すisBlankメソッドを実装した。
kakkoyakakko2.hatenablog.com

ここから得るべき教訓

TypeScriptはインターフェースのマージができる。

String*1を参照するとStringのインターフェースに飛ぶ。

interface String {
    toString(): string;
    charAt(pos: number): string;
    charCodeAt(index: number): number;
    concat(...strings: string[]): string;
　・・・
}

こういった既存のインターフェースに自分が追加したいメソッドを宣言を追加することでTypeScriptのプリミティブ型を拡張できる。

declare global {
  interface String {
    isBlank(): boolean;
  }
}

String.prototype.isBlank = function () {
  if (this && this.length > 0) return false;
  return true;
};

ESLintエラー

実装する際１つエラーにぶつかった。

エラーを出しているのはESLintさんだった。

String prototype is read only, properties should not be added

prototypeの参照先に飛ぶとこちらにもインターフェース定義があり、prototypeにはreadonly修飾子がついているので上記のエラーが生じたということである。

interface StringConstructor {
    new(value?: any): String;
    (value?: any): string;
    readonly prototype: String;
    fromCharCode(...codes: number[]): string;
}

eslintの設定ファイルに下記記述を追加すると解消する。

'no-extend-native': 0

「拡張して便利メソッド生やしておきました！」なんていかにもできそうな人に見えてよいではないか。

*1:stringじゃないよ。頭文字は大文字だよ