Your SlideShare is downloading. ×
JSLounge - TypeScript 소개
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JSLounge - TypeScript 소개

1,666
views

Published on

Published in: Technology

2 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,666
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
2
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 툴 사용해보기다른 라이브러리와의 연계 보기Demo익히기Specification 읽어보기ECMAScript 6 살펴보기Demo익히기Specification 읽어보기ECMAScript 6 살펴보기다른 라이브러리와의 연계 보기툴 사용해보기
  • Transcript

    • 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 Featuresclass 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 Typesfunction vote(candidate: string, callback: (result: string) => any) { // ...}vote("BigPig", function(result: string) { if (result === "BigPig") { // ... } });
    • 28. Object Typesvar 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

    ×