TypeScriptAngular's Secret Weapon

Laurent Duveau

TypeScriptAngular'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

TypeScript?

Wait...Why TypeScript?

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

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

TypeScript

ES2016

ES2015

ES5

How Does TypeScript Work?

TypeScriptfile.ts

JavaScriptfile.js

TypeScript Compiler

Output ES5/ES6/… compliant code

“Transpiling”

Type Support

TypeScript TypesCore 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 = 54a.trim()

TypeError:

undefined is not a

function

var a: string = 54a.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”

Types in Action

Classes

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

Classes in Action

Interfaces

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

Interfaces in Action

Enums

Enum

enum Language {TypeScript,JavaScript,C#

}

var lang = Language.C#;var ts = Language[0]; // ts === “TypeScript”

Functions

Functions

function buildName(firstName: string, lastName?: string) {

if (lastName)return firstName + " " + lastName;

elsereturn firstName;

}

function buildName(firstName: string, lastName = "Doe") {

return firstName + " " + lastName;}

optional param

default param

Functions in Action

Tooling Support

Tooling Support Examples

Key Tooling Support Features

Code Help/

IntellisenseRefactoring Peek/Go To

Find

References

Tooling in Action

Generics

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

Generics in Action

The Future Today

The Future TodayIn 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

async/await demo

TypeScript Secret Weapon Review

Types Tooling Interfaces GenericsFuture

Today

"Angular technically

doesn't require TypeScript

kind of like technically a

car doesn't require

brakes.“ – Joe Eames

Thanks!

Need Onsite Training?

Need Onsite training on Angular and TypeScript?

Contact me at training@angular.ac!