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.

Typescript: the Fun Parts (BrazilJS 2017)

894 Aufrufe

Veröffentlicht am

Palestra apresentada no BrazilJS 2017 em Porto Alegre dia 26 de Agosto de 2017

Veröffentlicht in: Technologie
  • Login to see the comments

Typescript: the Fun Parts (BrazilJS 2017)

  1. 1. The fun parts!
  2. 2. Loiane Groner @loiane github.com/loiane loiane.com loiane.training Java, JavaScript/HTML5, Sencha, Angular, Phonegap/ Ionic, etc
  3. 3. Disponível (inglês) na amazon.com.br
  4. 4. https://novatec.com.br/livros/estruturas-de-dados-algoritmos-em-javascript/
  5. 5. Ambiente DEV TypeScript 2.5 EcmaScript 2017 ES5 vanilla JS 2017
  6. 6. JavaScript que escala Tipagem estática em tempo de compilação Compila para JavaScript (vanilla, ES201X) TypeScript
  7. 7. Fortemente tipada? https://twitter.com/ahejlsberg/status/792762247239995392?s=09
  8. 8. Iniciando npm install -g typescript mv main.js main.ts tsc main.ts Pode até achar problemas no seu código!
  9. 9. TypeScript Type System
  10. 10. Don't Repeat Yourself!
  11. 11. // Sim let varString = 'BrazilJS'; // NÃO!!! let string2: string = 'BrazilJS'; Evite código verboso
  12. 12. 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
  13. 13. interface
  14. 14. interface Pessoa { nome: string; idade: number; } Interface é uma COISA, definição
  15. 15. interface Pessoa { nome: string; idade: number; } interface PessoaTel extends Pessoa { telefone: string; } Também pode ser usada com OO
  16. 16. Duck Typing
  17. 17. Definindo type e union e intersection
  18. 18. type Figura = { tipo: 'circulo'; raio: number } | { tipo: 'quadrado'; l: number };
  19. 19. 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);
  20. 20. update(body: T & { id }): Observable<T> { return this.http.put( `${this.API_SERVICE_URL}/${body.id}`, this.getBody(body) ) as Observable<T>; }
  21. 21. enum
  22. 22. enum UsuariosActionTypes { LOAD_REQUEST = '[Usuarios] Load Request', LOAD_SUCCESS = '[Usuarios] Load Success' }
  23. 23. enum UsuariosActionTypes { LOAD_REQUEST = '[Usuarios] Load Request', LOAD_SUCCESS = '[Usuarios] Load Success' } type UsuarioActions = | { type: UsuariosActionTypes.LOAD_REQUEST } | { type: UsuariosActionTypes.LOAD_SUCCESS; payload: Usuario[] };
  24. 24. OO e Generics
  25. 25. export class CRUDService<T> { load(): Observable<T[]> { // … } create(body: T): Observable<T> { // … } }
  26. 26. export class TaskService extends CRUDService<Task> { // … }
  27. 27. Frameworks
  28. 28. 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> ); }
  29. 29. 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; }
  30. 30. @ts-check
  31. 31. TS 2.5 Agosto 2017
  32. 32. @ts-check e refactoring
  33. 33. github.com/loiane/typescript-fun-parts
  34. 34. Obrigada!
  35. 35. @loiane github.com/loiane loiane.com loiane.training youtube.com/loianegroner

×