SlideShare uma empresa Scribd logo
1 de 12
Typescript 4.1
Hello!
Jonathan Sedrez
Frontend | ilegra
2
3
4.1
4
O que é
Typescript?
5
Javascript
linguagem de código aberto que
se baseia em JavaScript,
adicionando definições de tipo
estático.
Type-checking
Todo código JavaScript válido
também é código TypeScript.
Você pode obter erros de
verificação de tipo.
Gradual
Você pode ter uma aplicação
com Javascript e Typescript
simultaneamente
6
What's new?
7
Template Literal Types
Template literal types nos permitem modelar funções e APIs que esperam um conjunto de strings específicas.
type World = "world";
type Greeting = `hello ${World}`;
8
Agora é possível mapear objetos e especificar o type para cada key de um objeto.
TypeScript 4.1 permite que você mapeie novamente as chaves em tipos mapeados com uma nova cláusula as.
type Options = {
[K in "noImplicitAny" | "strictNullChecks" | "strictFunctionTypes"]?: boolean
};
// same as
// type Options = {
// noImplicitAny?: boolean,
// strictNullChecks?: boolean,
// strictFunctionTypes?: boolean
// };
Key Remapping in Mapped Types
9
Conditional types agora pode referenciar imediatamente ele mesmos e com seus types, deixando mais fácil a
criar aliases recursivos.
Por exemplo, se você quiser escrever um type pegando os elementos de um array, você pode fazer o
seguinte:
type ElementType<T> = T extends ReadonlyArray<infer U> ? ElementType<U> : T;
Function deepFlatten<T extends readonly unknown[]>(x: T): ElementType<T>[] {
Throw “not implemented”;
}
//Todos esses retornarão o type number[]:
deepDlatten([1, 2, 3]);
deepDlatten([[1], [2, 3]]);
Recursive Conditional Types
10
Nesse novo modo, todo acesso a um objeto (como foo.bar) ou acesso indexado (como foo ["bar"]) é
considerado potencialmente undefined.
Se precisar acessar essa propriedade, você terá que verificar primeiro a existência dela ou usar um operador
de asserção não nulo
// Verifica se a propriedade existe primeiro
if (opts.yadda) {
console.log(opts.yadda.toString());
}
// Basicamente esta dizendo: “Confia em mim, eu sei o que estou fazendo”
// quando se utiliza o operador “!”.
opts.yadda!.toString();
Checked Indexed Accesses
Breaking Changes
11
- Mudanças no lib.d.ts
- abstract nao pode mais ser marcado como async
- any/unknown São propagados em posições falsas
- resolve Parameters não são mais opcionais em Promises
Obrigado!
Duvidas?
12

Mais conteúdo relacionado

Mais procurados

(A15) LabMM3 - JavaScript - Objectos: String, Date e Math
(A15) LabMM3 - JavaScript - Objectos: String, Date e Math(A15) LabMM3 - JavaScript - Objectos: String, Date e Math
(A15) LabMM3 - JavaScript - Objectos: String, Date e Math
Carlos Santos
 
Java orientação a objetos (variaveis de instancia e metodos)
Java   orientação a objetos (variaveis de instancia e metodos)Java   orientação a objetos (variaveis de instancia e metodos)
Java orientação a objetos (variaveis de instancia e metodos)
Armando Daniel
 
Resumo tipo primitivo_java
Resumo tipo primitivo_javaResumo tipo primitivo_java
Resumo tipo primitivo_java
Marcos Souza
 
Desenvolvimento em .Net - Excepções
Desenvolvimento em .Net - ExcepçõesDesenvolvimento em .Net - Excepções
Desenvolvimento em .Net - Excepções
Vitor Silva
 
Linguagem de Programação - aula 04
Linguagem de Programação - aula 04Linguagem de Programação - aula 04
Linguagem de Programação - aula 04
Willian Carvalho
 
Curso Básico de Java - Aula 2
Curso Básico de Java - Aula 2Curso Básico de Java - Aula 2
Curso Básico de Java - Aula 2
PeslPinguim
 

Mais procurados (20)

(A15) LabMM3 - JavaScript - Objectos: String, Date e Math
(A15) LabMM3 - JavaScript - Objectos: String, Date e Math(A15) LabMM3 - JavaScript - Objectos: String, Date e Math
(A15) LabMM3 - JavaScript - Objectos: String, Date e Math
 
Ruby 3 e Análise estática - O que esperar e o que significa para o nosso código
Ruby 3 e Análise estática - O que esperar e o que significa para o nosso códigoRuby 3 e Análise estática - O que esperar e o que significa para o nosso código
Ruby 3 e Análise estática - O que esperar e o que significa para o nosso código
 
Python 3.+
Python 3.+Python 3.+
Python 3.+
 
[Ruby Summit Brasil 2020] Ruby 3 e Análise estática - O que esperar e o que s...
[Ruby Summit Brasil 2020] Ruby 3 e Análise estática - O que esperar e o que s...[Ruby Summit Brasil 2020] Ruby 3 e Análise estática - O que esperar e o que s...
[Ruby Summit Brasil 2020] Ruby 3 e Análise estática - O que esperar e o que s...
 
Javascript Recuperando Dados De Formularios
Javascript    Recuperando Dados De FormulariosJavascript    Recuperando Dados De Formularios
Javascript Recuperando Dados De Formularios
 
Apresentação 1 o que foi aprendido
Apresentação 1   o que foi aprendidoApresentação 1   o que foi aprendido
Apresentação 1 o que foi aprendido
 
STRUCTured Type Codes
STRUCTured Type CodesSTRUCTured Type Codes
STRUCTured Type Codes
 
Java orientação a objetos (variaveis de instancia e metodos)
Java   orientação a objetos (variaveis de instancia e metodos)Java   orientação a objetos (variaveis de instancia e metodos)
Java orientação a objetos (variaveis de instancia e metodos)
 
Spring Capitulo 06
Spring Capitulo 06Spring Capitulo 06
Spring Capitulo 06
 
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaNJavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
JavaScript - #Aula04 parte 06 - CamelCase, getElementByID, isNaN
 
Apostila de Introdução a POO com C#
Apostila de Introdução a POO com C#Apostila de Introdução a POO com C#
Apostila de Introdução a POO com C#
 
Introdução a Python
Introdução a PythonIntrodução a Python
Introdução a Python
 
JavaScript "for dummies"
JavaScript "for dummies"JavaScript "for dummies"
JavaScript "for dummies"
 
Resumo tipo primitivo_java
Resumo tipo primitivo_javaResumo tipo primitivo_java
Resumo tipo primitivo_java
 
Lp m1(parte4)
Lp m1(parte4)Lp m1(parte4)
Lp m1(parte4)
 
2 controle-de-fluxo
2 controle-de-fluxo2 controle-de-fluxo
2 controle-de-fluxo
 
Desenvolvimento em .Net - Excepções
Desenvolvimento em .Net - ExcepçõesDesenvolvimento em .Net - Excepções
Desenvolvimento em .Net - Excepções
 
Linguagem de Programação - aula 04
Linguagem de Programação - aula 04Linguagem de Programação - aula 04
Linguagem de Programação - aula 04
 
Curso Básico de Java - Aula 2
Curso Básico de Java - Aula 2Curso Básico de Java - Aula 2
Curso Básico de Java - Aula 2
 
Java script1
Java script1Java script1
Java script1
 

Semelhante a Typescript 4.1

T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)
Carlos Santos
 
Javascript para CSharpers 1 - Comparando
Javascript para CSharpers   1 - ComparandoJavascript para CSharpers   1 - Comparando
Javascript para CSharpers 1 - Comparando
Wesley Lemos
 
Testes Automatizados e o iOS
Testes Automatizados e o iOSTestes Automatizados e o iOS
Testes Automatizados e o iOS
Ricardo Valeriano
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
Wesley Lemos
 
98796699 selenium-framework
98796699 selenium-framework98796699 selenium-framework
98796699 selenium-framework
André Caldas
 
Curso java 04 - ap is e bibliotecas
Curso java   04 - ap is e bibliotecasCurso java   04 - ap is e bibliotecas
Curso java 04 - ap is e bibliotecas
Maurício Linhares
 
Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)
Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)
Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)
Adriano Teixeira de Souza
 
(A06) LabMM3 - JavaScript
(A06) LabMM3 - JavaScript(A06) LabMM3 - JavaScript
(A06) LabMM3 - JavaScript
Carlos Santos
 

Semelhante a Typescript 4.1 (20)

Java Desktop
Java DesktopJava Desktop
Java Desktop
 
T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)T04_LM3: Javascript (2013-2014)
T04_LM3: Javascript (2013-2014)
 
Javascript para CSharpers 1 - Comparando
Javascript para CSharpers   1 - ComparandoJavascript para CSharpers   1 - Comparando
Javascript para CSharpers 1 - Comparando
 
Python2.5.ppt
Python2.5.pptPython2.5.ppt
Python2.5.ppt
 
Desenvolvimento iOS - Aula 1
Desenvolvimento iOS - Aula 1Desenvolvimento iOS - Aula 1
Desenvolvimento iOS - Aula 1
 
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
 
Javascript avançado
Javascript avançadoJavascript avançado
Javascript avançado
 
Testes Automatizados e o iOS
Testes Automatizados e o iOSTestes Automatizados e o iOS
Testes Automatizados e o iOS
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Minicurso php
Minicurso phpMinicurso php
Minicurso php
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
 
Livro - código limpo caps (3,4) (clean code)
Livro - código limpo caps (3,4) (clean code)Livro - código limpo caps (3,4) (clean code)
Livro - código limpo caps (3,4) (clean code)
 
98796699 selenium-framework
98796699 selenium-framework98796699 selenium-framework
98796699 selenium-framework
 
Curso java 04 - ap is e bibliotecas
Curso java   04 - ap is e bibliotecasCurso java   04 - ap is e bibliotecas
Curso java 04 - ap is e bibliotecas
 
Teste unitário
Teste unitárioTeste unitário
Teste unitário
 
Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)
Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)
Estrutura de Dados em Java (Introdução à Programação Orientada a Objetos)
 
(A06) LabMM3 - JavaScript
(A06) LabMM3 - JavaScript(A06) LabMM3 - JavaScript
(A06) LabMM3 - JavaScript
 
05 poo-ii
05   poo-ii05   poo-ii
05 poo-ii
 

Mais de Jonathan de Britto Sedrez

Mais de Jonathan de Britto Sedrez (15)

Socket.io
Socket.ioSocket.io
Socket.io
 
RSocket
RSocketRSocket
RSocket
 
Rambda
RambdaRambda
Rambda
 
PWA
PWAPWA
PWA
 
OTA updates
OTA updatesOTA updates
OTA updates
 
OKRs
OKRsOKRs
OKRs
 
Jasmine
Jasmine Jasmine
Jasmine
 
Facebook flux
Facebook fluxFacebook flux
Facebook flux
 
Event bubbling
Event bubblingEvent bubbling
Event bubbling
 
EscmaScript
EscmaScriptEscmaScript
EscmaScript
 
Es2020
Es2020Es2020
Es2020
 
Enzyme js
Enzyme jsEnzyme js
Enzyme js
 
Cypress
CypressCypress
Cypress
 
Chart css
Chart cssChart css
Chart css
 
Bff patterns
Bff patternsBff patterns
Bff patterns
 

Typescript 4.1

  • 5. 5 Javascript linguagem de código aberto que se baseia em JavaScript, adicionando definições de tipo estático. Type-checking Todo código JavaScript válido também é código TypeScript. Você pode obter erros de verificação de tipo. Gradual Você pode ter uma aplicação com Javascript e Typescript simultaneamente
  • 7. 7 Template Literal Types Template literal types nos permitem modelar funções e APIs que esperam um conjunto de strings específicas. type World = "world"; type Greeting = `hello ${World}`;
  • 8. 8 Agora é possível mapear objetos e especificar o type para cada key de um objeto. TypeScript 4.1 permite que você mapeie novamente as chaves em tipos mapeados com uma nova cláusula as. type Options = { [K in "noImplicitAny" | "strictNullChecks" | "strictFunctionTypes"]?: boolean }; // same as // type Options = { // noImplicitAny?: boolean, // strictNullChecks?: boolean, // strictFunctionTypes?: boolean // }; Key Remapping in Mapped Types
  • 9. 9 Conditional types agora pode referenciar imediatamente ele mesmos e com seus types, deixando mais fácil a criar aliases recursivos. Por exemplo, se você quiser escrever um type pegando os elementos de um array, você pode fazer o seguinte: type ElementType<T> = T extends ReadonlyArray<infer U> ? ElementType<U> : T; Function deepFlatten<T extends readonly unknown[]>(x: T): ElementType<T>[] { Throw “not implemented”; } //Todos esses retornarão o type number[]: deepDlatten([1, 2, 3]); deepDlatten([[1], [2, 3]]); Recursive Conditional Types
  • 10. 10 Nesse novo modo, todo acesso a um objeto (como foo.bar) ou acesso indexado (como foo ["bar"]) é considerado potencialmente undefined. Se precisar acessar essa propriedade, você terá que verificar primeiro a existência dela ou usar um operador de asserção não nulo // Verifica se a propriedade existe primeiro if (opts.yadda) { console.log(opts.yadda.toString()); } // Basicamente esta dizendo: “Confia em mim, eu sei o que estou fazendo” // quando se utiliza o operador “!”. opts.yadda!.toString(); Checked Indexed Accesses
  • 11. Breaking Changes 11 - Mudanças no lib.d.ts - abstract nao pode mais ser marcado como async - any/unknown São propagados em posições falsas - resolve Parameters não são mais opcionais em Promises