6/14に「第2回 Build Insider OFFLINE： TypeScriptスペシャル」に行ってきました。３回に分けてセミナーの内容を紹介します。
第2回 Build Insider OFFLINE： TypeScriptスペシャル - Build Insider
Build Insiderのオフライン・イベントが2014年6月14日（土曜日）に開催されます！ 今年は、Web開発者に大人気（Build Insiderの調査で1位）の「TypeScript」がテーマです。 ...
今回は１回目です。最初のセッションは、日本マイクロソフト株式会社 井上 章さんの「TypeScript 1.0 オーバービュー」でした。
セッション内容
"JavaScript is the Assmbly Language of the Web."
- 重要だけど書くのは大変
TypeScript登場の背景
- 大規模開発に対してはJavaScriptは大変
- でもJavaScriptは必須
TypeScript
- JavaScriptの上位拡張
- JavaScriptのコードは、全てTypeScriptとして認識される
TypeScript開発環境
- TypeScriptコンパイラは以下の場所にある
C:\Program Files(x86)\Microsoft SDKs\TypeScript
TypeScriptプロジェクト作成のデモ
- Visual Studio 2013起動
- プロジェクトテンプレートで[TypeScriptを使用したHTMLアプリケーション]を選択
- プロジェクト構成
- app.css
- app.ts
- app.js
- app.js.map
- index.html
２画面表示（左側にTypeScript、右側に生成されたJavaScriptを表示）を実現するには？
- [拡張機能と更新プログラム]で「Web Essentials」を入れる
- [オプション]メニューに[Web Essentials]が追加される
- [TypeScript] - [Show preview pane]をTrueにする
Playgroundのデモ
Playground - Welcome to TypeScript
- TypeScript側にJavaScriptを書くと、JavaScript側にはそのまま出力される
- TypeScriptはJavaScriptの上位拡張だから
- Tips
- altを押しながら、クリックすると同時に２か所編集できる
言語仕様のデモ
- Interfaceを使ってClassを実装
interface Human {
name: string;
talk(): void;
}
class Talent implements Human {
name: string;
constructor(name: string) {
this.name = name;
}
public talk() {
alert(this.name + "です。");
}
}
window.onload = () => {
var talent = new Talent("ふなっしー");
talent.talk(); // "ふなっしーです。"を表示
};
- 引数にInterfaceを導入
interface Human {
name: FullName;
talk(): void;
}
interface FullName {
firstName: string;
lastName: string;
}
class Talent implements Human {
name: FullName;
constructor(name: FullName) {
this.name = name;
}
public talk() {
alert(this.name.firstName + " " + this.name.lastName);
}
}
window.onload = () => {
var talent = new Talent({ firstName: "ふなっしー", lastName: "だなっしー" });
talent.talk(); // "ふなっしー だなっしー"を表示
};
- Classを継承
interface Human {
name: FullName;
talk(): void;
}
interface FullName {
firstName: string;
lastName: string;
}
class Talent implements Human {
name: FullName;
constructor(name: FullName) {
this.name = name;
}
public talk() {
alert(this.name.firstName + " " + this.name.lastName);
}
}
class KaryyPamuPamu extends Talent {
constructor() {
super({ firstName: "きゃりー", lastName: "ぱみゅぱみゅ" });
}
sing(): void {
alert("ファッションモンスター");
}
}
window.onload = () => {
var karry = new KaryyPamuPamu();
karry.talk(); // "きゃりー ぱみゅぱみゅ"を表示
karry.sing(); // "ファッションモンスター"を表示
};
- ClassをGenericsで実装
※記憶を頼りに書いているので若干違うかもしれません。
class Car<t> {
constructor(public color: T) {
}
}
enum Color1 { Green, Red, Blud };
enum Color2 { Yellow, White, Black };
window.onload = () => {
var model1 = new Car<Color1>(Color1.Green);
alert(model1.color); // 0を表示
var model2 = new Car<Color2>(Color2.White);
alert(model2.color); // 1を表示
};
テスト・デバッグのデモ
- IEで実行
- 開発者ツールを起動
- デバッガーで.tsファイルが認識される
仕組み
- 開発者ツールの[ネットワーク]タブを選択
- この時点でクライアントにダウンロードされたものは
- app.css, app.js, app.js.map
- デバッグ実行すると、app.tsがダウンロードされる
- jsファイルの最後のコメント"//# sourceMappingURL=app.js.map"を参照している
- app.js.mapに"app.ts"が設定されている
設定
- [プロジェクトの設定] - [TypeScrptビルド] - [デバッグ] - [ソースマップを生成する]にチェック
参考書籍
| TypeScriptリファレンス Ver.1.0対応 | ||||
|
| JavaScriptプログラマのための 実践的TypeScript入門 | ||||
|
| TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語 | ||||
|
セッション資料と動画
TypeScriptセッションの全スライド＆動画 - Build Insider
6/14に開催された第2回 Build Insider OFFLINEの3つのセッション「TypeScript 1.0 オーバービュー」「TypeScriptを実践的に使うために」「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」のスライド＆動画です。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部」の各スライドも掲載しています。 ...
関連エントリー
第２回
「第2回 Build Insider OFFLINE： TypeScriptスペシャル 」に行ってきた（その２「TypeScriptを実践的に使うために」by 沢渡 真雪さん） - プログラマーな日々
