This document discusses using TypeScript with AngularJS. It begins with an introduction to TypeScript, covering its goals of statically identifying errors and organizing large codebases. It then reviews AngularJS's philosophy and architecture, including its use of MVVM pattern, dependency injection, and services. The document demonstrates building a sample app with TypeScript and AngularJS and notes lessons learned, such as TypeScript slowing initial development but reducing bugs. It concludes by discussing TypeScript and AngularJS's future integration.
6. WHAT IS TYPESCRIPT?
• Superset of JavaScript
• JavaScript w/ Strong Typing + Other features
• Made by Microsoft
• Will be supported in Angular 2.0
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
7. WHAT ARE TYPESCRIPT’S GOALS?
• To statically identify constructs that are most likely to
cause errors
• To provide a mechanism for organizing large code bases
• To be a language for large scale JavaScript applications
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
8. THE PROS
• Optional strong typing for a dynamically typed language
• Since it compiles down to JavaScript you can easily switch from
JavaScript to plain JS
• Allows us to use proposed ES6/2015 features now
• Has a more OOP feel (good for Java/C#/etc. devs)
• Easy for JavaScript developers to migrate to
• Helps us write fewer unit tests
• Runs on any browser, host or operating system
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
9. ES6 FEATURES NOW
• Classes
• Classical-style Inheritance
• Modules
• Arrow functions
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
10. MORE COOL STUFF!
• Interfaces
• Optionals
• Generics
• Type Inference
• Declaration Files
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
11. THE CONS
• “Slower” development time
• Lack of support for some third-party libraries
• An extra step by compiling code before running in
browser
• Still vulnerable to JavaScript gotchas so you need to
know JavaScript!
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
13. WHY USE TYPESCRIPT?
• Building enterprise level applications
• Helps prevent bugs by enforcing code organization
• Makes your JS slightly easier to read
• Enforces good coding practices
• Helps make your JavaScript more Object-oriented
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
14. LET’S WRITE SOME CODE!
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
16. WHAT IS ANGULARJS?
• Framework for building single-page applications
• Based on service based architecture, data binding and
dependency injection
• Open source and maintained by Google
• Is often referred to as being a MV* framework
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
17. ANGULAR PHILOSOPHY
• What HTML would have been if it were created today
• HTML should be dynamic
• Code should be modular and easy to test
• Components should be reusable
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
18. WHY USE ANGULAR?
• Rapid development
• Code organization
• Performance
• Easy to test
• Community
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
23. LET’S BUILD OUR APP!
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
24. LESSONS LEARNED
• Though it helps make your code more bullet-proof it does take longer
to write code using TypeScript
• The slightly slower development comes in handy when you have less
bugs to fix
• Don’t fall into the “any” trap
• Run into some issues with writing test coverage on compiled
TypeScript
• Try not to mix JS and TypeScript together
• Gradually migrate to TS and then convert your JS over
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
25. WHAT’S NEXT FOR TS + ANGULAR?
• Will ship with Angular by default though you can still use
Vanilla JS
• Some AtScript features will merge with TypeScript
• TypeScript will get more ES6 and ES7 features including
generators, symbols, let/const, async/await
• Heavy co-development between both Google and Microsoft
CODE CREW | USING TYPESCRIPT WITH ANGULARJS