TypeScript 1.0 オーバービュー

13,501 views
13,212 views

Published on

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

No Downloads
Views
Total views
13,501
On SlideShare
0
From Embeds
0
Number of Embeds
3,047
Actions
Shares
0
Downloads
68
Comments
0
Likes
47
Embeds 0
No embeds

No notes for slide

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

×