Codelab: TypeScript

GDG Feira de Santana

Por quê?● Pense na Web alguns anos atrás.● Sites dinâmicos: DHTML, JQuery, AJAX● Aplicação monolítica: problemas com escopo e carregamento de bibliotecas

Por quê?● HTML5● CSS3● ES6● Aplicações de larga escala● OOP

Características do TypeScript● Criado pela Microsoft● Todo JS é um TS válido: reaproveita seu código● Produtividade:

○ ferramentas○ tipagem estática○ análise de código

● Fácil para quem veio do C#, Java, C++, etc.● Utilizado pelo Google no Angular 2

Requisitos● Node e npm● npm install -g typescript● Visual Studio Code ou Atom + atom-typescript● tsc --init

Tipos básicovar players: number=11

var brand: string='Yamaha'

var message: string = `Today it's a happy day!

I just bought a new ${brand} sportbike`;

var isMarquezFasterThanRossi: boolean = false;

var brands: string[] = ['Yamaha', 'Honda', 'Ducati'];

Tipos básicovar something: any;

something=2016;

something='LordOfTheRings'

var itens: Array<string>;

Tipos básicoenum Brands { Honda, Yamaha, Suzuki, BMW, Ducati, Triumph};

enum JapaneseBrands { Honda = 1, Yamaha, Suzuki};

enum EuropeanBrands {BMW=10, Ducati=20, Trimph=30}

let sym1 = Symbol();let sym2 = Symbol("key"); // optional string key

Type Annotationsreset(): void{

points=0;

}

sum(arg1: number, arg2: number): number{

return arg1+arg2;

}

Type Annotationsfunction sayHello(name: string=' World',greeting?: string): string {

if (!greeting) {

greeting = 'Hello';

}

return greeting+', ' + name;

}

Type Annotationsfunction greetPeople(greeting: string, ...names: string[]): string {

return greeting + ', ' + names.join(' and ') + '!';

}

Mais exemplos...● accumulator.ts● hello.ts● utils.ts● point.ts● point3d.ts● server.ts● helloserver.ts

Saiba mais● www.typescriptlang.org● http://definitelytyped.org/● Build 2016: What’s new in TypeScript● Código dos exemplos:

https://github.com/romualdoandre/gdg-codelab-typescript