DEV-011_TypeScript ～Any browser. Any host. Any OS. Open Source～

1. ROOM
F
http://aka.ms/chack
DEV-011

2. 井上 章 (いのうえ あきら “チャック”)
エバンジェリスト
http://aka.ms/chack
2008 年マイクロソフト入社。
主に .NET/ASP.NET や Visual Studio,
Microsoft Azure などの開発技術を専門とする
エバンジェリストとして、技術書籍やオンライン記
事などの執筆、さまざまな技術イベントでの講演
などを行う。

3. セッションのゴール
 TypeScript 登場の背景を振り返る
 TypeScript の基本的な言語仕様と利用方法を学ぶ
 TypeScript の現在の動向と今後を知る

4. What programming language
do you use?
どんなプログラミング言語を使っていますか？

5. JavaScript is the
Assembly Language of the Web.
by Scott Hanselman

6. TypeScript
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
JavaScript that scales.

8. 0

11. 1.5
1.6
1.7
1.8

12. TypeScript - Basics

13. 1. 2.
3.
function greeter(person) {
return "Hello, " + person;
}
var user = "Jane User";
var message = greeter(user);

14. TypeScript
ファイル
(*.ts)
TypeScript
コンパイラ
(tsc)
JavaScript
ファイル
(*.js)
TypeScript
型定義ファイル
(*.d.ts)
JavaScript
実行エンジン
Node.js または
WSH (WScript.Shell)
で実行
ECMAScript 3 (ES3)
ECMAScript 5 (ES5)
ECMAScript 2015 (ES2015) 試験的実装
Web ブラウザーや
Node.js など

15. interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => boolean
// Number
var x: number; // 明示的
var y = 0; // y: number と同じ
// Boolean
var b: boolean; // 明示的
var yes = true; // yes: boolean = true と同じ
// String
var s: string; // 明示的
var n = "akira"; // n: string = "akira" と同じ
// Enum
enum Color { Red, Green, Blue }
var myColor = Color.Red;
Console.log(Color[myColor]); // Red

16. interface Dog {
name: string;
Talk: () => string;
}
class Corgi implements Dog {
name: string;
constructor(name: string) {
this.name = name;
}
Talk(): string {
return "Bow wow!";
}
}
class myDog extends Corgi {
constructor() {
super("reo");
}
Talk(): string {
return "Wan wan!";
}
}
namespace M {
export var reo = new myDog();
}
alert(M.reo.Talk());

17. class Human<T> { ... }
var me = new Human<string>("Akira");
var a = function (x: number) { return Math.sin(x); } // 標準式
var b = x => Math.sin(x)
class Who {
private _name: string;
get Name() { return this._name; }
set Name(name: string) { this._name = name; }
}

19. TypeScript - Advanced

20. http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true
},
"exclude": [
"node_modules"
]
}

21. http://definitelytyped.org/
http://definitelytyped.org/tsd/
/// <reference path="ts/angular.d.ts" />
/// <reference path="ts/jquery.d.ts" />

23. https://github.com/Microsoft/TypeScript/wiki/Roadmap

24. https://github.com/Microsoft/TypeScript
https://github.com/DefinitelyTyped/DefinitelyTyped

26. http://www.npmtrends.com/typescript
256,621

29. Google TypeScript + VS Code

31. TypeScript
Any browser. Any host. Any OS. Open Source.
JavaScript のスーパーセット
ES 3 以上の環境をサポート
静的型付けとオブジェクト指向
多くの開発ツールのサポート
最新 ES 言語仕様を先取り
JS 開発生産性を向上

32. 
 http://www.typescriptlang.org

 http://www.typescriptlang.org/docs/tutorial.html

 https://github.com/Microsoft/TypeScript

 https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md

33. アンケートにご協力ください。
●アンケートに 上記の Session ID のブレイクアウトセッションに
チェックを入れて下さい。
●アンケートはお帰りの際に、受付でご提出ください。
マイクロソフトスペシャルグッズと引換えさせていただきます。

34. ROOM F
Ask the Speaker のご案内
●本セッションの詳細は、EXPO 会場内
『Ask the Speaker』コーナー
Room F カウンタにてご説明させて
いただきます。是非、お立ち寄りください。
Ask the Speaker
EXPO会場MAP

35. 本情報の内容（添付文書、リンク先などを含む）は作成日時点でのものであり、予告なく変更される場合があります。