TypeScript 1.0 詳説

Size: px

Start display at page:

Download "TypeScript 1.0 詳説"

さわかに
6 years ago
Views:

1 Room B

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

6 HTML & Plug-ins Flash Silverlight Java Applet ActiveX

7 HTML5 & CSS3 & JavaScript

8 HTML5 & CSS3 & JavaScript <div class="hoge" />.hoge { color: red; background-color: #b6ff00; border-radius: 8px; } (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));

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

10 Problems of JavaScript

11 Large scale JavaScript development is hard.

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

14 Any browser. Any host. Any OS. Open Source.

16 Compiler and Development Tool TypeScript コンパイラの実体 AppData Roaming npm node_modules typescript bin tsc.js

ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル (*.

17 TypeScript compilation process Node.js または WSH (WScript.Shell) で実行 Web ブラウザーや Node.js など TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル (*.js) JavaScript 実行エンジン (Browser, ) TypeScript 型定義ファイル (*.d.ts) ECMAScript 3 または ECMAScript 5 で生成

18 Typing for Libraries

19 Compiler and Development Tool こちらこちら

20 Compiler and Development Tool

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

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

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

25 TypeScript Type System Example // Any var x: any; // 明示的 var y; // y: any と同じ var z: { a; b; }; // z: { a: any; b: any; } と同じ // Boolean var b: boolean; var yes = true; var no = false; // 明示的 // yes: boolean = true と同じ // no: boolean = false と同じ function f(x) { // f(x: any): void と同じ console.log(x); } // 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 と同じ // Number var x: number; var y = 0; var z = ; // String // 明示的 // y: number と同じ // z: number = と同じ var s: string; // 明示的 var empty = ""; // empty: string = "" と同じ var abc = 'abc'; // abc: string = 'abc' と同じ // Enum enum Color { Red, Green, Blue } var mycolor = Color.Red; Console.log(Color[myColor]); // Red

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

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

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

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

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

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

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

34 TypeScript Debugging

36 Compiler and Language Improvements Aligning with ECMAScript 6

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

38 TypeScript A language for large scale JavaScript development.

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

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

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

43 Resources

44 アンケートにご協力くださいアンケートの Breakout Session 記入欄に上記の Session ID をご記入くださいアンケートはお帰りの際に受付でご提出くださいマイクロソフトスペシャルグッズと引換えさせていただきます

45 Ask the Speaker のご案内 Ask the Speaker 本セッションの詳細は展示会場内 Ask the Speaker コーナー Room B カウンタにてご説明させていただきます是非お立ち寄りください展示会場 MAP

ASP.NET 5 Web 開発～フレームワーク編～

ASP.NET 5 Web 開発～フレームワーク編～ ROOM A Time Room ID Title 9:30 10:30 A DEV-002 Visual Studio Online 概要 ~ 開発基盤のクラウド化 ~ 今ココ 13:15 13:40 G DEV-005S.NET Core 5 on Linux and Mac OS X 5/27 Day 2 14:35 15:35 C DEV-023 15:55 16:55 A DEV-006