“We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks. “ – Brad Green, Engineering Director - AngularJS

1. TypeScript & Angular 2
Love at first sight
igor.talevski@IT-Labs.com
aleksandar.pavlovski@IT-Labs.com

4. the future of JavaScript, now
TypeScript

5. The feature gap

6. The feature gap

7. TypeScript
• Free and open-source programming language developed and maintained by Microsoft.
• Designed for development of large applications; transcompiles to JavaScript.
• Superset of JavaScript; any existing JavaScript programs are also valid TypeScript programs.
• Supports definition files that can contain type information of existing JavaScript libraries.
• TypeScript compiler is itself written in TypeScript.
• TypeScript is included as a first-class programming language in Microsoft Visual Studio 2013 Update 2
and later.

8. Why add types to JavaScript?
• Types increase your agility when doing refactoring.
It's better for the compiler to catch errors than to have things fail at runtime.
• Types are one of the best forms of documentation you can have.
The function signature is a theorem, and the function body is the proof.

9. Basic Types
Boolean
Number
String
Array
Tuple
Enum
Any

10. Template Strings
• Multiline Strings
• String Interpolation
• Tagged Templates

11. Arrow Functions
I hate JavaScript, as it tends to lose the meaning of this all too easily!
• You don't need to keep typing function.
• It lexically captures the meaning of this.
• It lexically captures the meaning of
arguments.

12. Things to Know about TypeScript
• Types
• Interfaces
• Annotations/Decorators
• async/await
• Classes
• Access Modifiers and Properties
• Modules
• Static and Instance Members
• Function Overloading*
• Generics
• Constructors
• Inheritance
• Interfaces

15. “We love TypeScript for many things… With TypeScript, several of our team members have said things
like ‘I now actually understand most of our own code!’ because they can easily traverse it and
understand relationships much better. And we’ve found several bugs via TypeScript’s checks. “
– Brad Green, Engineering Director - AngularJS
Angular <3 TypeScript

16. Transitioning from Angrular 1?
So, you've skimmed a few lines of this new shiny Angular 2.0 thing, and you were like...

17. Why Angular 2?
• Written in TypeScript.
• One framework. Mobile & desktop.
• Leading SPA framework with “batteries included”.
• Universal. Serve the first view from .NET, node.js, PHP for instant rendering in HTML and CSS.
• Built on five years of community feedback.
• By focusing on standards, we get twice the power with half the framework.

18. Building blocks
• Modules
• Components
• Services
• Directives
• Data Binding
• Dependency Injection

19. Basic Component
import { MyService } from ‘./my.service.ts’;
@Component({
selector: ‘my-component’,
template: `
<h1>{{title}}</h1>
`
})
export class MyComponent {
constructor(public myService: MyService) {…}
}

20. Data Binding
ComponentTemplate
Interpolation
{{value}}
Property Binding
[property]=“value”
Event Binding
(event)=“handler”
Two Way Binding
[(ngModel)]=“value”

21. Template syntax
• Interpolation – {{expression}}
• Method Binding - (event)=“expression”
• Property Binding - [property]=“expression”
• Two Way Binding - [(target)]=“expression”
• Hashtag Operator - #item – local variable in the template scope.
• Asterisk Operator - *ngIf – a directive that modifies the HTML.
• Elvis Operator (?.) – {{component?.property}} – safe navigation operator.

22. Architectural Best Practices
• Include all files pertinent to a component in the same folder.
• Remember CIDER for creating components:
• Create class,
• Import dependencies,
• Decorate class,
• Enhance with composition,
• Repeat for sub-components.
• Keep templates small enough to put the main component directly into the file.
• Delegate business logic from the component to a service.
• Don’t be afraid to split a component up if it’s growing too large.
• Lazy loading.

23. • Server-side rendering (Universal)
• Native mobile applications (NativeScript)
• Web Browser
• Desktop App (Electron)
• Progressive web apps (web workers, cache, push, offline)
• Hybrid mobile apps (ionic)
One platform to rule them all

24. Learning resources
https://mva.microsoft.com - Microsoft Virtual Academy
https://www.typescriptlang.org - State of the art JavaScript
https://angular.io - A step-by-step which introduces the major features of Angular

26. Thank You!
igor.talevski@it-labs.com
aleksandar.pavlovski@it-labs.com
http://it-labs.com