Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Dicas e Truques TypeScript

845 Aufrufe

Veröffentlicht am

Dicas e Truques TypeScript

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

Dicas e Truques TypeScript

  1. 1. Dicas e Truques Loiane Groner @loiane
  2. 2. Loiane Groner @loiane loiane.com github.com/loiane youtube.com/loianegroner Engenheira de Software
  3. 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. 4. TypeScript?
  5. 5. Fortemente Tipado? @loianehttps://twitter.com/ahejlsberg/status/792762247239995392?s=09
  6. 6. Superset JavaScript opcionalmente tipado que compila para JavaScript "puro" @loiane typescriptlang.org
  7. 7. Show me the VSCode!
  8. 8. Use inferência de tipos
  9. 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. 10. Prefira tipos primitivos ao declarar variáveis
  11. 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. 12. Prefira interfaces ao tipar variáveis
  13. 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. 14. Declare tipos mesmo sem interfaces
  15. 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. 16. Crie interfaces para representar JSON
  17. 17. @loiane
  18. 18. Links Utilitiários @loiane ·http://www.json2ts.com ·http://www.jsontots.com ·
  19. 19. Evite any, prefira unknown
  20. 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. 21. Evite any, prefira allowJS ao migrar para TS
  22. 22. allowJS: true @loiane Todo código JavaScript é um código TypeScript válido JS em projeto TS!
  23. 23. Visual Studio Code
  24. 24. Verificação em arquivos JS automaticamente @loiane
  25. 25. Verificação em arquivos JS automaticamente: Global VSCode @loiane
  26. 26. Enum x const assertion
  27. 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. 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. 29. Estrutura de dados com Generics
  30. 30. Use Generics @loiane const dicionario = new Map<string, number>(); dicionario.set('typescript', 25); dicionario.set('javascript', 25); // dicionario.set(1, {nome: 'typeScript'});
  31. 31. Guardas de tipos
  32. 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. 33. Tipos Parciais
  34. 34. Tipos Parciais @loiane interface Contato { nome: string; idade: number; } type ContatoParcial = Partial<Contato>; function atualizarPessoa(objAtualizar: Contato, atualizacoes: ContatoParcial) { return { ... objAtualizar, ...atualizacoes }; }
  35. 35. Adote flags tsConfig gradativamente
  36. 36. Flags mais avançadas @loiane
  37. 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. 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. 39. Final point A one-line description of it Obrigada!

×