Technical presentation given by Laurent Duveau at Prairie Dev Con in Winnipeg on June 07th, 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

2. TypeScript
Angular's Secret Weapon
Laurent Duveau

3. TypeScript
Angular's Secret Weapon
Laurent Duveau

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

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

6. TypeScript?

7. Wait...
Why TypeScript?

8. 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.

10. 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)

11. 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)

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

13. TypeScript

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

15. Who's No. 1 in open source?
Microsoft!

16. 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

17. TypeScript
ES2016
ES2015
ES5

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

19. Type Support

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

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

22. 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!

23. 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!

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

25. Types in Action

26. Classes

27. 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

28. Classes in Action

29. Interfaces

30. What is an Interface?
A code contract

31. 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

32. Interfaces in
Action

33. Enums

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

35. Functions

36. 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

37. Functions in Action

38. Tooling Support

39. Tooling Support Examples

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

41. Tooling in Action

42. Generics

43. What are Generics?
Code Templates

44. 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

45. Generics in Action

46. The Future Today

47. 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

48. async/await demo

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

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

51. Thanks!

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