O documento apresenta uma introdução ao TypeScript, incluindo seus principais recursos como tipagem estática, interfaces, enums, generics e suporte a frameworks como Angular e Vue. Exemplos demonstram como o TypeScript pode prevenir erros e tornar o código mais robusto e de fácil manutenção através da verificação de tipos.

1. The fun parts!

2. Loiane Groner
@loiane
github.com/loiane
loiane.com
loiane.training
Java, JavaScript/HTML5,
Sencha, Angular, Phonegap/
Ionic, etc

3. Disponível (inglês) na amazon.com.br

4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/

6. Ambiente DEV
TypeScript 2.5
EcmaScript 2017
ES5
vanilla JS
2017

7. JavaScript que escala
Tipagem estática em tempo
de compilação
Compila para JavaScript
(vanilla, ES201X)
TypeScript

8. Fortemente tipada?
https://twitter.com/ahejlsberg/status/792762247239995392?s=09

9. Iniciando
npm install -g typescript
mv main.js main.ts
tsc main.ts
Pode até achar problemas no seu código!

12. TypeScript
Type
System

13. Don't
Repeat
Yourself!

14. // Sim
let varString = 'BrazilJS';
// NÃO!!!
let string2: string = 'BrazilJS';
Evite código verboso

15. OPCIONAL: add tipo de retorno
function ordernarNome(a: Pessoa[]): Pessoa[] {
var result = a.slice(0);
result.sort(function(x, y) {
return x.nome.localeCompare(y.nome);
});
return result;
}
Às vezes pode ajudar a encontrar algum erro no código

16. interface

17. interface Pessoa {
nome: string;
idade: number;
}
Interface é uma COISA, definição

18. interface Pessoa {
nome: string;
idade: number;
}
interface PessoaTel extends Pessoa {
telefone: string;
}
Também pode ser usada com OO

19. Duck
Typing

21. Definindo
type e
union e
intersection

22. type Figura =
{ tipo: 'circulo'; raio: number }
| { tipo: 'quadrado'; l: number };

23. function calcularArea(figura: Figura): number {
switch (figura.tipo) {
case 'circulo':
return Math.PI * figura.raio ** 2;
case 'retangulo':
return figura.a * figura.l;
case 'quadrado':
return figura.l ** 2;
}
throw new Error('Figura inválida');
}
const circulo: Figura = { tipo: 'circulo', raio: 2 };
calcularArea(circulo);

24. update(body: T & { id }): Observable<T> {
return this.http.put(
`${this.API_SERVICE_URL}/${body.id}`,
this.getBody(body)
) as Observable<T>;
}

25. enum

26. enum UsuariosActionTypes {
LOAD_REQUEST = '[Usuarios] Load Request',
LOAD_SUCCESS = '[Usuarios] Load Success'
}

27. enum UsuariosActionTypes {
LOAD_REQUEST = '[Usuarios] Load Request',
LOAD_SUCCESS = '[Usuarios] Load Success'
}
type UsuarioActions =
| { type: UsuariosActionTypes.LOAD_REQUEST }
| {
type: UsuariosActionTypes.LOAD_SUCCESS;
payload: Usuario[]
};

28. OO e
Generics

29. export class CRUDService<T> {
load(): Observable<T[]> {
// …
}
create(body: T): Observable<T> {
// …
}
}

30. export class TaskService
extends CRUDService<Task> {
// …
}

31. Frameworks

33. export interface Props {
name: string;
enthusiasmLevel?: number;
onIncrement?: () => void;
onDecrement?: () => void;
}
function Hello({ name, enthusiasmLevel = 1, onIncrement, onDecrement }: Props) {
if (enthusiasmLevel <= 0) {
throw new Error('You could be a little more enthusiastic. :D');
}
return (
<div className="hello">
<div className="greeting">
Hello {name + getExclamationMarks(enthusiasmLevel)}
</div>
<div>
<button onClick={onDecrement}>-</button>
<button onClick={onIncrement}>+</button>
</div>
</div>
);
}

34. import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import { Todo } from '../models';
@Component
export default class TodoItem extends Vue {
@Prop() public todo: Todo;
}

36. @ts-check

38. TS 2.5
Agosto 2017

39. @ts-check e refactoring

41. github.com/loiane/typescript-fun-parts

42. Obrigada!

43. @loiane
github.com/loiane
loiane.com
loiane.training
youtube.com/loianegroner