JSLounge - TypeScript 소개
-
Upload
reagan-hwang -
Category
Technology
-
view
1.695 -
download
0
Transcript of JSLounge - TypeScript 소개
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