Using type script to build better apps

Download Using type script to build better apps

Post on 12-Aug-2015




1 download

Embed Size (px)


<ol><li> 1. Using TypeScript To Build Better JavaScript Apps Kurt Wiersma @kwiersma </li><li> 2. Who am I? From Minneapolis, MN Have been developing web apps for over 14 years Have used Python, Groovy, Java, C#, CFML Favorites: Python/Django, C#/MVC, AngularJS, TypeScript </li><li> 3. Agenda What is TypeScript? Syntax Getting Started Comparisons Why would you want types? Working with JavaScript libraries Tooling </li><li> 4. What is TypeScript? </li><li> 5. TypeScript lets you write JavaScript the way you really want to. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. </li><li> 6. Wait, M$ and Open Source? Are pigs ying now? </li><li> 7. JavaScript is Valid TypeScript </li><li> 8. TypeScript Syntax </li><li> 9. Features Classes Modules Interfaces Generics Arrow Functions References Type Denitions Better this by default </li><li> 10. Pros &amp; Cons Pros Syntax much like JS Targets ES 6 Optional Types Classes, Generics, Interfaces Fixes this Cons Compile step Debugging (use source maps) Another language / tool to learn </li><li> 11. Comparisons TYPESCRIPT COFFESCRIPT DART ES 6 COMPILED X X X X* TYPED X X WHITE SPACE X JS LIKE SYNTAX X 1/2 X CLASSES X X X X USE JS LIBRARIES X X X </li><li> 12. Why would you want types? Structure for large code bases and/or teams Catch errors early Provide a structured API Tooling can provide better code completion &amp; refactoring </li><li> 13. What about existing JavaScript Libraries? DenitelyTyped provides TS denitions for tons of JS libraries JQuery, Angular, Node, Ember, Backbone, ect. You can write you own denitions easily TSD tool to manage denitions </li><li> 14. Custom Denitions pusher.d.ts Useage </li><li> 15. Getting Started Install: npm -g typescript Compile: tsc --sourcemap --out js/Application.js js/_all.ts </li><li> 16. Tooling CLI: grunt with grunt-ts or gulp TSD: managing denitions for JS libraries tsd install angular --resolve --overwrite --save IDEs: WebStorm / IntelliJ (Mac &amp; Win) [$] Visual Studio 2012+ (Win) [$] Visual Studio Code (Mac &amp; Win) [Free] Eclipse (Mac &amp; Win) [Free] Editors: Sublime [$] Atom [Free] </li><li> 17. Tooling Demo </li><li> 18. Making My App Better Gradually moved over my JS to TS Added types and better structure to code along the way Made working with Angular's API easier to learn </li><li> 19. App/Code Demo </li><li> 20. Key Points Javascript is valid TypeScript TypeScript is following ECMA Script 6 Types are optional TypeScript does NOT force you to do classes and interfaces! Refactoring! Tooling! </li><li> 21. Real World Example Apps Angular In 20 Minutes Expense Manager </li><li> 22. References production.html javascripters.html calling-web-services-with-typescript.aspx </li><li> 23. Questions? Kurt Wiersma ( @kwiersma </li></ol>