TypeScript ファーストステップ～ Any browser. Any host. Any OS. Open Source. ～

TypeScript ファーストステップ
～ Any browser. Any host. Any OS. Open Source. ～

日本マイクロソフト株式会社
デベロッパー & プラットフォーム統括本部
エバンジェリスト
井上章 (いのうえあきら)
blogs.msdn.com/chack twitter.com/chack411

セッションのゴール
Session Takeaways

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

 TypeScript の全体像を学ぶ

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

モダン Web アプリエクスペリエンス
Single Page Application Architecture

Scripting
Engine
HTML
View
HTTP
Async

View
Model REST Web API
JSON
クライアント XML サーバー

アプリ開発のための "Web 技術"
マルチデバイスエクスペリエンスと Web 技術

• HTML5 / CSS3
• クロスプラットフォームにおける共通 UI マークアップ
• JavaScript
• 第一級のプログラミング言語としての進化と普及
• JavaScript ライブラリの普及やサーバーサイドへの応用
• Web API
• 進む HTTP サービス (REST API) の利用と開発ニーズ
• ネイティブアプリ開発への応用
• Windows ストアアプリ開発 (HTML5 + CSS3 + JavaScript + WinRT)

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

Memory Graphics
Storage Security
Management Subsystems

Threading Events Networking APIs


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


Memory Graphics Storage Security
Memory
Management Subsystems
Graphics
Storage
Cookies, Security SSL,
Sandbox,
Subsystems
Management HTML, CSS, Canvas,
Garbage Collection Web GL, Audio, Video IndexedDb, File API CORS

Threading
Threading Events
Events Network
Networking APIs
APIs
Web Workers DOM Events, WebSockets, XHR, GeoLocation,
Callbacks Offline, Realtime Sensors

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

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

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

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

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

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

• 静的な型指定が不要

• ...

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

TypeScript
• JavaScript (ECMAScript 5) のスーパーセットとなる
新しいプログラミング言語 (現在は 0.8.1.1 Preview)
• TypeScript コードは JavaScript コードへコンパイル
• コンパイラも TypeScript で書かれている (tsc.ts → tsc.js)

• 静的型付け、クラス、モジュールをサポート class Point {
x: number;
• ECMAScript 6 (草案) をベース y: number;
constructor(x: number, y:number) {
this.x = x;
• コンパイラー及び開発環境 }
this.y = y;

• Visual Studio 2012 プラグイン
dist() {
return Math.sqrt(
http://go.microsoft.com/fwlink/?LinkID=266563 this.x * this.x +
this.y * this.y );
• Node.js Package Manager (npm) }
static origin = new Point(0, 0);
• WebMatrix 2
}

TypeScript : 2 つの入り口
Official Web Sites

www.typescriptlang.org typescript.codeplex.com

クイックスタートソースコード
サンプルドキュメント

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

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

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

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

• TypeScript のコンパイル:

• TypeScript コンパイラの実体
• … ¥npm¥node_modules¥typescript¥bin¥tsc.js


• WebMatrix 2 (http://www.microsoft.com/web/)
• 拡張機能ギャラリーから “TypeScript Tools” をインストール


• Visual Studio 2012 プラグイン
• TypeScript for Visual Studio 2012
http://go.microsoft.com/fwlink/?LinkID=266563
※ Visual Studio Express 2012 for Web でも利用可能
• プロジェクトテンプレート
• [新しいプロジェクト] – [Visual C#] –
[HTML Application with TypeScript]

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

動的型付けから静的型付けへ
TypeScript Type System
• 静的型付けシステムの導入
• JavaScript のあいまいさを排除
• 安全性・可読性・生産性の向上 interface I { }
class C { }
• 型付けするか否かは自由 module M { }
• 動的型付けの利点も生かせる { s: string; }
number[]
() => bool
• any 型: すべての型の基本
• プリミティブ (基本) 型
• number, string, bool, null, undefined
• オブジェクト型
• class, module, interface, literal
• void 型: 戻り値なしの関数で使用

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

// Any // Boolean
var x: any; // 明示的 var b: bool; // 明示的
var y; // y: any と同じ var yes = true; // yes: bool = true と同じ
var z: { a; b; }; // z: { a: any; b: any; } と同じ var no = false; // no: bool = false と同じ

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 と同じ
// Null
var n: number = null; // 基本型は Null 設定可
var x = null; // x: any = null と同じ // String
var s: string; // 明示的
var empty = “”; // empty: string = “” と同じ
// Undefined var abc = ‘abc’; // abc: string = “abc” と同じ
var n: number; // n: number = undefined と同じ
var x = undefined; // x: any = undefined と同じ

クラスとモジュール
TypeScript Classes and Modules
• モジュール化の利点 interface I { }
• 疎結合化と相互影響の低減、再利用性の向上 class C { }
module M { }
• デバッグ、テスト、メンテナンスの容易性 { s: string; }
• 大規模開発への対応 number[]
() => bool
• ECMAScript 6 (草案) ベースの実装
• Class, Module, Arrow Function 構文
• オブジェクト指向プログラミングの導入

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

Interface, Class, Module 記述例
TypeScript Interface, Classes and Modules Example
// Interface // Class
interface Mover { class Greeter {
move(): void; greeting: string;
getStatus(): { speed: number; }; constructor (message: string) {
} this.greeting = message;
}
interface Shaker { greet() {
shake(): void; return "Hello, " + this.greeting;
getStatus(): { frequency: number; }; }
} }

interface MoverShaker extends Mover, Shaker { var greeter = new Greeter(“world”);
getStatus(): { speed: number; greeter.greet();
frequency: number; };
}
// Module (Internal)
interface Person { module Sayings {
FullName: string; export class Greeter {
Age: number; ...
} }
function greeter(person: Person) { }
} var greeter = new Sayings.Greeter(“world”);

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

型定義ファイル: *.d.ts
Typing 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
• その他、NuGet ギャラリーからも入手可能

TypeScript で jQuery を使う
Typing for the jQuery
• TypeScript ソースコードから jquery.d.ts を入手
• typings¥jquery.d.ts または samples¥jquery¥jquery.d.ts

• *.ts ファイルに jquery.d.ts 参照を追加
/// <reference path="jquery.d.ts" />
...
• インテリセンス (コード補完) も有効 (Visual Studio 2012)

TypeScript ロードマップ
Compiler and Language Improvements
• 0.8.1.1 (Alpha): 現在
• 0.8.2
• Improve compiler performance
• 0.8.3
• Generics
• Improvements to type system to help model a larger variety of JS libraries
• 0.9.x
• Align with ECMAScript 6
• Community site for .d.ts files
• Usability improvements to VS plugin
• 1.x
• Async/Await, Mixins, Protected access

まとめ: TypeScript
Summary

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

• JavaScript 開発の必要性

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

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

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

まとめ: TypeScript
Summary

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

TypeScript

関連リソース
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

• Facebook: TypeScript グループ (wTypeScript)
• https://www.facebook.com/groups/wTypeScript/

Enjoy coding, Be happy with TypeScript.

© 2012 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 ファーストステップ～ Any browser. Any host. Any OS. Open Source. ～

More Related Content

What's hot (20)

Similar to TypeScript ファーストステップ～ Any browser. Any host. Any OS. Open Source. ～ (20)

More from Akira Inoue (20)

Recently uploaded (9)