Aula 19
Afirmação de Tipo no TypeScript (Type Assertion)
Summary
# Aula sobre Afirmação de Tipo no TypeScript
Nesta aula, aprendemos sobre afirmação de tipo no TypeScript e utilizamos o TypeScript Playground, uma ferramenta online que permite experimentar TypeScript no navegador.
## TypeScript Playground
- Acesse: [TypeScript Playground](http://www.typescriptlang.org/play)
- Diva duas áreas: à esquerda o código TypeScript e à direita o código transpilado para JavaScript.
## O que é Afirmação de Tipo?
A afirmação de tipo (Type Assertion) é usada para informar o compilador que temos certeza do que estamos fazendo no código, permitindo que possamos contornar avisos ou erros. Essa afirmação ocorre apenas durante a compilação, sem afetar a execução do script, diferentemente do casting, que ocorre em tempo de execução.
### Exemplo Prático
1. **Criando um Objeto Literal Vazio**:
```typescript
const o = {};
- Se tentarmos acessar uma propriedade que não existe, como
o.titulo
, o TypeScript exibe um erro.
-
Definindo uma Interface para o Livro:
interface Livro { titulo: string; }
Para fazer a afirmação de tipo, precisamos informar que o objeto deve seguir a interface:
const livro = {} as Livro; livro.titulo = "Título do Livro";
-
Alternativa com Chevrons: Pode-se usar a notação de chevrons, mas é recomendado usar
as
por causa de possíveis confusões com JSX:const livro = <Livro>{};
-
Afirmação de Tipo em Variáveis: Quando a tipagem não é clara, você pode afirmar um tipo:
let titulo: any; const length = (titulo as string).length;
Conclusão
A afirmação de tipo é uma ferramenta poderosa no TypeScript para garantir que o código funcione como esperado. Obrigado por assistir e até a próxima!
Video Transcript
Olá pessoal, nesta aula vamos aprender sobre afirmação de tipo no TypeScript.
Vamos também aprender aqui sobre TypeScript Playground.
É um site, um parte do site do TypeScript que nos permite fazer experimentos em TypeScript
aqui no próprio navegador, em vez de a gente fazer no nosso máquina e ter que compilar
e tal.
Então, eu vou fazer conteúdo nesta aula neste site aqui, se você for no seu navegador
www.typescript.lang.org.
Barra Play, se você for neste site é o Playground do TypeScript.
No lado esquerdo você pode digitar o código em TypeScript e do lado direito vai mostrar
o código transpilado para, neste caso, o S5 JavaScript.
Então vamos falar de afirmação de tipo no inglês Type Assertion.
Então o que é isso?
A afirmação de tipo é usada para nós dizermos para o compilador que nós sabemos que a
gente está fazendo no nosso código.
Por exemplo, se você tiver um código em que o TypeScript reclama, isso não está certo
não, algo está errado aqui, mas você tem certeza de que o negócio está certo, você
quer dizer para o TypeScript, eu sei o que eu estou fazendo, não precisa reclamar.
E afirmação de tipo não tem impacto na hora de execução do script, é só na hora
da compilação que ele usa esse negócio.
É meio diferente de casting, que é a conversão de tipos, normalmente casting vai na hora de
execução, mas a Type Assertion, afirmação de tipo, é na hora de compilação.
Então para demonstrar isso, vamos começar com um exemplo que vamos supor que nós temos
um objeto literal vazio e armazenamos esse objeto literal vazio em uma variável, eu
vou dar const o igual a esse objeto vazio literal.
Agora normalmente no JavaScript, se eu tentar adicionar uma propriedade, vamos fazer livro
aqui por exemplo, vamos supor que a gente tenha um objeto para escrever um livro, então
o livro tem o título, se eu disser livro.title, título livro, então se eu fizer essa maneira
aqui no JavaScript normal não tem problema, mas olha que tem essa linha vermelha, quando
você põe o mouse em que ele mostra o erro já no próprio navegador do TypeScript na
hora que você digita.
Então você pode ler aqui que a propriedade de título não existe no tipo objeto literal
vazio, então o TypeScript reclama disso, não vai deixar você ficar em paz.
No JavaScript normal isso é permitido, então um uso da afirmação de tipo é talvez se
você tivesse um código JavaScript que você quer portar para o TypeScript sem ter que mudar
muita coisa, então é uma dessas aplicações, mas tem outros também que às vezes tem
casos que você sabe que está fazendo, mas o TypeScript reclama.
Então vamos ver como a gente pode permitir o objeto aqui do livro ter essa propriedade
de título, você pode fazer o seguinte, define uma interface aqui, dessa maneira aqui, interface
do livro e adiciona título como uma stream.
Então dessa maneira aqui você queria o interface, agora a gente precisa dizer que esse livro,
esse objeto tem que ser interpretado como um objeto seguindo a interface do livro,
então você põe aqui depois do objeto você põe as livro, tá?
E ele vale permitir você adicionar o título ao livro.
Então o que aconteceu aqui, nós usamos o as seguido do nome aqui da coisa, nesse caso
que a gente quer que o TypeScript interprete, né?
Nesse caso eu vou até dizer no TypeScript que você quer que esse objeto vazio que
está amazando o livro, ele pode ser interpretado como seguindo a interface do livro, então
você pode adicionar o título porque é presente na interface.
Se eu tivesse adicionado o livro para o outro ano, por exemplo, em 1998, ele reclama propriedade
e não existe no tipo livro.
Então para consertar isso é só adicionar o ano na interface number, tá bom?
Se não tiver o as aqui, ele vai dar problema, não vai deixar, assim, vai reclamar.
Então as, livro.
Tá bom?
Outra maneira de escrever isso é você pôr o livro antes da coisa que você quer aqui
faça afirmação de tipo e põe dentro dessas chevrons, tá?
Essa era a maneira original de fazer afirmação do tipo, mas devido ao JSTX que veio do React,
tem problema de JSTX confundir com afirmação de tipo, então eles recomendam na documentação
usar mais o as em vez dos chevrons.
Tá bom?
Só para terminar, eu quero te dizer que você também pode usar o as dessa maneira aqui,
às vezes a gente usa assim.
Vamos supor que você tem o título do livro e você quer pegar, você tem uma variável
qualquer, mas essa variável tem tipo N.
Você não sabe o tipo do título se vai ser um as strings, vai ser um number, mas
você sabe que nesse caso, porque é um caso que a gente fez, não é muito útil, mas
a gente sabe que o título é uma variável que armazena um as strings, nós sabemos disso.
Então para poder afirmar isso e dizer o compilador, eita, eu tenho certeza que vai ser um string,
então você pode fazer afirmação de tipo, dessa maneira aqui, você pode dizer, se
você quiser obter o comprimento dessa string, você pode dizer título, normalmente é título.length,
mas se título você não soubesse realmente se seria um string, você pode dizer afirmar
o typescript, título as string, dessa maneira aqui, deixa eu pôr uma variável, length,
então ele armazena aqui, você está afirmando que o título tem que ser interpretado como
um as string, e nós sabemos que esse string tem o método length, ou a propriedade length,
propriedade length, então tem também, você pode pôr o as aqui dentro, não se esqueça
do parêntese aqui, antes da chamada, da, o acesso de uma propriedade ou chamada de
uma função, então você vai ver essa notação, pode ser que apareça algum dia para você.
Esse exemplo não é muito bom, mas o que importa é esse primeiro que a gente fez, você entender
o as aqui para poder modificar o objeto, por exemplo.
Então essa é a afirmação de tipo no enclave type assertion, no typescript.
Muito obrigado por assistir e até a próxima.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: