TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It adds optional static types, classes, and interfaces to JavaScript to enable scalable application development. TypeScript uses type inference and structural subtyping and works seamlessly with existing JavaScript code and libraries. Type annotations provide compile-time safety while not impacting runtime behavior. TypeScript supports popular module systems and compiles to idiomatic JavaScript that runs on any browser, host, or operating system.

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