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

では、TypeScriptのプログラムを書きましょう。「app」フォルダ内に、「main.ts」という名前でファイルを作成して下さい（main.jsではありませんよ。main.tsです）。TypeScriptのソースコードファイルは、このように「.ts」という拡張子をつけるのが基本です。

ここでは、MyClassというクラスを作成し、そのインスタンスを作ってメソッドを呼び出す処理を行っています。まだTypeScriptの文法はわからないでしょうが、なんとなくJavaScriptに似たものであることはわかるでしょう。

ソースコードが完成したら、コマンドプロンプトを開き、ソースコードファイルを設置した場所にcdコマンドで移動して、以下のように実行しましょう。

tsc main.ts

これでmain.jsファイルが作成されます。もし、ファイルが正しく作成されなかったら、記述したコードが間違っている可能性があります。再度、ソース・コードの記述を確認しましょう。

無事にmain.jsが作成されたら、Webブラウザからindex.htmlにアクセスしてみましょう。すると、空っぽだったボディの部分に、「Hello」とタイトルが表示され、その下に「this is typescript sample!」というメッセージが表示されています。これが、main.jsで実行されたスクリプトです。


ここでは、「MyClass」というクラスを作成しています。クラスというのは、JavaScriptの「オブジェクト」と同じようなもので、たくさんの値や関数をひとまとめにして扱えます。このMyClassのオブジェクト（インスタンスというもの）を作成し、これを利用して表示を行っていたのですね。

(by. SYODA-Tuyano.)

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

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

class MyClass {
    constructor(public title: string, public message: string){}

    print(){
        return "<h1>" + this.title + "</h1>" +
            "<p>" + this.message + "</p>";
    }
};

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

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