VSハッカソン TypeScript ハンズオン

TypeScript ハッカソン
環境構築/Web Serverの準備/ハンズオン

環境構築
TypeScriptをコンパイルするために

VS2012の人
• 以下からダウンロードしてインストール
• http://www.microsoft.com/en-us/download/details.aspx?id=34790
• 「TypeScript for Visual Studio 2012」でググってね！
実施後の追記
どうやらVS2012が入っていなくてもOKらしいです。

Node.jsの人
• Windowsの人
• http://nodejs.org/ からインストーラーをダウンロードしてインス
トール
• MACの人
• 詳しい人だれかお願いします。
• Node.jsが入ってる人
• Node.jsがはいったらこれ

WindowsでNode.jsを入れたくない人
• 実はこんな方法もいけます。
• http://kmaru.hatenablog.com/entry/2013/02/03/195424

Web Server の準備
ハンズオンを実施するために

VS2012が入ってる人
• 特になにもいりません。
• IIS Expressが入っているので次のスライドを参照してください。
• もしくは TypeScript for Visual Studio 2012 を入れるとついてくる
Project Templateでプロジェクトを作ってください。

WindowsでVS2012が入ってない人
• IISExpressがおすすめです。
• WebMatrixが入ってれば入ってるかも
• 以下よりダウンロードできます。
• http://www.microsoft.com/ja-jp/download/details.aspx?id=1038
> "C:Program Files (x86)IIS Expressiisexpress" /path:%~dp0 /port:9090 /clr:v2.0
上のようなバッチファイルを作って実行！

Windows以外の人
• Node.jsで簡単なWebサーバーを作りましょう。
• WindowsでNode.jsが入っている人もこれでもOK
var connect = require("connect");
var server = connect.createServer(
connect.logger(),
connect.static(__dirname)
);
server.listen(3000);
> node server.jsこんなファイル(ここでは
server.js)を作って実行！

あらかじめ用意しました
• 以下をダウンロードして展開
• http://goo.gl/yrTh9
• IISExpressの人
• server.batをダブルクリック！
• Node.jsの人
1. Shellで展開したディレクトリに移
動して
2. npm install
3. npm server.js
• ブラウザで
http://localhost:9090/index.html
にアクセス

ハンズオン
TypeScriptに踏み出すために

ハンズオンを始める前に
• 「Web Serverの準備」でダウンロードしたディレクトリを使い
ます。
• ダウンロードしておいてください。

HTMLを追加しよう
• アプリケーションのルートに「sample.html」を以下の内容で
追加します。
• http://localhost:9090/sample.html にアクセスします。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
<input type="text" id="message" />
<button type="button" id="exec">Click</button>
</div>
</body>
</html>

JavaScriptを追加しよう
• scriptsフォルダの下に「sample.js」を以下の内容で追加しま
す。
var button = document.getElementById("exec");
var textbox = document.getElementById("message");
button.addEventListener("click", function(){
alert(textbox.value);
}, false);

HTMLからJavaScriptを参照しよう
• sample.htmlのbody要素内の一番下にscript要素を追加します。
• 以下のようになります。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
</div>
<script src="scripts/sample.js"></script>
</body>
</html>

JavaScriptをTypeScriptにしよう
• 「sample.js」のファイル名を「sample.ts」に変更します。

TypeScriptをコンパイルしよう
• コマンドでカレントディレクトリをアプリケーションのルート
ディレクトリに移動します。
• 以下のコマンドを実行します。
• ※失敗します。
> tsc scripts/sample.ts

コンパイルを成功させよう
• 「sample.ts」を以下のように変更します。
var button:any = document.getElementById("exec");
var textbox:any = document.getElementById("message");
}, false);

型をちゃんと指定しよう
• 型をanyとしていた部分をそれぞれの型にキャストします。
var button:HTMLButtonElement =
<HTMLButtonElement>document.getElementById("exec");
var textbox:HTMLInputElement =
<HTMLInputElement>document.getElementById("message");
}, false);

モジュール化しよう
module App{
}, false);
}

クラスを作ろう
• 「message.ts」ファイルを追加して、以下のようにします。
module App{
export class Message{
private _value: String;
constructor(value: String){
this._value = value;
}
}
}

コンパイルしよう
> tsc scripts/*.ts

プロパティを追加しよう
• 「 message.ts」を以下のように変更します。
module App{
export class Message{
private _value: String;
constructor(value: String){
this._value = value;
}
public get value(): String{
return this._value;
}
public set value(v: String){
this._value = v;
}
}
}

コンパイルしよう
• ※失敗します。
> tsc scripts/*.ts

オプションを変更してコンパイルしよう
• tscのオプションを指定します。
> tsc scripts/*.ts –target ES5

ファイルを参照しよう
• 「sample.ts」から「message.ts」を参照します。
• ※画面は動かなくなります。
/// <reference path="message.ts" />
module App{
var msg:App.Message = new App.Message(textbox.value);
alert(msg.value.toString());
}, false);
}

HTMLからJavaScriptを参照しよう
• 「sample.html」に「message.js」への参照を追加します。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
</div>
<script src="scripts/message.js"></script>
</body>
</html>

jQuery を参照しよう
• 「sample.html」にjQueryの参照を追加します。
• 以下のようなCDNから取ってくると便利です。
• http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>
<script src="scripts/message.js"></script>
</body>
</html>

TypeScriptでjQueryを使ってみよう
• 「sample.ts」を以下のように変更しまて、コンパイルしま
す。
• 失敗します。
module App{
var button:any = $("#exec");
var textbox:any = $("#message");
button.on("click", function(){
var msg:App.Message = new App.Message(textbox.val());
});
}

$を解決しよう
• 「sample.ts」を以下のように変更しまて、コンパイルします。
declare var $: any;
module App{
var button:any = $("#exec");
var textbox:any = $("#message");
});
}

jQueryの型定義を入手しよう
• http://www.tsdpm.com/を開きます。
• jQueryで検索をかけて結果の一番上をクリックします。
• ダイアログの下にあるリンクからダウンロードします。
• ダウンロードした「jquery.d.ts」を「scripts」フォルダの下
に「typings」フォルダを作って格納します。

jQueryの型定義を参照しよう
• 「jquery.d.ts」を参照するために「sample.ts」を以下のよう
に変更してコンパイルします。
/// <reference path="typings/jquery.d.ts" />
// declare var $: any; ←削除してもOK
module App{
var button:JQuery = $("#exec");
var textbox:JQuery = $("#message");
});
}

エディタ
• VS2012
• Expressも対象
• Web Matrix
• Vim
• Emacs
• Sublime Text
• Web Storm
• Flash Develop
• others…

VSハッカソン TypeScript ハンズオン

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (18)

Similar to VSハッカソン TypeScript ハンズオン

Similar to VSハッカソン TypeScript ハンズオン (20)

VSハッカソン TypeScript ハンズオン