TypeScript: Angular's Secret Weapon

TypeScript
Angular's Secret Weapon
Laurent Duveau

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

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

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.

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)

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)

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

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

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

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

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

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

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

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!

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!

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

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

What is an Interface?
A code contract

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

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

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

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

What are Generics?
Code Templates

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

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

TypeScript Secret Weapon Review
Types Tooling Interfaces Generics
Future
Today

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

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

TypeScript: Angular's Secret Weapon

Recommended

More Related Content

What's hot (20)

Viewers also liked (14)

Similar to TypeScript: Angular's Secret Weapon (20)

More from Laurent Duveau (20)

Recently uploaded (20)

TypeScript: Angular's Secret Weapon