The benefits of using TypeScript to develop Angular 1.x and Angular 2.0 applications

1. Angular / Angular 2.0
The advantage of developing
with TypeScript
#angularconf15
http://2015.angularconf.it/

2. Disclaimer
This presentation is CAT FREE!
No Animals (with the exception of some developers)
Were Harmed during the creation of this work.

3. Who Am I ?
Alessandro Giorgetti
co-owner: SID s.r.l.
co-founder: DotNetMarche, DevMarche
Facebook: https://www.facebook.com/giorgetti.alessandro
Twitter: @a_giorgetti
LinkedIn: https://it.linkedin.com/in/giorgettialessandro
E-mail: alessandro.giorgetti@live.com
Blog: www.primordialcode.com

4. Gimme the code!
https://github.com/AGiorgetti/AngularConf2015
https://github.com/AGiorgetti/AngularConf2015_ng2

5. How much productive are you
when writing an Angular
application?

6. Is it easy to maintain and refactor
your Angular application?

7. Are your tools supporting you
properly?

8. Can it be better?

9. Agenda
• TypeScript
a quick introduction, setup and usage
• Types, Interfaces and Classes
Help us structuring the application!
Help the tools provide us more information!
• Sounds good: show me some Angular code!
Write an Angular app with TypeScript:
• Service
• Controller
• Directive
• Q. & A.

10. TypeScript
Introduction, setup and usage

11. When your JavaScript app becomes big...
• Lack of Code Structuring / Coherence:
• Many different style of writing JavaScript.
• Lack of Object Oriented design paradigms and class based programming techniques.
• 'New / Unusual' design patterns (prototypical inheritance, revealing module patterns
etc...).
• You need to define a code style guide.
• You need to enforce that style guide: it needs discipline!
• No type checking!
• You need more tests to catch trivial errors.
• No way to ‘enforce’ code contracts or constraints.
• Code is not self-documented: you NEED better documentation.
• Tooling isn’t good enough!
• No (or very poor) code analysis.
• No type checking.
• Very poor refactoring support.
• Intellisense ? Can you trust it ?

12. More often than not…
JavaScript tools fail!
The good news: JavaScript is evolving! ES6* to the rescue!
* the problem is you cannot have full access to those feature right now! You'll have to wait... and ES5 will be out in the
wild for quite some time anyway...

13. TypeScript
• It's an Open Source project from Microsoft Technologies.
• An attempt to 'fix' the missing parts of JavaScript.
• A Superset of JavaScript => JavaScript + Static Types (and
Classes and Modules and more…).
• It uses ES6 syntax with Type Annotation and compiles to
plain JavaScript (target: ES3, ES5, ES6).
• Any valid JavaScript application is also a TypeScript
application.

14. TypeScript
Helps us to:
• Structure our code (interfaces, classes and modules).
• Use object-oriented programming paradigms and techniques.
• Enforce coding guidelines.
Enables a better Coding Experience:
• Intellisense.
• Syntax checking.
• Code Analysis & Navigation.
• Refactoring.
• Documentation.
Gets us ready for Angular 2.0.
The best part of it: It's all a development time illusion!

15. Tools can be improved!
Intellisense works (properly)! Helpful documentation!
Types Annotations!

16. And help you spot errors!
Calling a function with wrong arguments?
Have you mistyped something?

17. Code Navigation and Refactoring
Code Navigation: go to definition, find reference, etc…
Refactoring!

18. Setup TypeScript
You have several ways to install TypeScript (globally
and locally):
http://www.typescriptlang.org/#Download

19. TSC - the TypeScript compiler
TSC is a source-to-source compiler (a transpiler).
There are lots of options that allow you to:
• concatenate different files in a single output file.
• generate sourcemaps.
• generate module loading code (node.js or require.js).
tsc app.tsapp.ts app.js

20. TSD - TypeScript Definition Files package manager
TypeScript Definition File (ambient declaration file)
• .d.ts extension.
• Allows the definition of strong types.
• Provide type definition for external JavaScript libraries.
DefinitelyTyped (http://definitelytyped.org/):
a community driven project on GitHub that tracks all of
them.
TSD: a specialized package manager to look for definition
files inside DefinitelyTyped repository.

21. Types, Interfaces and
Classes
Some quick words on these concepts

22. Types
number, string, etc... all the primitive JavaScript Types.
any: I can be any type, disable the type checking!
void: I have no type at all (function return value)!
enum / const enum: define enumerated values.
<T>: casting! This is not a type conversion!
generics: great for code reuse! We can specify constraints if we
want.

23. Interfaces
An interface defines a contract in your code, the shape of an entity.
Interfaces can describe:
• Objects
• Functions
• Arrays / Dictionaries
• Hybrid Types ('things' that are both objects and functions)
Interfaces support:
• Inheritance
They do not support accessors (get / set): you need to convert the 'property' to a 'getProperty()' function if
you wanna give that readonly behavior

24. Classes
Classes implement the behaviors of an entity, it brings the entity to life.
They have support for:
• accessors (get, set) [ES5+]
• modifiers: public, private, protected
• constructor
• inheritable
• static properties
• abstract (class & methods)
• interface implementation
Classes also define Types, they have two sides:
• instance side (the properties involved in structural type checking)
• static side (constructor and static properties, not involved in the type checking)

25. Structural Typing / Duck Typing
Interface and Classe are used to define new Types!
The shape of an object matters!
Two different objects (interfaces, classes) that expose
the same properties are considered compatible.
“This mean you can assign 'apples' to 'oranges' under
specific conditions”.

26. Show me the Code!
Write a simple ‘ToDo List’ application that interact
with an external service.
(let’s have a side by side comparison)

27. Angular favors:
• Separation of Concerns.
• Code Structuring (module, service, controller,
directive).
TypeScript is all about:
• Code Structuring (interface, class, namespace,
module).
• Better tooling / development experience.

28. Angular - concepts TypeScript – best implemented with
Business Entities interface, class
Service interface, class
Controller class (interface)
Directive function

29. Service [implement them using a class]

30. Service [Class declaration and constructor]
A generic ‘function’ becomes a ‘class’
An initialization function becomes the constructor
Dependency injection is specified with a static property
Usage of arrow functions to properly manage the ‘this’

31. Service [define member functions]
No need to use the ‘function’ keyword.
No need to specify ‘this.’: functions already belongs to the class.
1) Creates an ‘instance’ function.
2) Creates a ‘prototype’ function.
1
2

32. The ‘This’
The 'this': most of the times it represents the instance of the
class itself (like in C#).
The 'this' has a different meaning in function expression and
when using the 'arrow syntax':
• function() { … }: this act exactly as expected in strict
mode (it can be undefined or whatever it was when
entering the function execution context).
• () => { … }: this always refers to the class instance.
Composition / Encapsulation patterns: don't mess up with the
this! Always delegate the function call properly, that is: call
the function on its original object rather than assigning the
pointer to the function to another variable!

33. In terms of dev experience…

34. Controller [mplement them using a class]

35. Directive [implement them using a function…]

36. Directive […or a class]

37. Angular 2.0
• Built with TypeScript.
• Heavy use of Decorators to annotate objects.
• Except for some ‘infrastructure’ code needed by
Angular 2.0, there’s not much difference in how
you implement Services and Components using
TypeScript.

38. Decorators (ES7 proposal)
Decorators make it possible to annotate and modify classes and properties at
design time.
A decorator is:
• an expression
• that evaluates to a function
• that takes the target, name, and property descriptor as arguments
• and optionally returns a property descriptor to install on the target object
In TypeScript we have 4 types of decorators:
• ClassDecorator
• MethodDecorator
• PropertyDecorator
• ParameterDecorator

39. Service / Injectable
No difference in how the service is built, except some api calls!
Angular 1.x Angular 2.0

40. Component (controller & directive)
Angular 1.x Angular 2.0

41. Thanks All!
I hope you enjoyed the session!
Let’s stay in touch!

42. Q. & A.
Ask me something!