1. TypeScript
Reagan Hwang
Microsoft Korea

2. Application scale JavaScript
development is hard.

3. TypeScript is a language for application
scale JavaScript development.

4. TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript.

5. TypeScript is a typed superset of JavaScript
that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.

6. 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

7. TypeScript Type System

8. 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

9. Type Annotation

10. Object types : interface

11. TypeScript classes and modules

12. 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

13. Class

14. 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);
}

15. Module

16. Application Scale TypeScript

17. 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

18. 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

19. Nodejs

20. 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

21. Sublime Text

22. 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);

23. Definition 파일(lib.d.ts)
document.onmousemove = function (e) {
}
onmousemove: (ev: MouseEvent) => any;

24. 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();

25. 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

26. Ambient Declarations
• document
declare var document;
document.title = "Hello"; // Ok because document has been
declared
• jQuery
declare var $;

27. Function Types
function vote(candidate: string, callback: (result: string) => any) {
// ...
}
vote("BigPig",
function(result: string) {
if (result === "BigPig") {
// ...
}
}
);

28. Object Types
var MakePoint: () => {
x: number; y: number;
};

29. 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