Using type script to build better apps
0 likes•652 views
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It allows you to write JavaScript in a more structured way using types, classes, and interfaces. Using TypeScript can help catch errors early and provide better code completion through tooling. While TypeScript adds types and other features, JavaScript code is still valid TypeScript code. The TypeScript compiler outputs plain JavaScript that runs on any browser or environment.
![Tooling
• CLI: grunt with grunt-ts or gulp
• TSD: managing definitions for JS libraries
• tsd install angular --resolve --overwrite --save
• IDEs:
• WebStorm / IntelliJ (Mac & Win) [$]
• Visual Studio 2012+ (Win) [$]
• Visual Studio Code (Mac & Win) [Free]
• Eclipse (Mac & Win) [Free]
• Editors:
• Sublime [$]
• Atom [Free]](https://image.slidesharecdn.com/rijbtdxqjaimggvmtqa6-signature-e847456c6a6f52f4d0f0f7669a8f77f77a8ca5cc3daa63de0a00591556073525-poli-150518152322-lva1-app6892/85/Using-type-script-to-build-better-apps-16-320.jpg)
Using type script to build better apps
- 1. Using TypeScript To Build Better JavaScript Apps Kurt Wiersma @kwiersma [email protected]
- 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
- 3. Agenda • What is TypeScript? • Syntax • Getting Started • Comparisons • Why would you want types? • Working with JavaScript libraries • Tooling
- 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. • http://typescriptlang.org
- 6. Wait, M$ and Open Source? Are pigs flying now?
- 7. JavaScript is Valid TypeScript
- 9. Features • Classes • Modules • Interfaces • Generics • Arrow Functions • References • Type Definitions • Better “this” by default
- 10. Pros & 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
- 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
- 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 & refactoring
- 13. What about existing JavaScript Libraries? • DefinitelyTyped provides TS definitions for tons of JS libraries • JQuery, Angular, Node, Ember, Backbone, ect. • http://definitelytyped.org • You can write you own definitions easily • TSD tool to manage definitions
- 15. Getting Started • Install: • npm -g typescript • Compile: • tsc --sourcemap --out js/Application.js js/_all.ts
- 16. Tooling • CLI: grunt with grunt-ts or gulp • TSD: managing definitions for JS libraries • tsd install angular --resolve --overwrite --save • IDEs: • WebStorm / IntelliJ (Mac & Win) [$] • Visual Studio 2012+ (Win) [$] • Visual Studio Code (Mac & Win) [Free] • Eclipse (Mac & Win) [Free] • Editors: • Sublime [$] • Atom [Free]
- 17. Tooling Demo
- 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
- 19. App/Code Demo
- 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!
- 21. Real World Example Apps • Angular In 20 Minutes • Expense Manager
- 22. References • http://gilamran.blogspot.co.il/2013/07/typescript-on- production.html • http://gilamran.blogspot.com/2014/04/typescript-for- javascripters.html • http://visualstudiomagazine.com/articles/2013/10/01/ calling-web-services-with-typescript.aspx