【TypeScript】拡張メソッドの実装(基本型)

概要

declare global + interface で追加したいメソッドを追加後、prototypeにメソッドを追加します。
拡張メソッドを利用したい場合は、importをすることで利用できます。
詳細についてはサンプルソースを確認。

ちなみに拡張メソッドは他の開発言語でもあります。
用途としては、型に依存した共通処理等を追加すると生産性があがります。

動作環境

TypeScript 2.7.x

サンプルソース

number.extensions.ts

拡張メソッドの定義側です。今回はnumberに拡張メソッドを追加します。

// TypeScriptファイル内でexportを利用していない場合は、export{};を定義
export {};

// 拡張メソッドの定義
declare global {
    interface Number {
        /** 3の倍数:Fizz, 5の倍数: Buzz, その他:数字文字列 */
        fizzBuzz(): string;
    }
}

// 拡張メソッドの実装側
Number.prototype.fizzBuzz = function () {
    const num = (this as Number).valueOf();

    if (num % 3 === 0 && num % 5 === 0) {
        return 'fizzbuzz';
    } else if (num % 3 === 0) {
        return 'fizz';
    } else if (num % 5 === 0) {
        return 'buzz';
    } else {
        return num.toString();
    }
};

呼び出し側

import後、拡張した型にメソッドが追加されます。

// 呼び出したい拡張メソッドをimport
import './number.extensions';

export function fizzBuzzOutput(num: number): void {
    for (let i = 0; i < num; i++) {
        // number型の拡張メソッドfizzBuzzが利用できるようになる
        console.log(`${i.fizzBuzz()}`);
    }
}