Technical presentation given by Laurent Duveau at the House of Commons in Ottawa on April 25, 2017. Thanks to Dan Wahlin for providing the original version of the slides. I added more content to fit in a 1h talk.

1. TypeScript
Angular's Secret Weapon
Laurent Duveau

2. TypeScript
Angular's Secret Weapon
Laurent Duveau

3. Laurent Duveau
@LaurentDuveau
http://angular.ac/blog
Microsoft MVP and RD

4. • TypeScript ?
• Weapons
Types
Classes
Interfaces
Enums
• Tooling
• Generics
• Future
Agenda

5. TypeScript?

6. Wait...
Why TypeScript?

7. JavaScript
The Good
• It’s everywhere
• Huge amount of
libraries
• Flexible
The Bad
• Dynamic typing
• Lack of modularity
• Verbose patterns
(IIFE)
In short: JavaScript development scales badly.

8. Wish list
 Scalable HTML5 clientside development
 Modular code
 Easily learnable for Java or C# developers
 Non-invasive (existing libs, browser support)
 Long-term vision
 Clean Js output (exit strategy)

9. TypeScript!
 Scalable HTML5 clientside development
 Modular code
 Easily learnable for Java or C# developers
 Non-invasive (existing libs, browser support)
 Long-term vision
 Clean Js output (exit strategy)

10. “TypeScript? It’s like
coding JavaScript but
without the pain”
- Someone on Hacker News

11. TypeScript

12. TypeScript
• Open Source
• https://github.com/Microsoft/TypeScript
• Apache License 2.0

13. Who's No. 1 in open source?
Microsoft!
Source:
https://octoverse.github.com/

14. What is TypeScript?
• TypeScript is a typed superset of JavaScript that
compiles to plain JavaScript
• Any browser. Any host. Any OS
• Any valid JavaScript is valid Typescript
Visual Studio 2015: NuGet
Visual Studio 2017: built-in
Visual Studio Code: built-in
> npm install -g typescript

15. TypeScript
ES2016
ES2015
ES5

16. How Does TypeScript Work?
TypeScript
file.ts
JavaScript
file.js
TypeScript Compiler
Output ES5/ES6/…
compliant code
“Transpiling”

17. Type Support

18. TypeScript Types
Core types (optional but very helpful):
• string
• number
• boolean
• Date
• Array
• any
Custom types

19. TypeScript Type Annotations
name: string;
age: number;
isEnabled: boolean;
pets: string[];
accessories: string | string[];

20. Why Use Types?
@Component({...})
export class CalculatorComponent implements OnInit {
total: number = 0;
add(x: number, y: number) : number {
return x + y;
}
}
ngOnInit() {
this.total = this.add('26', 20);
}
Oops!

21. Errors at compile-time!
var a = 54
a.trim()
TypeError:
undefined is not a
function
var a: string = 54
a.trim()
Cannot convert
‘number’ to ‘string’
JavaScript TypeScript
runtime… compile-time!

22. “It feels just like writing
JavaScript, but with a thin
layer of type annotations
that bring you the familiar
advantages of static
typing”

23. Types in Action

24. Classes

25. Class, ctor, public/private, prop
class Auto {
constructor(private _engine:string) {
}
get engine():string {
return this._engine;
}
set engine(val:string) {
this._engine = val;
}
start() {
console.log("Take off using: " + this._engine);
}
}
constructor
get/set property
blocks
method

26. Classes in Action

27. Interfaces

28. What is an Interface?
A code contract

29. Interface Example
var person: ICustomer = {
firstName: 'Dave',
};
interface ICustomer {
firstName: string;
lastName: string;
age?: number;
}
lastName: 'Johnson'
Valid! Satisfied contract.
Invalid! Didn't satisfy contract.
Interface are only for compiler, do not generate Js code

30. Interfaces in Action

31. Enums

32. Enum
enum Language {
TypeScript,
JavaScript,
C#
}
var lang = Language.C#;
var ts = Language[0]; // ts === “TypeScript”

33. Functions

34. Functions
function buildName(firstName: string, lastName?: string)
{
if (lastName)
return firstName + " " + lastName;
else
return firstName;
}
function buildName(firstName: string, lastName = "Doe")
{
return firstName + " " + lastName;
}
optional param
default param

35. Functions in Action

36. Tooling Support

37. Tooling Support Examples

38. Key Tooling Support Features
Code Help/
Intellisense
Refactoring Peek/Go To
Find
References

39. Tooling in Action

40. Generics

41. What are Generics?
Code Templates

42. What's a Code Template?
export class List<T> {
add(item: T) {...}
}
...
var custs = new List<ICustomer>();
custs.add({ firstName: 'Ted', lastName: 'James'});
custs.add(205); //not valid
List<T> can be used in many
different ways

43. Generics in Action

44. The Future Today

45. The Future Today
In 2016 decorators were an integral part of Angular
via TypeScript
…While still being a Proposal in the ES2016 spec
Use "future" features today:
async/await
Many more...
https://github.com/Microsoft/TypeScript/wiki/Roadmap

46. async/await demo

47. TypeScript Secret Weapon Review
Types Tooling Interfaces Generics
Future
Today

48. "Angular technically
doesn't require TypeScript
kind of like technically a
car doesn't require
brakes.“ – Joe Eames

49. Thanks!

50. Need Onsite Training?
Need Onsite training on Angular and TypeScript?
Contact me at training@angular.ac!