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.

1. USING
TYPESCRIPT
WITH
ANGULARJS
Jamal O’Garro
NYC Camp 2015 / Front-end Camp
July 16, 2015
Software Engineer + Instructor
CODE CREW | USING TYPESCRIPT WITH ANGULARJS

2. • TypeScript
Overview
• AngularJS
Review
• Sample App
• Takeaways
CODE CREW | USING TYPESCRIPT WITH ANGULARJS
WORKSHOP ROADMAP

3. CODE CREW | USING TYPESCRIPT WITH ANGULARJS
MEET YOUR INSTRUCTOR
• Self-taught developer
• Hip-hop Head, sneakerhead, part-time A&R,
painter and photographer extraordinaire
• Secretly in love with Finance and Economics
• True Knicks, Yankees + Giants fan!!!
• Enjoys teaching + mentoring
• Organizer: Code Crew, MEAN NYC, I CODE
NY
• Languages: JavaScript, TypeScript, Ruby,
Python, C, Objective-C, Swift, Haskell

4. CODE CREW | USING TYPESCRIPT WITH ANGULARJS
CAREER ROADMAP

5. INTRO TO TYPESCRIPT
CODE CREW | USING TYPESCRIPT WITH ANGULARJS

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

12. ALTERNATIVES
• Dart
• CoffeeScript
• ClojureScript
• Fay
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

15. ANGULAR REVIEW
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

19. MVVM DESIGN PATTERN
BROWSER
VIEW VIEWMODEL MODEL
CODE CREW | USING TYPESCRIPT WITH ANGULARJS

20. DEPENDENCY INJECTION
CODE CREW | USING TYPESCRIPT WITH ANGULARJS

21. SERVICE BASED ARCHITECTURE
CODE CREW | USING TYPESCRIPT WITH ANGULARJS

22. FACTORY/SERVICE
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

26. RESOURCES
• DefinitelyTyped
• TSLint
• TypeScript Playground
• TypeScript Reference
• TypeScript Roadmap
• IDEs: Visual Studio / Webstorm (have TypeScript support)
• Angular.io
• r/angularjs
• r/typescript
CODE CREW | USING TYPESCRIPT WITH ANGULARJS

27. THANKS MUCH!!!
Jamal O’Garro
NYC Camp 2015 / Front-end Camp
July 16, 2015
Software Engineer + Instructor
CODE CREW | USING TYPESCRIPT WITH ANGULARJS