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

More Related Content

What's hot

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 #cpbr10Loiane Groner
 
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 ReduxiMasters
 
Dependency Injection in Go
Dependency Injection in GoDependency Injection in Go
Dependency Injection in GoKurtisAngelo
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)Cezar Luiz
 
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 JavaScriptLucas Anderson
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2Bruno Catão
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1Bruno Catão
 
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 Coroutinestdc-globalcode
 
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 RestAssuredElias Nogueira
 
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 AppiumElias Nogueira
 
Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - FunctionsWesley Lemos
 
Introdução ao Ruby on Rails
Introdução ao Ruby on RailsIntrodução ao Ruby on Rails
Introdução ao Ruby on RailsJuan Maiz
 
Gems para colocar seus testes no trilho
Gems para colocar seus testes no trilho Gems para colocar seus testes no trilho
Gems para colocar seus testes no trilho Webgoal
 
React - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesReact - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesJefferson Mariano de Souza
 
Armazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwaArmazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwaEduardo Matos
 

What's hot (20)

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
 
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
 
Dependency Injection in Go
Dependency Injection in GoDependency Injection in Go
Dependency Injection in Go
 
React + Flux (Alt)
React + Flux (Alt)React + Flux (Alt)
React + Flux (Alt)
 
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
 
React JS - Parte 2
React JS - Parte 2React JS - Parte 2
React JS - Parte 2
 
React JS - Parte 1
React JS - Parte 1React JS - Parte 1
React JS - Parte 1
 
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
 
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
 
React Native - JSday
React Native - JSdayReact Native - JSday
React Native - JSday
 
Entendento Arquitetura MVI + Flow
Entendento Arquitetura MVI + FlowEntendento Arquitetura MVI + Flow
Entendento Arquitetura MVI + Flow
 
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
 
Javafx Gui
Javafx GuiJavafx Gui
Javafx Gui
 
Turbolinks
TurbolinksTurbolinks
Turbolinks
 
Javascript para CSharpers 2 - Functions
Javascript para CSharpers   2 - FunctionsJavascript para CSharpers   2 - Functions
Javascript para CSharpers 2 - Functions
 
Introdução ao Ruby on Rails
Introdução ao Ruby on RailsIntrodução ao Ruby on Rails
Introdução ao Ruby on Rails
 
Gems para colocar seus testes no trilho
Gems para colocar seus testes no trilho Gems para colocar seus testes no trilho
Gems para colocar seus testes no trilho
 
Ajax
AjaxAjax
Ajax
 
React - Compartilhando estado entre componentes
React - Compartilhando estado entre componentesReact - Compartilhando estado entre componentes
React - Compartilhando estado entre componentes
 
Armazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwaArmazenamentos offline-ap is-para-pwa
Armazenamentos offline-ap is-para-pwa
 

Similar to Typescript: the Fun Parts (BrazilJS 2017)

JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersHarlley Oliveira
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryHarlley Oliveira
 
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno RochaiMasters
 
aula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfaula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfBrunoTorres978388
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoCezinha Anjos
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáZarathon Maia
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no FrontendHenrique Gogó
 
Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Anderson Araújo
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o JavascriptMichel Ribeiro
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webHenrique Gogó
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsJulio Betta
 
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ânciaGiovanni Bassi
 
Produtividade com JavaServer Faces
Produtividade com JavaServer FacesProdutividade com JavaServer Faces
Produtividade com JavaServer FacesEduardo Bregaida
 

Similar to Typescript: the Fun Parts (BrazilJS 2017) (20)

Tutorial Dwr - Configuração e Uso
Tutorial Dwr - Configuração e UsoTutorial Dwr - Configuração e Uso
Tutorial Dwr - Configuração e Uso
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
JavaScript e JQuery para Webdesigners
JavaScript e JQuery para WebdesignersJavaScript e JQuery para Webdesigners
JavaScript e JQuery para Webdesigners
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
 
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
 
Boas Práticas em jQuery
Boas Práticas em jQueryBoas Práticas em jQuery
Boas Práticas em jQuery
 
aula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdfaula09-redux-firebase-auth.pdf
aula09-redux-firebase-auth.pdf
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Apresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc QuixadáApresentação Java Web Si Ufc Quixadá
Apresentação Java Web Si Ufc Quixadá
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
 
Tutorial Dwr - Combos Dependentes
Tutorial Dwr - Combos DependentesTutorial Dwr - Combos Dependentes
Tutorial Dwr - Combos Dependentes
 
Como escolher o Framework Java para web?
Como escolher o Framework Java para web?Como escolher o Framework Java para web?
Como escolher o Framework Java para web?
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
Backbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações webBackbone.js - A espinha dorsal de aplicações web
Backbone.js - A espinha dorsal de aplicações web
 
Introdução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on RailsIntrodução ao Desenvolvimento WEB com Ruby on Rails
Introdução ao Desenvolvimento WEB com Ruby on Rails
 
JPA - Java Persistence API
JPA - Java Persistence APIJPA - Java Persistence API
JPA - Java Persistence API
 
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
 
Produtividade com JavaServer Faces
Produtividade com JavaServer FacesProdutividade com JavaServer Faces
Produtividade com JavaServer Faces
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 

Typescript: the Fun Parts (BrazilJS 2017)