TypeScriptReagan HwangMicrosoft Korea

Application scale JavaScriptdevelopment is hard.

TypeScript is a language for application scale JavaScript development.

TypeScript is a typed superset of JavaScript

that compiles to plain JavaScript.

TypeScript is a typed superset of JavaScript

that compiles to plain JavaScript.

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

TypeScript

• Starts with JavaScript• All JavaScript code is TypeScript code, simply copy and paste• All JavaScript libraries work with TypeScript

• Optional static types, classes, modules• Enable scalable application development and excellent tooling• Zero cost: Static types completely disappear at run-time

• Ends with JavaScript• Compiles to idiomatic JavaScript• Runs in any browser or host, on any OS

TypeScript Type System

Type System

• Formalization of JavaScript’s types• Static representation of JavaScript’s dynamic type system

• Type inference and structural typing• In practice very few type annotations are necessary

• Works with existing JavaScript libraries• Declaration files can be written and maintained separately

• Not “provably type safe”• Types reflect intent but do not provide guarantees

Type Annotation

Object types : interface

TypeScript classes and modules

Classes and modules

• Scalable application structuring• Classes, Modules, and Interfaces enable clear contracts between compo-

nents

• Aligned with emerging standards• Class, Module, and Arrow Function syntax aligns with ECMAScript 6 proposals

• Supports popular module systems• CommonJS and AMD modules in any ECMAScript 3 compatible environment

Class

Class Featuresclass Point { x: number; private color: string; constructor (x: number, public y: number = 0) { this.x = x; this.color = "red"; } dist() { return Math.sqrt(this.x * this.x + this.y * this.y); } get distance() { return Math.sqrt(this.x * this.x + this.y * this.y); } static origin = new Point(0, 0);}

class Point3D extends Point { constructor (x: number, y: number, public z: num-ber) { super(x, y); } dist() { var d = super.dist(); return Math.sqrt(d * d + this.z * this.z); }}

var p = new Point(10);p.x = 10;p.y = 20;

Module

Application Scale TypeScript

TypeScript preview

• Compiler• Open Source, written in TypeScript

• Tooling• Visual Studio language service, browser hosted playground

• Libraries• Static typing of DOM, jQuery, node.js, WinRT, WinJS, …

• And More• Lots of samples and formal Language Specification

Editors

• TypeScript is available in Sublime Text, Vi, Emacs editor• http://

blogs.msdn.com/b/interoperability/archive/2012/10/01/sublime-text-vi-emacs-typescript-enabled.aspx

Nodejs

Visual Studio

• TypeScript for Visual Studio 2012• http://

www.microsoft.com/en-us/download/details.aspx?id=34790

• Web Essentials 2012• http://

visualstudiogallery.msdn.microsoft.com/07d54d12-7133-4e15-becb-6f451ea3bea6

Sublime Text

Interface 응용interface Accumulator { clear(): void; add(x: number): void; result(): number;}

function makeAccumulator():Accumulator { var sum = 0; return { clear: function () { sum = 0; }, addx: function (value: number) { sum += value; }, result: function () { return sum; } }}var a = makeAccumulator();a.add(5);

Definition 파일 (lib.d.ts)

document.onmousemove = function (e) {

}

onmousemove: (ev: MouseEvent) => any;

Arrow Function Expressions• TypeScript supports arrow function expressions, a new feature planned for EC-

MAScript 6. Arrow function expressions are a compact form of function expressions that omit the function keyword and have lexical scoping of this.

class Tracker { count = 0; start() { window.onmousemove = e => { this.count++; console.log(this.count); } }}var t = new Tracker();t.start();

TypeScript Roadmap• 0.8.2

• Improve the build system• 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• A handful of language features are scheduled for exploration after the 1.0 release, including:

• Async/Await • Mixins• Protected access

• ES6-compatible codegen

Ambient Declarations

• documentdeclare var document;document.title = "Hello"; // Ok because document has been declared

• jQuerydeclare var $;

Function Types

function vote(candidate: string, callback: (result: string) => any) { // ...}

vote("BigPig", function(result: string) { if (result === "BigPig") { // ... } });

Object Types

var MakePoint: () => {    x: number; y: number;};

Resources• TypeScript Website

• http://www.typescriptlang.org/#Download

• Introducing TypeScript • http://channel9.msdn.com/posts/Anders-Hejlsberg-Introducing-TypeScript

• Introducing TypeScript: A language for application-scale JavaScript development / build conference 2012• http://channel9.msdn.com/Events/Build/2012/3-012

• Inside TypeScript• http://channel9.msdn.com/posts/Anders-Hejlsberg-Steve-Lucco-and-Luke-Hoban-Inside-TypeScript

• Introducing TypeScript / JSConf EU 2012• http://www.youtube.com/watch?v=3UTIcQYQ8Rw

• ECMAScript 6• http://channel9.msdn.com/Events/Lang-NEXT/Lang-NEXT-2012/ECMAScript-6

• Getting started: TypeScript for Windows 8 Projects using Visual Studio 2012• http://

blogs.msdn.com/b/yizhe/archive/2012/11/22/getting-started-typescript-for-windows-8-projects-using-visual-studio-2012.aspx

• http://blog.tattoocoder.com/2012/10/typescript-for-windows-8-store-apps.html