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ásico
var 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ásico
var something: any;
something=2016;
something='LordOfTheRings'
var itens: Array<string>;
Tipos básico
enum 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 Annotations
reset(): void{
points=0;
}
sum(arg1: number, arg2: number): number{
return arg1+arg2;
}
Type Annotations
function sayHello(name: string=' World',greeting?: string): string {
if (!greeting) {
greeting = 'Hello';
}
return greeting+', ' + name;
}
Type Annotations
function 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

Codelab: TypeScript