TypeScriptを準備しよう (5/5)

TypeScriptの内容については次回から説明するとして、このmain.tsをコンパイルして出来上がったmain.jsがどのようになっているのか調べてみましょう。

下にmain.jsの内容を掲載しておきます。これが、main.tsをコンパイルして作成されたJavaScriptのスクリプトです。見ればわかるように、MyClassクラスは、MyClassというオブジェクトとして定義されています。

function(){
    function MyClass(引数){
        ……プロパティの設定……
    }
    MyClass.prototype.メソッド
        = function(){……}
    return MyClass;
}

こんな形でコンストラクタ関数が定義されていることがわかりますね。またメソッドは、オブジェクトのprototpyeに設定されるようになっています。きっちりとMyClassオブジェクトが作られていることがわかりますね。

一方で、まったく変わっていない部分もあります。以下の文ですね。

document.body.innerHTML = msg.print();

DOMの基本的な操作や、オブジェクトのメソッド呼び出しなどは、TypeScriptもJavaScriptも同じです。TypeScriptは、JavaScriptを強化したものであり、何もかも変わっているわけではないのです。

――これで、とりあえずTypeScriptの基本的な使い方はわかってきました。では、次回からTypeScriptという言語について説明していくことにしましょう。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

var MyClass = (function () {
    function MyClass(title, message) {
        this.title = title;
        this.message = message;
    }
    MyClass.prototype.print = function () {
        return "<h1>" + this.title + "</h1>" + "<p>" + this.message + "</p>";
    };
    return MyClass;
})();
;

var msg = new MyClass("Hello", "this is TypeScript sample!");

document.body.innerHTML = msg.print();