記事「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ライフを。