SlideShare ist ein Scribd-Unternehmen logo
1 von 43
Downloaden Sie, um offline zu lesen
One Language to Rule Them
All: TypeScript
Loiane Groner
@loiane
@loiane
loiane.com
github.com/loiane
youtube.com/loianegroner
Software Engineer
Loiane Groner
Agenda
@loiane
·Pq usar TypeScript?
·Migrando do JavaScript para TypeScript
·TypeScript no Back-end
·TypeScript no Front-end
·Visual Studio Code + TypeScript
Pq TypeScript?
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!
Transpilando
@loiane
Transpila
.ts .js
$ tsc
>
_
Add Config
@loiane
tsc --init
>_
tsconfig.json
@loiane
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./"
},
"exclude": ["node_modules"]
}
Transpilando
@loiane
Transpila
.js
$ tsc
>
_
config
.ts
Fortemente Tipado?
@loianehttps://twitter.com/ahejlsberg/status/792762247239995392?s=09
Superset JavaScript opcionalmente
tipado que compila para JavaScript
"puro"
@loiane
typescriptlang.org
Demo
Iniciando com TypeScript
@loiane
Show me the
VSCode!
Importante!
@loiane
·Todo código JavaScript é um código TypeScript válido
· Mesmo que existam erros de compilação no TypeScript!
TypeScript com
Node.js
TypeScript para Back-End
@loiane
$ npm i -D ts-node nodemon typescript
tslint
>_
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
Demo
TypeScript+ Express + MongoDB
@loiane
Show me the
VSCode!
Importante!
@loiane
· Decorators para routes
· Decorators para validar objetos
· IoC: Inversion of Control (Inversão de Controle)
· Inversify
· typescript-ioc
·Type ORM
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);
}
}
Validação de Objetos
@loiane
import { IsString, Length } from 'class-validator';
export class ArticleDTO {
@IsString()
@Length(10, 200)
article: string;
@IsString()
description: string;
}
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;
}
Type ORM
@loiane
@Entity('article')
export class ArticleEntity {
@PrimaryGeneratedColumn('uuid')
id: string;
@CreateDateColumn()
created: Date;
@UpdateDateColumn()
updated: Date;
@Column('text')
article: string;
}
tsconfig.json
@loiane
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
}
Nest.js
@loiane
Demo
Adicionando libs TypeScript no código
@loiane
Show me the
VSCode!
TypeScript no
Front-end: Angular
Web Moderna
@loiane
●Módulos
●Classes
●TypeScript
Desenvolvimento + rápido com ferramentas embutidas
@loiane
●CLI
●Router
●HTTP
●Forms
●Animações
●i18n
●Languages Services
●Material & CDK
●E mais!
Demo
Angular client
@loiane
Show me the
VSCode!
@loiane
TypeScript
+ React
https://www.typescriptlang.org/samples/index.html
@loiane
TypeScript
+ Vue
https://www.typescriptlang.org/samples/index.html
Front + Back + Shared
@loiane
Client Shared Server
Visual Studio Code
@loiane
Depuração
Show me the
VSCode!
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!
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
Final point
A one-line description of it
Obrigada!

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (18)

Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10Campus Party Brasil 2017: Angular 2 #cpbr10
Campus Party Brasil 2017: Angular 2 #cpbr10
 
Dependency Injection in Go
Dependency Injection in GoDependency Injection in Go
Dependency Injection in Go
 
JS Experience 2017 - React + Redux. Pensando em Redux
JS Experience 2017 - React + Redux. Pensando em ReduxJS Experience 2017 - React + Redux. Pensando em Redux
JS Experience 2017 - React + Redux. Pensando em Redux
 
Turbolinks
TurbolinksTurbolinks
Turbolinks
 
Criando uma arquitetura para seus testes de API com RestAssured
Criando uma arquitetura para seus testes de API com RestAssuredCriando uma arquitetura para seus testes de API com RestAssured
Criando uma arquitetura para seus testes de API com RestAssured
 
Aula 05/06 (Service)
Aula 05/06 (Service)Aula 05/06 (Service)
Aula 05/06 (Service)
 
Trabalhando de Forma Assíncrona com JavaScript
Trabalhando de Forma Assíncrona com JavaScriptTrabalhando de Forma Assíncrona com JavaScript
Trabalhando de Forma Assíncrona com JavaScript
 
Treze ferramentas/frameworks para desenvolvimento android
Treze ferramentas/frameworks para desenvolvimento androidTreze ferramentas/frameworks para desenvolvimento android
Treze ferramentas/frameworks para desenvolvimento android
 
TDC2018SP | Trilha Android - Assincronismo no Android, de RxJava a Coroutines
TDC2018SP | Trilha Android - Assincronismo no Android, de RxJava a CoroutinesTDC2018SP | Trilha Android - Assincronismo no Android, de RxJava a Coroutines
TDC2018SP | Trilha Android - Assincronismo no Android, de RxJava a Coroutines
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)
 
React - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesReact - Compartilhando estado entre componentes
React - Compartilhando estado entre componentes
 
Criando uma grid para execução de testes paralelo com Appium
Criando uma grid para execução de testes paralelo com AppiumCriando uma grid para execução de testes paralelo com Appium
Criando uma grid para execução de testes paralelo com Appium
 
Entendento Arquitetura MVI + Flow
Entendento Arquitetura MVI + FlowEntendento Arquitetura MVI + Flow
Entendento Arquitetura MVI + Flow
 
Android DevConference - Data Binding: Código limpo, manutenção garantida
Android DevConference - Data Binding: Código limpo, manutenção garantidaAndroid DevConference - Data Binding: Código limpo, manutenção garantida
Android DevConference - Data Binding: Código limpo, manutenção garantida
 
Novidades do .Net 4.0
Novidades do .Net 4.0Novidades do .Net 4.0
Novidades do .Net 4.0
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2
 
React Native - JSday
React Native - JSdayReact Native - JSday
React Native - JSday
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
 

Ähnlich wie One Language to Rule Them All: TypeScript

Testes Automatizados e o iOS
Testes Automatizados e o iOSTestes Automatizados e o iOS
Testes Automatizados e o iOS
Ricardo Valeriano
 
Visual Studio 2010 e C# 4
Visual Studio 2010 e C# 4Visual Studio 2010 e C# 4
Visual Studio 2010 e C# 4
CDS
 
Framework Entities - Apresentação da Defesa da Dissertacao
Framework Entities - Apresentação da Defesa da DissertacaoFramework Entities - Apresentação da Defesa da Dissertacao
Framework Entities - Apresentação da Defesa da Dissertacao
Marcius Brandão
 

Ähnlich wie One Language to Rule Them All: TypeScript (20)

Programação Orientada a Testes
Programação Orientada a TestesProgramação Orientada a Testes
Programação Orientada a Testes
 
Minicurso kotlin UTFPR
Minicurso kotlin UTFPR Minicurso kotlin UTFPR
Minicurso kotlin UTFPR
 
Minicurso kotlin no desenvolvimento mobile - UTFPR
Minicurso kotlin no desenvolvimento mobile - UTFPRMinicurso kotlin no desenvolvimento mobile - UTFPR
Minicurso kotlin no desenvolvimento mobile - UTFPR
 
Desvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor AndroidDesvendando as ferramentas e serviços para o desenvolvedor Android
Desvendando as ferramentas e serviços para o desenvolvedor Android
 
Testes Automatizados e o iOS
Testes Automatizados e o iOSTestes Automatizados e o iOS
Testes Automatizados e o iOS
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
C#4 - Parte 2 - COM interop e variância
C#4 - Parte 2 - COM interop e variânciaC#4 - Parte 2 - COM interop e variância
C#4 - Parte 2 - COM interop e variância
 
Como ser programador durante o dia e mesmo assim dormir bem à noite
Como ser programador durante o dia e mesmo assim dormir bem à noiteComo ser programador durante o dia e mesmo assim dormir bem à noite
Como ser programador durante o dia e mesmo assim dormir bem à noite
 
Visual Studio 2010 e C# 4
Visual Studio 2010 e C# 4Visual Studio 2010 e C# 4
Visual Studio 2010 e C# 4
 
Qualidade de Software: Escrevendo Código Limpo
Qualidade de Software: Escrevendo Código LimpoQualidade de Software: Escrevendo Código Limpo
Qualidade de Software: Escrevendo Código Limpo
 
Minicurso Objective-C
Minicurso Objective-CMinicurso Objective-C
Minicurso Objective-C
 
Mock Objects
Mock ObjectsMock Objects
Mock Objects
 
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
Qcon SP 2012, 5 (ou mais) coisas que você gostaria de saber sobre o iOS e o O...
 
Treze ferramentas/frameworks para desenvolvimento Android
Treze ferramentas/frameworks para desenvolvimento AndroidTreze ferramentas/frameworks para desenvolvimento Android
Treze ferramentas/frameworks para desenvolvimento Android
 
JQuery
JQuery JQuery
JQuery
 
Framework Entities - Apresentação da Defesa da Dissertacao
Framework Entities - Apresentação da Defesa da DissertacaoFramework Entities - Apresentação da Defesa da Dissertacao
Framework Entities - Apresentação da Defesa da Dissertacao
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
InterCon 2017 - Engenharia de segurança web: Proteja todas as camadas de seu ...
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
 

Kürzlich hochgeladen

Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
Natalia Granato
 

Kürzlich hochgeladen (6)

Padrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemploPadrões de Projeto: Proxy e Command com exemplo
Padrões de Projeto: Proxy e Command com exemplo
 
Assessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdfAssessement Boas Praticas em Kubernetes.pdf
Assessement Boas Praticas em Kubernetes.pdf
 
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docxATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
ATIVIDADE 1 - LOGÍSTICA EMPRESARIAL - 52_2024.docx
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Boas práticas de programação com Object Calisthenics
Boas práticas de programação com Object CalisthenicsBoas práticas de programação com Object Calisthenics
Boas práticas de programação com Object Calisthenics
 
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docxATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
ATIVIDADE 1 - GCOM - GESTÃO DA INFORMAÇÃO - 54_2024.docx
 

One Language to Rule Them All: TypeScript