Codelab: TypeScript
1 gostou406 visualizações
Este documento discute o TypeScript, incluindo por que usar TypeScript, suas características, requisitos de instalação, tipos básicos, anotações de tipo e exemplos de código.
![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'];](https://image.slidesharecdn.com/codelabtypescript-160919131508/85/Codelab-TypeScript-8-320.jpg)
![Type Annotations
function greetPeople(greeting: string, ...names: string[]): string {
return greeting + ', ' + names.join(' and ') + '!';
}](https://image.slidesharecdn.com/codelabtypescript-160919131508/85/Codelab-TypeScript-13-320.jpg)
Codelab: TypeScript
- 1. Codelab: TypeScript GDG Feira de Santana
- 2. 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
- 4. Por quê? ● HTML5 ● CSS3 ● ES6 ● Aplicações de larga escala ● OOP
- 6. 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
- 7. Requisitos ● Node e npm ● npm install -g typescript ● Visual Studio Code ou Atom + atom-typescript ● tsc --init
- 8. 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'];
- 9. Tipos básico var something: any; something=2016; something='LordOfTheRings' var itens: Array<string>;
- 10. 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
- 11. Type Annotations reset(): void{ points=0; } sum(arg1: number, arg2: number): number{ return arg1+arg2; }
- 12. Type Annotations function sayHello(name: string=' World',greeting?: string): string { if (!greeting) { greeting = 'Hello'; } return greeting+', ' + name; }
- 13. Type Annotations function greetPeople(greeting: string, ...names: string[]): string { return greeting + ', ' + names.join(' and ') + '!'; }
- 14. Mais exemplos... ● accumulator.ts ● hello.ts ● utils.ts ● point.ts ● point3d.ts ● server.ts ● helloserver.ts
- 15. 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