JSLounge - TypeScript 소개

TypeScript
Reagan Hwang
Microsoft Korea

Application scale JavaScript
development 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

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

TypeScript classes and modules

Classes and modules
• Scalable application structuring
• Classes, Modules, and Interfaces enable clear contracts between components

• 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 Features
class Point { class Point3D extends Point {
x: number; constructor (x: number, y: number, public z: number) {
private color: string; super(x, y);
constructor (x: number, public y: number = 0) { }
this.x = x; dist() {
this.color = "red"; var d = super.dist();
} return Math.sqrt(d * d + this.z * this.z);
dist() { }
return Math.sqrt(this.x * this.x + this.y * this.y); }
}
get distance() { var p = new Point(10);
return Math.sqrt(this.x * this.x + this.y * this.y); p.x = 10;
} p.y = 20;
static origin = new Point(0, 0);
}

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

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

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 ECMAScript
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
• document
declare var document;
document.title = "Hello"; // Ok because document has been
declared

• jQuery
declare 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

JSLounge - TypeScript 소개

Recommended

More Related Content

What's hot (20)

Similar to JSLounge - TypeScript 소개 (20)

More from Reagan Hwang (16)

Recently uploaded (20)

JSLounge - TypeScript 소개

Editor's Notes