![Page 2: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/2.jpg)
JavaScript と Web 技術のこれまでを振り返る
TypeScript 登場の背景を知る
TypeScript 1.0 の言語仕様と利用方法を学ぶ
セッションのゴールSession Takeaways
![Page 3: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/3.jpg)
![Page 4: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/4.jpg)
![Page 5: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/5.jpg)
![Page 6: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/6.jpg)
HTML & Plug-ins
FlashSilverlight
Java AppletActiveX…
![Page 7: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/7.jpg)
HTML5 & CSS3 & JavaScript
![Page 8: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/8.jpg)
HTML5 & CSS3 & JavaScript
(function ($) {var offsetX = 20, offsetY = 20;$.widget('qs.infobox', {
options: {dataUrl: '', maxItems: 10
},_create: function () {
var that = this,name = this.name;},display: function (event, tagName) {
$.ajax({url: url,dataType: 'jsonp',success: function (data) {},
});},
});} (jQuery));
<div class="hoge" />
.hoge {color: red;background-color: #b6ff00;border-radius: 8px;
}
![Page 9: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/9.jpg)
JavaScript is the Assembly Language of the Web.
by Scott Hanselman.
![Page 10: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/10.jpg)
Problems of JavaScript
![Page 11: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/11.jpg)
Large scale JavaScript development is hard.
![Page 12: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/12.jpg)
TypeScriptAny browser. Any host. Any OS.
Open Source.
![Page 13: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/13.jpg)
![Page 14: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/14.jpg)
Any browser. Any host. Any OS. Open Source.
![Page 15: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/15.jpg)
![Page 16: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/16.jpg)
1. http://nodejs.org/
2.
3.
Compiler and Development Tool
※ TypeScript コンパイラの実体
… AppData¥Roaming¥npm¥node_modules¥typescript¥bin¥tsc.js
![Page 17: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/17.jpg)
TypeScript compilation process
TypeScriptファイル
(*.ts)
TypeScriptコンパイラ
(tsc.js)
JavaScriptファイル
(*.js)
TypeScript型定義ファイル
(*.d.ts)
JavaScript実行エンジン
(Browser, …)
Node.js または
WSH (WScript.Shell)で実行
ECMAScript 3 またはECMAScript 5 で生成
Web ブラウザーやNode.js など
![Page 18: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/18.jpg)
https://github.com/borisyankov/DefinitelyTyped
Typing for Libraries
![Page 19: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/19.jpg)
こちら
こちら
Compiler and Development Tool
![Page 20: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/20.jpg)
Compiler and Development Tool
![Page 21: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/21.jpg)
Official Web Sites
www.typescriptlang.org typescript.codeplex.com
クイック スタートサンプル
ソースコードドキュメント
![Page 22: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/22.jpg)
ブラウザベースで手軽に体験
![Page 23: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/23.jpg)
![Page 24: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/24.jpg)
TypeScript Type System
interface I { }class C { }module M { }{ s: string; }number[]() => boolean
![Page 25: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/25.jpg)
TypeScript Type System Example
// Anyvar x: any; // 明示的var y; // y: any と同じvar z: { a; b; }; // z: { a: any; b: any; } と同じ
function f(x) { // f(x: any): void と同じconsole.log(x);
}
// Numbervar x: number; // 明示的var y = 0; // y: number と同じvar z = 123.456; // z: number = 123.456 と同じ
// Booleanvar b: boolean; // 明示的var yes = true; // yes: boolean = true と同じvar no = false; // no: boolean = false と同じ
// Stringvar s: string; // 明示的var empty = ""; // empty: string = "" と同じvar abc = 'abc'; // abc: string = 'abc' と同じ
// Nullvar n: number = null; // 基本型は Null 設定可var x = null; // x: any = null と同じ
// Undefinedvar n: number; // n: number = undefined と同じvar x = undefined; // x: any = undefined と同じ // Enum
enum Color { Red, Green, Blue }var myColor = Color.Red;Console.log(Color[myColor]); // Red
![Page 26: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/26.jpg)
TypeScript Classes and Modules
interface I { }class C { }module M { }{ s: string; }number[]() => boolean
![Page 27: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/27.jpg)
TypeScript Interface, Classes Example
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!";}
}
var reo = new myDog();alert(reo.Talk());
![Page 28: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/28.jpg)
TypeScript Module Example
module Sayings {var local = 2;
export class Greeter {...
}
}
var gt = new Sayings.Greeter();
// main.tsimport log = require("./log");
log.message("Hello");
// log.tsexport function = message(s: string) {
console.log(s);}
![Page 29: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/29.jpg)
Generics : Parameterized Types
class Human<T> {constructor(public name: T) { }
Talk(): T { return this.name; }}
var me = new Human<string>("Akira");alert(me.Talk());
![Page 30: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/30.jpg)
Arrow Function Expressions
var s1 = function (x: number) { return Math.sin(x); } // 標準式
var s2 = (x: number) => { return Math.sin(x); }var s3 = (x: number) => Math.sin(x)
var s4 = x => { return Math.sin(x); }var s5 = x => Math.sin(x)
var s0: (x: number) => number;s0 = x => Math.sin(x)
![Page 31: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/31.jpg)
Get Accessor / Set Accessor
class Who {private _name: string;
get Name() { return this._name; }set Name(name: string) { this._name = name; }
}
var me = new Who();me.Name = "Akira Inoue";console.log(me.Name);
![Page 32: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/32.jpg)
![Page 33: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/33.jpg)
詳細
詳細
詳細
Unit Test for TypeScript
test("will add 5 to number", function () {var res: number = mathLib.add5(10);equal(res, 15, "should add 5");
});
![Page 34: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/34.jpg)
TypeScript Debugging
![Page 35: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/35.jpg)
![Page 36: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/36.jpg)
Aligning with ECMAScript 6
Compiler and Language Improvements
![Page 37: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/37.jpg)
JavaScript のスーパーセット
JavaScript にコンパイル
静的型付けの導入
多くの実行環境をサポート
オープンソース
![Page 38: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/38.jpg)
TypeScriptA language for large scale JavaScript development.
![Page 39: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/39.jpg)
![Page 40: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/40.jpg)
TypeScript Books
著者 : わかめまさひろ 著者 : 川俣晶 著者 : 川俣晶
![Page 41: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/41.jpg)
Compiler Options オプション 機能
-d, --declaration 型定義ファイルを生成する
-h, --help ヘルプを表示する
--mapRoot LOCATION マップファイルの場所をデバッガーに指定する
-m KIND, --module KIND 外部モジュール生成の種類を指定する : KIND は commonjs または amd
--noImplicitAny 暗黙の any 型の使用を警告する
--out FILE 複数の .ts ファイルを一つの .js ファイルとして出力する
--outDir DIRECTORY .js ファイルの出力先を指定する
--removeComments .ts 内のコメントを .js ファイルに出力しない
--sourcemap ソースマップを生成する
--sourceRoot LOCATION .ts ファイルの場所をデバッガーに指定する
-t VERSION, --target VERSION .js ファイルの ECMAScript バージョンを指定する:ES3 (default) または ES5
-v, --version tsc コンパイラバージョンを表示する
-w, --watch 指定したファイルを監視し、変更された時点で逐次コンパイルをおこなう
@<file> コマンドラインオプションを外部ファイルから読み込む
![Page 42: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/42.jpg)
Typing for the jQuery
/// <reference path="jquery.d.ts" />...
![Page 43: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/43.jpg)
http://www.typescriptlang.org/
http://typescript.codeplex.com/
http://go.microsoft.com/fwlink/?LinkId=267238
http://channel9.msdn.com/Events/Build/2014/3-576
https://groups.google.com/forum/#!forum/typescript-japan
https://www.facebook.com/groups/wTypeScript/
Resources
![Page 44: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/44.jpg)
アンケートにご協力ください。
●アンケートの「Breakout Session」記入欄に、上記の【Session ID】を
ご記入ください。
●アンケートはお帰りの際に、受付でご提出ください。
マイクロソフトスペシャルグッズと引換えさせていただきます。
![Page 45: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/45.jpg)
Ask the Speaker のご案内 Ask the Speaker
展示会場MAP
●本セッションの詳細は、展示会場内
『Ask the Speaker』コーナー
Room B カウンタにてご説明させて
いただきます。是非、お立ち寄りください。
![Page 46: TypeScript 1.0 詳説download.microsoft.com/download/2/4/9/2496ACB4-E9D4-49BA-85D… · TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル](https://reader033.vdokument.com/reader033/viewer/2022042515/5f3993b387cddb4e80323eb6/html5/thumbnails/46.jpg)