• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JSLounge - TypeScript 소개
 

JSLounge - TypeScript 소개

on

  • 1,828 views

 

Statistics

Views

Total Views
1,828
Views on SlideShare
1,823
Embed Views
5

Actions

Likes
4
Downloads
12
Comments
2

1 Embed 5

http://pinterest.com 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 툴 사용해보기다른 라이브러리와의 연계 보기Demo익히기Specification 읽어보기ECMAScript 6 살펴보기Demo익히기Specification 읽어보기ECMAScript 6 살펴보기다른 라이브러리와의 연계 보기툴 사용해보기

JSLounge - TypeScript 소개 JSLounge - TypeScript 소개 Presentation Transcript

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