TypeScript 1.0 オーバービュー
井上 章 (いのうえ あきら)
http://aka.ms/chack
日本マイクロソフト株式会社
デベロッパー エクスペリエンス & エバンジェリズム統括本部
エバンジェリスト

 JavaScript と Web 技術のこれまでを振り返る
 TypeScript 登場の背景を知る
 TypeScript 1.0 の言語仕様と利用方法を学ぶ
セッションのゴール
Session Takeaways

HTML & Plug-ins
Flash
Silverlight
Java Applet
ActiveX
…

HTML5 & CSS3 & JavaScript

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;
}

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







Problems of JavaScript

Large scale JavaScript development is hard.

TypeScript
Any browser. Any host. Any OS.
Open Source.







Any browser. Any host. Any OS. Open Source.

1. http://nodejs.org/
2.
3.
Compiler and Development Tool
※ TypeScript コンパイラの実体
… AppData¥Roaming¥npm¥node_modules¥typescript¥bin¥tsc.js

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 など

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> コマンドライン オプションを外部ファイルから読み込む








https://github.com/borisyankov/DefinitelyTyped

Typing for Libraries

こちら
こちら




Compiler and Development Tool







Compiler and Development Tool

Official Web Sites
www.typescriptlang.org typescript.codeplex.com
クイック スタート
サンプル
ソースコード
ドキュメント

ブラウザベースで手軽に体験









TypeScript Type System
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => boolean

TypeScript Type System Example
// Any
var 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);
}
// Number
var x: number; // 明示的
var y = 0; // y: number と同じ
var z = 123.456; // z: number = 123.456 と同じ
// Boolean
var b: boolean; // 明示的
var yes = true; // yes: boolean = true と同じ
var no = false; // no: boolean = false と同じ
// String
var s: string; // 明示的
var empty = ""; // empty: string = "" と同じ
var abc = 'abc'; // abc: string = 'abc' と同じ
// Null
var n: number = null; // 基本型は Null 設定可
var x = null; // x: any = null と同じ
// Undefined
var 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










TypeScript Classes and Modules
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => boolean

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());

TypeScript Module Example
module Sayings {
var local = 2;
export class Greeter {
...
}
}
var gt = new Sayings.Greeter();
// main.ts
import log = require("./log");
log.message("Hello");
// log.ts
export function =
message(s: string) {
console.log(s);
}




Generics : Parameterized Types
class Human<T> {
constructor(public name: T) { }
Talk(): T { return this.name; }
}
var me = new Human<string>("Akira");
alert(me.Talk());



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)



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);

 詳細
 詳細

 詳細

Unit Test for TypeScript
test("will add 5 to number", function () {
var res: number = mathLib.add5(10);
equal(res, 15, "should add 5");
});




TypeScript Debugging




 Aligning with ECMAScript 6




Compiler and Language Improvements

JavaScript のスーパー セット
JavaScript にコンパイル
静的型付けの導入
多くの実行環境をサポート
オープン ソース

TypeScript
A language for large scale JavaScript development.

TypeScript Books
著者 : わかめ まさひろ 著者 : 川俣 晶 著者 : 川俣 晶





Typing for the jQuery
/// <reference path="jquery.d.ts" />
...


 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