Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The advantage of developing with TypeScript


Published on

By Alessandro Giorgetti: AngularJS / AngularJS 2.0 with Typescript!

Published in: Technology
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ▲▲▲
    Are you sure you want to  Yes  No
    Your message goes here

The advantage of developing with TypeScript

  1. 1. Angular / Angular 2.0 The advantage of developing with TypeScript #angularconf15
  2. 2. Disclaimer This presentation is CAT FREE! No Animals (with the exception of some developers) Were Harmed during the creation of this work.
  3. 3. Who Am I ? Alessandro Giorgetti co-owner: SID s.r.l. co-founder: DotNetMarche, DevMarche Facebook: Twitter: @a_giorgetti LinkedIn: E-mail: Blog:
  4. 4. Gimme the code!
  5. 5. How much productive are you when writing an Angular application?
  6. 6. Is it easy to maintain and refactor your Angular application?
  7. 7. Are your tools supporting you properly?
  8. 8. Can it be better?
  9. 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. 10. TypeScript Introduction, setup and usage
  11. 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. 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. 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. 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. 15. Tools can be improved! Intellisense works (properly)! Helpful documentation! Types Annotations!
  16. 16. And help you spot errors! Calling a function with wrong arguments? Have you mistyped something?
  17. 17. Code Navigation and Refactoring Code Navigation: go to definition, find reference, etc… Refactoring!
  18. 18. Setup TypeScript You have several ways to install TypeScript (globally and locally):
  19. 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. 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 ( 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. 21. Types, Interfaces and Classes Some quick words on these concepts
  22. 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. 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. 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. 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. 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. 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. 28. Angular - concepts TypeScript – best implemented with Business Entities interface, class Service interface, class Controller class (interface) Directive function
  29. 29. Service [implement them using a class]
  30. 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. 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. 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. 33. In terms of dev experience…
  34. 34. Controller [mplement them using a class]
  35. 35. Directive [implement them using a function…]
  36. 36. Directive […or a class]
  37. 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. 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. 39. Service / Injectable No difference in how the service is built, except some api calls! Angular 1.x Angular 2.0
  40. 40. Component (controller & directive) Angular 1.x Angular 2.0
  41. 41. Thanks All! I hope you enjoyed the session! Let’s stay in touch!
  42. 42. Q. & A. Ask me something!