typescript ファーストステップ (rev.2) ～ any browser. any host. any os. open source. ～

TypeScript ファーストステップ (Rev.2)

～ Any browser. Any host. Any OS. Open Source. ～

日本マイクロソフト株式会社

デベロッパー & プラットフォーム統括本部

エバンジェリスト

井上章 (いのうえあきら)

blogs.msdn.com/chack twitter.com/chack411

セッションのゴールSession Takeaways

JavaScript と Web 技術のこれまでを振り返る

TypeScript の全体像を学ぶ

アプリ開発のためのWeb 技術

アプリケーションプラットフォームの変化(Hardware + OS) ≒ (Browser + JavaScript)


.hoge {color: red;background-color: #b6ff00;border-radius: 8px;

}


Memory Management

Graphics Subsystems

Storage

Threading

Security

Threading Events Networking APIs

Memory Management

Garbage Collection

GraphicsSubsystems

HTML, CSS, Canvas, Web GL, Audio, Video

Storage

Cookies,IndexedDb, File API

Security

Sandbox, SSL,CORS

Threading

Web Workers

Events

DOM Events,Callbacks

Network

WebSockets, XHR, Offline, Realtime

APIs

GeoLocation,Sensors

"JavaScript is the Assembly Language of the Web"

by Scott Hanselman.

JavaScript (ECMAScript 3) の課題点などProblems of JavaScript

• 大規模開発になるほどコードが複雑に

• デバッグ・テスト工数の増加

• プロトタイプベース OO 言語

• 変数スコープのへの理解

• 静的な型指定が不要

• ...

TypeScriptAny browser. Any host. Any OS. Open Source.


• JavaScript (ECMAScript 5) のスーパーセットとなる新しいプログラミング言語 (現在は 0.8.3 Preview)

• TypeScript コードは JavaScript コードへコンパイル

• コンパイラも TypeScript で書かれている (tsc.ts → tsc.js)

• 静的型付け、クラス、モジュールをサポート

• ECMAScript 6 (草案) をベース

• コンパイラー及び開発環境

• Visual Studio 2012 プラグインhttp://go.Microsoft.com/fwlink/?LinkID=266563

• Node.js Package Manager (npm)

• WebMatrix 2

class Point {x: number;y: number;constructor(x: number, y: number) {

this.x = x;this.y = y;

}dist() {

return Math.sqrt(this.x * this.x + this.y * this.y );

}static origin = new Point(0, 0);

}

http://go.microsoft.com/fwlink/?LinkID=266563

TypeScript : 2 つの入り口Official Web Sites

www.typescriptlang.org typescript.codeplex.com

クイックスタートサンプル

ソースコードドキュメント

http://www.typescriptlang.org/

http://typescript.codeplex.com/

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

TypeScript の開発環境 #1Compiler and Development Tool

• node.js パッケージ (npm)

• node.js のインストール: http://nodejs.org/

• TypeScript のインストール:

• TypeScript のコンパイル:

• TypeScript コンパイラの実体

• … ¥npm¥node_modules¥typescript¥bin¥tsc.js

http://nodejs.org/


• WebMatrix 2 (http://www.microsoft.com/web/)

• 拡張機能ギャラリーから “TypeScript Tools” をインストール

http://www.microsoft.com/web/


• TypeScript for Visual Studio 2012 (VS プラグイン)

• http://go.microsoft.com/fwlink/?LinkID=266563※ Visual Studio Express 2012 for Web でも利用可能

• プロジェクトテンプレート

• [新しいプロジェクト] – [TypeScript] – [HTML Application with TypeScript]

• 新しい項目の追加

• [新しい項目...] – [Visual C#] – [TypeScript File]

VS 拡張機能: Web Essentials 2012 でプレビュー (分割ウィンドウ) が利用可能

http://go.microsoft.com/fwlink/?LinkID=266563

TypeScript Type System

動的型付けから静的型付けへTypeScript Type System

• 静的型付けシステムの導入

• JavaScript のあいまいさを排除

• 安全性・可読性・生産性の向上

• 型付けするか否かは自由

• 動的型付けの利点も生かせる

• any 型: すべての型の基本

• プリミティブ (基本) 型

• number, string, bool, null, undefined

• オブジェクト型

• class, module, interface

• void 型: 戻り値なしの関数で使用

interface I { }class C { }module M { }{ s: string; }number[]() => bool

静的型付け記述例 (プリミティブ型)TypeScript Type System Example

// Anyvar 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);

}

// Numbervar x: number; // 明示的var y = 0; // y: number と同じvar z = 123.456; // z: number = 123.456 と同じ

// Booleanvar b: bool; // 明示的var yes = true; // yes: bool = true と同じvar no = false; // no: bool = false と同じ

// Stringvar s: string; // 明示的var empty = “”; // empty: string = “” と同じvar abc = ‘abc’; // abc: string = “abc” と同じ

// Nullvar n: number = null; // 基本型は Null 設定可var x = null; // x: any = null と同じ

// Undefinedvar n: number; // n: number = undefined と同じvar x = undefined; // x: any = undefined と同じ

TypeScript Classes, Modules

クラスとモジュールTypeScript Classes and Modules

• モジュール化の利点

• 疎結合化と相互影響の低減、再利用性の向上

• デバッグ、テスト、メンテナンスの容易性

• 大規模開発への対応

• ECMAScript 6 (草案) ベースの実装

• Class, Module, Arrow Function 構文

• オブジェクト指向プログラミングの導入

• ポピュラーなモジュールシステムもサポート (External Modules)

• CommonJS / AMD modules

interface I { }class C { }module M { }{ s: string; }number[]() => bool

Interface, Class, Module 記述例TypeScript Interface, Classes and Modules Example

// Interfaceinterface Mover {move(): void;getStatus(): { speed: number; };

}

interface Shaker {shake(): void;getStatus(): { frequency: number; };

}

interface MoverShaker extends Mover, Shaker {getStatus(): { speed: number;

frequency: number; };}

interface Person {FullName: string;Age: number;

}function greeter(person: Person) {}

// Module (Internal)module Sayings {export class Greeter {...

}}var greeter = new Sayings.Greeter("world");

// Classclass Greeter {greeting: string;constructor (message: string) {this.greeting = message;

}greet() {return "Hello, " + this.greeting;

}}

var greeter = new Greeter(“world”);greeter.greet();

TypeScript with jQuery

"No one writes JavaScript anymore.They write jQuery."

型定義ファイル: *.d.tsTyping for Libraries

• 各種ライブラリの変数, オブジェクト, API の定義ファイル

• *.d.ts として環境毎に定義される

• 現在用意されている主な定義ファイル (TypeScript Source Code より)

• lib.d.ts – ECMAScript APIs, DOM APIs ...

• jquery.d.ts – jQuery

• jqueryui.d.ts – jQuery UI

• winjs.d.ts – WinJS

• winrt.d.ts – WinRT

• node.d.ts – node.js

• 下記、定義ファイルリポジトリでも多数公開されているhttps://github.com/borisyankov/DefinitelyTyped

• その他、NuGet ギャラリーからも入手可能

https://github.com/borisyankov/DefinitelyTyped

TypeScript で jQuery を使うTyping for the jQuery

• TypeScript ソースコードなどから jquery.d.ts を入手

• typings¥jquery.d.ts または samples¥jquery¥jquery.d.ts

• *.ts ファイルに jquery.d.ts 参照を追加

• インテリセンス (コード補完) も有効 (Visual Studio 2012)

/// <reference path="jquery.d.ts" />...

Roadmap & Summary

TypeScript ロードマップCompiler and Language Improvements

• 0.9.x

• Generics

• Improve compiler performance

• Improvements to type system to help model a larger variety of JS libraries

• Align with ECMAScript 6

• Usability improvements to VS plugin

• 1.x

• Async/Await, Mixins, Protected access

• ES6-compatible codegen

まとめ: TypeScriptSummary

Web アプリケーションをスケールさせるために ...

• JavaScript 開発の必要性

• JavaScript の OOP やモジュール化への対応

• デバッグ・テスト工数の削減

• C#, Java などの知識を生かした JavaScript 開発

まとめ: TypeScriptSummary

Web アプリケーションをスケールさせるために ...


関連リソースResources

• Welcome to TypeScript

• http://www.typescriptlang.org/

• TypeScript Home: CodePlex

• http://typescript.codeplex.com/

• TypeScript Language Specification

• http://go.microsoft.com/fwlink/?LinkId=267121

• Build 2012: Introducing TypeScript: A language for application-scale JavaScript development

• http://channel9.msdn.com/Events/Build/2012/3-012

• 日本 TypeScript ユーザー会

• https://groups.google.com/forum/#!forum/typescript-japan

• Facebook: TypeScript グループ (wTypeScript)

• https://www.facebook.com/groups/wTypeScript/

http://www.typescriptlang.org/

http://typescript.codeplex.com/

http://go.microsoft.com/fwlink/?LinkId=267121

http://channel9.msdn.com/Events/Build/2012/3-012

https://groups.google.com/forum/#!forum/typescript-japan

https://www.facebook.com/groups/wTypeScript/

Enjoy coding, Be happy with TypeScript.

© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

typescript ファーストステップ (rev.2) ～ any browser. any host. any os. open source. ～

Technology