0
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: '',...
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¥typescr...
TypeScript compilation process
TypeScript
ファイル
(*.ts)
TypeScript
コンパイラ
(tsc.js)
JavaScript
ファイル
(*.js)
TypeScript
型定義ファイル
...
Compiler Options
オプション 機能
-d, --declaration 型定義ファイルを生成する
-h, --help ヘルプを表示する
--mapRoot LOCATION マップ ファイルの場所をデバッガーに指定する
-m ...







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; } ...









TypeScript Classes and Modules
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => bo...
TypeScript Interface, Classes Example
interface Dog {
name: string;
Talk: () => string;
}
class Corgi implements Dog {
nam...
TypeScript Module Example
module Sayings {
var local = 2;
export class Greeter {
...
}
}
var gt = new Sayings.Greeter();
/...



Generics : Parameterized Types
class Human<T> {
constructor(public name: T) { }
Talk(): T { return this.name; }
}
va...


Arrow Function Expressions
var s1 = function (x: number) { return Math.sin(x); } // 標準式
var s2 = (x: number) => { retu...


Get Accessor / Set Accessor
class Who {
private _name: string;
get Name() { return this._name; }
set Name(name: string...
 詳細
 詳細

 詳細

Unit Test for TypeScript
test("will add 5 to number", function () {
var res: number = mathLib.add5(10);...



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
...
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
TypeScript 1.0 オーバービュー
Upcoming SlideShare
Loading in...5
×

TypeScript 1.0 オーバービュー

12,234

Published on

Published in: Technology
0 Comments
47 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
12,234
On Slideshare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
64
Comments
0
Likes
47
Embeds 0
No embeds

No notes for slide

Transcript of "TypeScript 1.0 オーバービュー"

  1. 1. TypeScript 1.0 オーバービュー 井上 章 (いのうえ あきら) http://aka.ms/chack 日本マイクロソフト株式会社 デベロッパー エクスペリエンス & エバンジェリズム統括本部 エバンジェリスト
  2. 2.  JavaScript と Web 技術のこれまでを振り返る  TypeScript 登場の背景を知る  TypeScript 1.0 の言語仕様と利用方法を学ぶ セッションのゴール Session Takeaways
  3. 3. HTML & Plug-ins Flash Silverlight Java Applet ActiveX …
  4. 4. HTML5 & CSS3 & JavaScript
  5. 5. 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; }
  6. 6. JavaScript is the Assembly Language of the Web. by Scott Hanselman.
  7. 7.       Problems of JavaScript
  8. 8. Large scale JavaScript development is hard.
  9. 9. TypeScript Any browser. Any host. Any OS. Open Source.
  10. 10.       Any browser. Any host. Any OS. Open Source.
  11. 11. 1. http://nodejs.org/ 2. 3. Compiler and Development Tool ※ TypeScript コンパイラの実体 … AppData¥Roaming¥npm¥node_modules¥typescript¥bin¥tsc.js
  12. 12. 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 など
  13. 13. 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> コマンドライン オプションを外部ファイルから読み込む
  14. 14.        https://github.com/borisyankov/DefinitelyTyped  Typing for Libraries
  15. 15. こちら こちら     Compiler and Development Tool
  16. 16.       Compiler and Development Tool
  17. 17. Official Web Sites www.typescriptlang.org typescript.codeplex.com クイック スタート サンプル ソースコード ドキュメント
  18. 18. ブラウザベースで手軽に体験
  19. 19.         TypeScript Type System interface I { } class C { } module M { } { s: string; } number[] () => boolean
  20. 20. 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
  21. 21.          TypeScript Classes and Modules interface I { } class C { } module M { } { s: string; } number[] () => boolean
  22. 22. 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());
  23. 23. 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); }
  24. 24.    Generics : Parameterized Types class Human<T> { constructor(public name: T) { } Talk(): T { return this.name; } } var me = new Human<string>("Akira"); alert(me.Talk());
  25. 25.   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)
  26. 26.   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);
  27. 27.  詳細  詳細   詳細  Unit Test for TypeScript test("will add 5 to number", function () { var res: number = mathLib.add5(10); equal(res, 15, "should add 5"); });
  28. 28.    TypeScript Debugging
  29. 29.     Aligning with ECMAScript 6     Compiler and Language Improvements
  30. 30. JavaScript のスーパー セット JavaScript にコンパイル 静的型付けの導入 多くの実行環境をサポート オープン ソース
  31. 31. TypeScript A language for large scale JavaScript development.
  32. 32. TypeScript Books 著者 : わかめ まさひろ 著者 : 川俣 晶 著者 : 川俣 晶
  33. 33.     Typing for the jQuery /// <reference path="jquery.d.ts" /> ...
  34. 34.   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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×