開発覚書はてな版

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

【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()}`);
    }
}

VSCodeなどではマウスオーバー時に拡張メソッドの説明等も確認できます。

f:id:kakkoya:20180605222356p:plain

参考URL

関連記事

Angular等のライブラリを更新したい場合は以下の記事を参考にしてください。 kakkoyakakko2.hatenablog.com

TypeScriptのArray拡張をしている記事 kakkoyakakko2.hatenablog.com

TypeScriptの拡張メソッド関連のソースコードgithub.com