Transferir como PDF, PPTX
![tsconfig.json @loiane { "compilerOptions": { "module": "commonjs", "declaration": true, "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es6", "sourceMap": true, "outDir": "./dist", "baseUrl": "./" }, "exclude": ["node_modules"] }](https://image.slidesharecdn.com/typescriptonelanguagetorulethemall-200412174753/75/One-Language-to-Rule-Them-All-TypeScript-9-2048.jpg)
![Decorators para routes: OvernightJS! @loiane @Controller('api/attendee') export class AttendeeController { @Get() @Middleware([middleware1, middleware2]) async findAll(req: Request, res: Response) { const records = await Attendee.find(); return res.status(HttpStatus.OK).json(records); } }](https://image.slidesharecdn.com/typescriptonelanguagetorulethemall-200412174753/75/One-Language-to-Rule-Them-All-TypeScript-22-2048.jpg)
Carregado porLoiane Groner
One Language to Rule Them All: TypeScript
O documento discute as vantagens do TypeScript, como ele adiciona tipagem estática opcional ao JavaScript, permitindo a detecção de erros e melhor produtividade. O documento também demonstra como usar TypeScript no front-end com Angular e no back-end com Node.js.
One Language to Rule Them All: TypeScript
- 1. One Language toRule Them All: TypeScript Loiane Groner @loiane
- 3.
- 4. Agenda @loiane ·Pq usar TypeScript? ·Migrandodo JavaScript para TypeScript ·TypeScript no Back-end ·TypeScript no Front-end ·Visual Studio Code + TypeScript
- 5.
- 6. Começando @loiane npm install -gtypescript mv main.js main.ts tsc main.ts >_ Também pode usar a achar bugs existentes no seu projeto!
- 7.
- 8.
- 9. tsconfig.json @loiane { "compilerOptions": { "module": "commonjs", "declaration":true, "removeComments": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es6", "sourceMap": true, "outDir": "./dist", "baseUrl": "./" }, "exclude": ["node_modules"] }
- 10.
- 11.
- 12. Superset JavaScript opcionalmente tipadoque compila para JavaScript "puro" @loiane typescriptlang.org
- 13.
- 14.
- 15. Importante! @loiane ·Todo código JavaScripté um código TypeScript válido · Mesmo que existam erros de compilação no TypeScript!
- 16.
- 17. TypeScript para Back-End @loiane $npm i -D ts-node nodemon typescript tslint >_
- 18. Arquivo de Definição @loiane $npm i --save-dev @types/node @types/express > _ "devDependencies": { "@types/dotenv": "^6.1.1", "@types/express": "^4.16.0", "@types/mongoose": "^5.3.27", "@types/node": "^10.12.18", "@types/passport-jwt": "^3.0.1", "nodemon": "^1.18.9", "ts-node": "^7.0.1", "tslint": "5.12.1", "typescript": "^3.2.4" }, @loiane
- 19. Demo TypeScript+ Express +MongoDB @loiane
- 20.
- 21. Importante! @loiane · Decorators pararoutes · Decorators para validar objetos · IoC: Inversion of Control (Inversão de Controle) · Inversify · typescript-ioc ·Type ORM
- 22. Decorators para routes:OvernightJS! @loiane @Controller('api/attendee') export class AttendeeController { @Get() @Middleware([middleware1, middleware2]) async findAll(req: Request, res: Response) { const records = await Attendee.find(); return res.status(HttpStatus.OK).json(records); } }
- 23. Validação de Objetos @loiane import{ IsString, Length } from 'class-validator'; export class ArticleDTO { @IsString() @Length(10, 200) article: string; @IsString() description: string; }
- 24. Inversão de Controle @loiane import{ AutoWired, Inject, Singleton } from 'typescript-ioc'; @Singleton class PersonService { @Inject private personDAO: PersonDAO; } class PersonController { @Inject private personService: PersonService; @Inject creationTime: Date; }
- 25. Type ORM @loiane @Entity('article') export classArticleEntity { @PrimaryGeneratedColumn('uuid') id: string; @CreateDateColumn() created: Date; @UpdateDateColumn() updated: Date; @Column('text') article: string; }
- 26.
- 27.
- 28. Demo Adicionando libs TypeScriptno código @loiane
- 29.
- 30.
- 31.
- 32. Desenvolvimento + rápidocom ferramentas embutidas @loiane ●CLI ●Router ●HTTP ●Forms ●Animações ●i18n ●Languages Services ●Material & CDK ●E mais!
- 33.
- 34.
- 35.
- 36.
- 37. Front + Back+ Shared @loiane Client Shared Server
- 38.
- 39.
- 40.
- 41. Recapitulando @loiane ● Adicione Typechecking no seu JavaScript ● Use @ts-check para iniciar ● Instale @types para ajudar com auto-complete ● Adicione tipagem onde for necessário (Inferência de tipos) ● + produtividade com bibliotecas e frameworks ● Use TypeScript no lado cliente (front | mobile) ● Visual Studio Code sempre ajuda na produtividade!
- 42. Links + Referências @loiane CódigoFonte TypeScript Ebook TypeScript Grátis TS Extension Pack Azure Tools Extension Pack TS MERN Nest.js http://bit.ly/typescript-msbuild-2019 http://bit.ly/typescriptlang http://bit.ly/snippet-creator http://bit.ly/ts-extension-pack http://bit.ly/code-azure-pack http://bit.ly/ts-mern https://nestjs.com
- 43. Final point A one-linedescription of it Obrigada!