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.

1. One Language to Rule Them
All: TypeScript
Loiane Groner
@loiane

3. @loiane
loiane.com
github.com/loiane
youtube.com/loianegroner
Software Engineer
Loiane Groner

4. Agenda
@loiane
·Pq usar TypeScript?
·Migrando do JavaScript para TypeScript
·TypeScript no Back-end
·TypeScript no Front-end
·Visual Studio Code + TypeScript

5. Pq TypeScript?

6. Começando
@loiane
npm install -g typescript
mv main.js main.ts
tsc main.ts
>_
Também pode usar a achar bugs existentes no
seu projeto!

7. Transpilando
@loiane
Transpila
.ts .js
$ tsc
>
_

8. Add Config
@loiane
tsc --init
>_

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. Transpilando
@loiane
Transpila
.js
$ tsc
>
_
config
.ts

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

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

13. Demo
Iniciando com TypeScript
@loiane

14. Show me the
VSCode!

15. Importante!
@loiane
·Todo código JavaScript é um código TypeScript válido
· Mesmo que existam erros de compilação no TypeScript!

16. TypeScript com
Node.js

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. Show me the
VSCode!

21. Importante!
@loiane
· Decorators para routes
· 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 class ArticleEntity {
@PrimaryGeneratedColumn('uuid')
id: string;
@CreateDateColumn()
created: Date;
@UpdateDateColumn()
updated: Date;
@Column('text')
article: string;
}

26. tsconfig.json
@loiane
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}

27. Nest.js
@loiane

28. Demo
Adicionando libs TypeScript no código
@loiane

29. Show me the
VSCode!

30. TypeScript no
Front-end: Angular

31. Web Moderna
@loiane
●Módulos
●Classes
●TypeScript

32. Desenvolvimento + rápido com ferramentas embutidas
@loiane
●CLI
●Router
●HTTP
●Forms
●Animações
●i18n
●Languages Services
●Material & CDK
●E mais!

33. Demo
Angular client
@loiane

34. Show me the
VSCode!

35. @loiane
TypeScript
+ React
https://www.typescriptlang.org/samples/index.html

36. @loiane
TypeScript
+ Vue
https://www.typescriptlang.org/samples/index.html

37. Front + Back + Shared
@loiane
Client Shared Server

38. Visual Studio Code

39. @loiane
Depuração

40. Show me the
VSCode!

41. Recapitulando
@loiane
● Adicione Type checking 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ódigo Fonte
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-line description of it
Obrigada!