TypeScriptでconsole.log()を使うときの便利メソッド

記事「console.log()を使うときのおすすめ記述方法」にて、JavaScriptでconsole.log()を使う場合の問題点とおすすめ記述方法（trace()メソッド）を紹介しました。

今回はそれをTypeScriptでやってみます。ベースは変わらないのですが、TypeScriptでは可変長引数（いくつでも指定できる引数）が手軽に扱えるので、それを踏まえて使いやすく改良しました。コードは以下です。（TypeScript 1.5.3で記述してあります。）

TypeScript

/** デバッグモードかどうか。本番公開時にはfalseにする */
const DEBUG_MODE:boolean = true;

/**
 * デバッグモードが有効で、console.log()が使える時に、
 * コンソールに文字列を出力します。
 * @param {string[]} ...args 出力したい文字列です。
 */
function trace(...args:any[]):void {
    if (DEBUG_MODE && window.console && typeof window.console.log != "undefined") {
        let str:string = "";
        if (args.length > 0)
            str = args.join(", ");

        console.log(str);
    }
}

TypeScriptでは、上記のように引数に「...」を指定することで、可変長引数が使えるようになります。ActionScript 3.0でログを出力するtrace()メソッドというのがありますが、それを真似て作っています。

下記のようにして使います。

TypeScript

trace("サイン", "コサイン", "Vサイン");  // 「サイン, コサイン, Vサイン」と出力される
trace(100000000, "千万"); // 「100000000, 千万」と出力される

グローバル関数にしたくない場合

グローバル関数では定義したくない場合は、モジュール化（内部モジュール）します。trace.tsファイルにtrace()メソッドを定義し、main.tsに処理を記述するという想定です。

trace.tsファイル

namespace project {
    /** デバッグモードかどうか。本番公開時にはfalseにする */
    let DEBUG_MODE:boolean = true;

    /**
     * デバッグモードが有効で、console.log()が使える時に、
     * コンソールに文字列を出力します。
     * @param {string[]} ...args 出力したい文字列です。
     */
    export function trace(...args:any[]):void {
        if (DEBUG_MODE && window.console && typeof window.console.log != "undefined") {
            let str:string = "";
            if (args.length > 0)
                str = args.join(", ");

            console.log(str);
        }
    }
}

同名の「project」モジュール内から使う場合は、下記のようにして使います。

main.tsファイル

/// <reference path="trace.ts" />
namespace project {
    export class Main {
        constructor() {
            trace("サイン", "コサイン", "Vサイン");
            trace(100000000, "千万");
        }
    }
}

window.addEventListener("load", (event)=> {
    new project.Main();
});

それぞれコンパイルしたjsファイルを、HTMLで読み込んでおきます。

HTML

<script src="main.js"></script>
<script src="trace.js"></script>

最後に

個人的にはtrace.tsをあらかじめ作っておき、プロジェクトごとに使いまわしています。ログの出力有無はDEBUG_MODE１つで切り替えられるので便利です。よきTypeScriptライフを。