TypeScript - Javascript done right


Published on

This is an introductory presentation of the TypeScript language. It cover its genesis, its features and its use in Visual Studio 2012

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

TypeScript - Javascript done right

  1. 1. TypeScriptJavascript Done RightWekoslav Stefanovski Seavus 24.10.2012
  2. 2. Agenda• A little bit of history• Why is TypeScript needed – design goals• Using TypeScript (with Visual Studio or without)• TypeScript declaration – Types and type annotations – Classes – Interfaces and structural types – Modules• Why should I use TypeScript today?• Q&A
  3. 3. Who am I Wekoslav Stefanovski Senior Developer Seavus - Javascript (ab)user since 2000 - C# user since 2001 - Joined the Ajax and XHR fun in 2006 - Member of the Macedonian .NET user group - Co-leader of the Macedonian Visual C# user group
  4. 4. A little bit of history• What is this thing called Javascript???• Prototype-based dynamic scripting language• Build in Netscape in 1995, initially focused on non-professional developers.• Created by Brendan Eich in a 10-day hack session.• Standardized as ECMAScript (in 1999), still plenty incompatible “dialects”• We were somewhat lucky, it could have been VBScript
  5. 5. Why is TypeScript needed?• Javascript’s got 99 problems but types ain’t one – Variable hoisting – Some very idiosyncratic behaviors – No explicit includes – The this parameter can be actually that – Abysmal debugging experience – Browser DOM incompatibility is not due to Javascript• ECMAScript 6 standard specification is a long way off• Implementations are even further away
  6. 6. Why is TypeScript needed?• Still people have to use it• It’s lingua franca of the web• People have build many great product using it: – jQuery – Ext JS – GWT – Knockout – Backbone.js – JSLint / JSHint – Node.js
  7. 7. What exactly is TypeScript?• TypeScript is a language for application-scale Javascript development• TypeScript is a typed superset of JavaScript that compiles to plain Javascript• Any browser. Any host. Any OS.• Open Source• What TypeScript does is, it basically formalizes a static type system that describes JavaScripts dynamic types, but it describes them at development time. (Anders Hejlsberg)
  8. 8. TypeScript design goals• Extend Javascript to facilitate writing large applications.• Superset of Javascript• Development tooling support• Compiled Javascript that runs on any Javascript execution environment (Chakra, V8, Node.js…)• Start with Javascript and add things here and there• Generate pretty, idiomatic Javascript
  9. 9. Using TypeScript• Source file / declaration file code organization – .ts for source files – .d.ts for declaration files. – (analogous to .h and .cpp in C++)• Type safety, intellisense and compile errors• Declarations can be created for existing Javascript libraries – DOM and jQuery declarations provided with TypeScript – Possible to write your own for any existing Javascript library
  10. 10. Using TypeScript with VisualStudio• Tooling support – Static type checking. – Strong type inference. – Symbol-based navigation. – Statement completion / intellisense. – Code refactoring.• Plug-in available for download
  11. 11. Using TypeScriptwithout Visual Studio• Support available for most popular code editors (Eclipse, Sublime Text, EMACS, Vim…)• Node.js package available (typescript)• Command line compiler (tsc).
  12. 12. TypeScript declaration• Any (currently most) valid Javascript is valid TypeScript• Closely aligned with existing ECMAScript 6 proposals
  13. 13. TypeScript types and typeannotations• Optional static typing• Applied using a post-fix syntax• Support for built-in Javascript types (number, string, boolean, null, undefined, void)• Return type of the function can be inferred.• Supports optional types via ? Operator• Subtypes of the Any type• Supports typed arrays
  14. 14. TypeScript arrow notation• New feature planned for ECMAScript 6.• Compact form of function expressions that omit the function keyword.• Similar to lambda expressions in C#.• Lexical scoping of this.var messenger = { message: "Hello World", start: function() { setTimeout(() => { alert(this.message); }, 3000); }};messenger.start();
  15. 15. TypeScript interfaces andstructural types• Designed for development tooling support only.• Interfaces have no run-time representation - they are purely a compile-time construct.• Structural type system - interfaces are automatically implemented by any object/prototype that complies structurally.• Supports overload by parameter signature.• Supports implementing multiple interfaces.
  16. 16. TypeScript classes• Classes are alike to the proposed classes for ECMAScript 6.• public or private member accessibility.• Parameter property declarations via constructor.• Supports single-parent inheritance.• Derived classes make use of super calls to parent.• Do not support overloads yet.
  17. 17. TypeScript modules• Analogous to .NET namespaces.• Prevents global variable naming collisions.• Closely aligned with those proposed for ECMAScript 6.• Allows hiding implementation detail• Allows exposing a public API.
  18. 18. Why should I use TypeScript• Open Source, hosted on codeplex!!!• Tooling support, for type safety, inference and refactoring!!!• Static types and compilation helps catch mistakes & bugs earlier!!!• Structural interfaces & typing!!!• Compiles to idiomatic JavaScript!!!
  19. 19. Why should I use TypeScript(today)• Support for ECMAScript 6 today!!!• Works alongside existing code!!!• Does not hold your .js files hostage!!!• Anders Hejlsberg is involved!!!
  20. 20. Why shouldn’t I use TypeScript• It is a remove (albeit a slight one) from the Javascript sources.• Only at version 0.8 (and it shows)• Limited availability of resources & libraries (can use any existing JavaScript, albeit with limited type safety and tooling support).• No support for generics (yet, but is defined in spec).• All types are nullable.• Limited tooling support outside of Visual Studio 2012 or Monaco web editor.
  21. 21. ?
  22. 22. Thank you for your attention.
  23. 23. Please rate this lecture and WIN Windows Phone 8X by HTC! Help us choose the best Sinergija lecturer! HTC and Microsoft will awardyou – at the conference end, we’ll give one HTC Windows Phone 8X to someone from the audience – randomly. Go to www.mssinergija.net , log in and cast your votes! You can rate only lectures that you were present at, just once. More lectures you rate, more chances you have. Please use computers at the front of this room, or rate lecture from your phone or home computer, at Sinergija portal.This prize contest will end at Thursday, October 24th at 21:00. Winner will be announced at the official Sinergija web portal, www.mssinergija.netPowered by:
  24. 24. Openness and Interoperability @Microsoft Microsoft and Port25 Codeplex Open Source blogs from the resources for gateway for deeper platform community developers and exploration of and the OSS Lab teams consumers of open open source http://Port25.technet.com source projects engagements http://www.codeplex.com http://www.microsoft.com/openness Interoperability Open Up Shared Source Bridges cross-Industry portal for technical collaborative Interoperability and Programmatically works Standards activities sharing code http://www.microsoft.com http://www.interoperabilitybridges.com http://www.microsoft.com /interop/openup /sharedsource OData Open Spec BizSpark open source starter kit protocols, file formats, Program for Start-Up for Internet publishing standards, technical companies from bothof Government datasets Specifications commercial and open using the Open Data http://www.microsoft.c source backgroundshttp://ogdisdk.cloudapp.net om/openspecific http://www.microsoft.com ations /bizsparkHow can I receive up-to-date Openness announcements from Microsoft?In addition to the websites above, you can receive regular updates to Microsoft’sopenness, interoperability and standards efforts via the following channels:•http://blogs.technet.com/b/openness/•http://blogs.msdn.com/b/interoperability/•http://twitter.com/OpenAtMicrosoft•http://port25.technet.com•http://channel9.msdn.com/Blogs/Interoperability