Your SlideShare is downloading. ×
TypeScript 1.0 オーバービュー
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TypeScript 1.0 オーバービュー

11,953
views

Published on

Published in: Technology

0 Comments
47 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
11,953
On Slideshare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
64
Comments
0
Likes
47
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×