1) O documento fornece dicas e truques para melhorar o código usando TypeScript, incluindo inferência de tipos, uso de tipos primitivos, interfaces e generics. 2) É recomendado evitar o uso de "any" e preferir "unknown", e habilitar "allowJS" para migrar código JavaScript para TypeScript. 3) O Visual Studio Code fornece verificação de tipos em arquivos JavaScript automaticamente.

1. Dicas e Truques
Loiane Groner
@loiane

2. Loiane Groner
@loiane
loiane.com
github.com/loiane
youtube.com/loianegroner
Engenheira de Software

3. Agenda
@loiane
·Dicas:
· Melhorar nosso código através de boas práticas com TS
· Dicas para evitar verbosidade
· JS não ser verboso ao ser migrado

4. TypeScript?

5. Fortemente Tipado?
@loianehttps://twitter.com/ahejlsberg/status/792762247239995392?s=09

6. Superset JavaScript opcionalmente
tipado que compila para JavaScript
"puro"
@loiane
typescriptlang.org

7. Show me the
VSCode!

8. Use inferência de
tipos

9. Evite verbosidade com inferência de tipos
@loiane
const meuNome: string = 'Maria';
const minhaIdade: number = 20;
const eValido: boolean = true;
const hoje: Date = new Date();
const meuNome2 = 'Maria'; // melhor assim
const minhaIdade2 = 20;
const eValido2 = true;
const hoje2 = new Date();
let titulo: string;
// logica adicional aqui
titulo = 'TypeScript' // vai garantir que outro tipo não seja atribuido

10. Prefira tipos
primitivos ao
declarar variáveis

11. Tipo do TS x interface do JS
@loiane
let nome1: String;
let nome2: string; // prefira esse
nome1 = 'nome1';
// nome2 = nome1;
let num1: Number;
let num2: number; // prefira esse
let flag1: Boolean;
let flag2: boolean; // prefira esse
let lista1: Array<number>;
let lista2: number[]; // pessoalmente prefiro esse

12. Prefira interfaces
ao tipar variáveis

13. Interface x Class para tipagem
@loiane
interface Pessoa {
nome: string;
idade: number;
}
const maria: Pessoa = {nome: 'Maria', idade: 20};
---
class Pessoa {
constructor(public nome: string, public idade: number){}
}
const maria2: Pessoa = {nome: 'Maria', idade: 20};

14. Declare tipos
mesmo sem
interfaces

15. Tipando quando necessário
@loiane
function contarCharNome1(obj: any) {
return obj.nome.length;
}
function contarCharNome(obj: {nome: string}) {
return obj.nome.length;
}
const pessoa = { nome: 'Maria', idade: 20 };
const pet = { nome: 'Rex', raca: 'pug' };
console.log(contarCharNome(pessoa));
console.log(contarCharNome(pet));

16. Crie interfaces
para representar
JSON

17. @loiane

18. Links Utilitiários
@loiane
·http://www.json2ts.com
·http://www.jsontots.com
·

19. Evite any, prefira
unknown

20. Unknown: tipagem segura em relação ao any
let resultado: unknown;
resultado = {
nome: 'Maria',
idade: 20
};
function contarCharNome3(obj: any) {
return obj.nome.length;
}
function contarCharNome2(obj: unknown) {
// return obj.nome.length;
}

21. Evite any, prefira
allowJS ao
migrar para TS

22. allowJS: true
@loiane
Todo código JavaScript é um código TypeScript válido
JS em projeto TS!

23. Visual Studio
Code

24. Verificação em arquivos JS automaticamente
@loiane

25. Verificação em arquivos JS automaticamente: Global VSCode
@loiane

26. Enum x
const assertion

27. Enum
@loiane
enum HttpStatus {
OK = 200,
CREATED = 201,
FORBIDDEN = 403,
NOT_FOUND = 404,
INTERNAL_SERVER_ERROR = 500
}
const errorCode: HttpStatus = HttpStatus.NOT_FOUND;

28. Const assertion!
@loiane
// alternativa para evitar valores mágicos
const statusHttp = {
OK: 200,
CREATED: 201,
FORBIDDEN: 403,
NOT_FOUND: 404,
INTERNAL_SERVER_ERROR: 500
} as const;
if (errorCode === statusHttp.NOT_FOUND) {
console.error('Erro');
}

29. Estrutura de
dados com
Generics

30. Use Generics
@loiane
const dicionario = new Map<string, number>();
dicionario.set('typescript', 25);
dicionario.set('javascript', 25);
// dicionario.set(1, {nome: 'typeScript'});

31. Guardas de tipos

32. Type Guards
@loiane
class Animal {
desc: string;
}
class Estimacao extends Animal {
nome: string;
getCorColeira() { }
}
function eDeEstimacao(animal: Animal): animal is Estimacao {
return animal instanceof Estimacao;
}
function imprimeColeiraPet2(animal: Animal) {
if (eDeEstimacao(animal)) {
console.log(animal.getCorColeira());
}
}

33. Tipos Parciais

34. Tipos Parciais
@loiane
interface Contato {
nome: string;
idade: number;
}
type ContatoParcial = Partial<Contato>;
function atualizarPessoa(objAtualizar: Contato, atualizacoes: ContatoParcial) {
return { ... objAtualizar, ...atualizacoes };
}

35. Adote flags
tsConfig
gradativamente

36. Flags mais avançadas
@loiane

37. Angular v9: Ivy
@loiane
● fullTemplateTypeCheck (ngIf, ngFor)
● strictTemplates: ajuda a achar bugs que você não sabia
que existiam!
https://angular.io/guide/template-typecheck

38. Links + Referências
@loiane
Código Fonte
TypeScript
Ebook TypeScript Grátis
TS Extension Pack
github.com/loiane/typescript-tips
http://bit.ly/typescriptlang
http://bit.ly/snippet-creator
http://bit.ly/ts-extension-pack

39. Final point
A one-line description of it
Obrigada!