プログラマーな日々

プログラマーをやっています。好きなツール:WorkFlowy、好きな言語:C#、好きなサービス:Backlog、好きなAWS:AWS Lambda。

「第2回 Build Insider OFFLINE: TypeScriptスペシャル 」に行ってきた(その1「TypeScript 1.0 オーバービュー」by 日本マイクロソフト株式会社 井上 章さん)

f:id:JHashimoto:20140409044240j:plain

6/14に「第2回 Build Insider OFFLINE: TypeScriptスペシャル」に行ってきました。3回に分けてセミナーの内容を紹介します。

第2回 Build Insider OFFLINE: TypeScriptスペシャル - Build Insider
Build Insiderのオフライン・イベントが2014年6月14日(土曜日)に開催されます!  今年は、Web開発者に大人気(Build Insiderの調査で1位)の「TypeScript」がテーマです。 ...

 

今回は1回目です。最初のセッションは、日本マイクロソフト株式会社 井上 章さんの「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プロジェクト作成のデモ

  1. Visual Studio 2013起動
  2. プロジェクトテンプレートで[TypeScriptを使用したHTMLアプリケーション]を選択
  • プロジェクト構成
    • app.css
    • app.ts
    • app.js
    • app.js.map
    • index.html

2画面表示(左側にTypeScript、右側に生成されたJavaScriptを表示)を実現するには?

  1. [拡張機能と更新プログラム]で「Web Essentials」を入れる
  2. [オプション]メニューに[Web Essentials]が追加される
  3. [TypeScript] - [Show preview pane]をTrueにする

Playgroundのデモ

Playground - Welcome to TypeScript

 
  • TypeScript側にJavaScriptを書くと、JavaScript側にはそのまま出力される
    • TypeScriptはJavaScriptの上位拡張だから
  • Tips
    • altを押しながら、クリックすると同時に2か所編集できる

言語仕様のデモ

  • 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を表示
};

テスト・デバッグのデモ

  1. IEで実行
  2. 開発者ツールを起動
  3. デバッガーで.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対応

わかめ まさひろ インプレスジャパン 2014-05-16
売り上げランキング : 35334
by ヨメレバ
JavaScriptプログラマのための 実践的TypeScript入門

川俣晶 KADOKAWA/アスキー・メディアワークス 2014-05-31
売り上げランキング : 102534
by ヨメレバ
TypeScript入門 クラスと型チェック機能を加えたJavaScriptの拡張言語

川俣 晶 日経BP社 2014-06-04
売り上げランキング : 98993
by ヨメレバ

セッション資料と動画

TypeScriptセッションの全スライド&動画 - Build Insider
6/14に開催された第2回 Build Insider OFFLINEの3つのセッション「TypeScript 1.0 オーバービュー」「TypeScriptを実践的に使うために」「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」のスライド&動画です。また、当日の連携イベントだった「TypeScript勉強会 - VSハッカソン倶楽部」の各スライドも掲載しています。 ...

関連エントリー

第2回

「第2回 Build Insider OFFLINE: TypeScriptスペシャル 」に行ってきた(その2「TypeScriptを実践的に使うために」by 沢渡 真雪さん) - プログラマーな日々

第3回

**第3回 「第2回 Build Insider OFFLINE: TypeScriptスペシャル 」に行ってきた(その3「TypeScriptで効率化するHTML5のインタラクティブコンテンツの開発」by 株式会社ICS代表 池田 泰延さん) - プログラマーな日々