the advantage of developing with typescript
TRANSCRIPT
Angular / Angular 2.0 The advantage of developing
with TypeScript
#angularconf15
http://2015.angularconf.it/
Disclaimer
This presentation is CAT FREE!
No Animals (with the exception of some developers) Were Harmed during the creation of this work.
Who Am I ?Alessandro Giorgetti
co-owner: SID s.r.l.co-founder: DotNetMarche, DevMarche
Facebook: https://www.facebook.com/giorgetti.alessandroTwitter: @a_giorgetti
LinkedIn: https://it.linkedin.com/in/giorgettialessandroE-mail: [email protected]
Blog: www.primordialcode.com
Gimme the code!https://github.com/AGiorgetti/AngularConf2015
https://github.com/AGiorgetti/AngularConf2015_ng2
How much productive are you when writing an Angular
application?
Is it easy to maintain and refactor your Angular application?
Are your tools supporting you properly?
Can it be better?
Agenda• TypeScript
a quick introduction, setup and usage
• Types, Interfaces and ClassesHelp 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.
TypeScriptIntroduction, setup and usage
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 ?
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...
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.
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!
Tools can be improved!
Intellisense works (properly)! Helpful documentation!
Types Annotations!
And help you spot errors!
Calling a function with wrong arguments?
Have you mistyped something?
Code Navigation and Refactoring
Code Navigation: go to definition, find reference, etc…
Refactoring!
Setup TypeScriptYou have several ways to install TypeScript (globally and locally): http://www.typescriptlang.org/#Download
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
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.
Types, Interfaces and ClassesSome quick words on these concepts
Typesnumber, 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.
InterfacesAn 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
ClassesClasses 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)
Structural Typing / Duck TypingInterface 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”.
Show me the Code!
Write a simple ‘ToDo List’ application that interact with an external service.
(let’s have a side by side comparison)
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.
Angular - concepts TypeScript – best implemented with
Business Entities interface, class
Service interface, class
Controller class (interface)
Directive function
Service [implement them using a class]
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’
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
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!
In terms of dev experience…
Controller [mplement them using a class]
Directive [implement them using a function…]
Directive […or a class]
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.
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
Service / Injectable
No difference in how the service is built, except some api calls!
Angular 1.x Angular 2.0
Component (controller & directive)Angular 1.x Angular 2.0
Thanks All!
I hope you enjoyed the session!
Let’s stay in touch!
Q. & A.
Ask me something!