Resumo da Aula de TypeScript

Olá pessoal, estamos de volta com mais uma aula de TypeScript. O assunto dessa aula vai ser alguns pacotes do ex-seu editor de texto, no meu caso, o Atom, que irão facilitar o desenvolvimento do código de TypeScript. Então, tem vários editores de texto, por exemplo, o Atom, que é o que eu uso neste vídeo. Outros mais popular, que tem também, é o Visual Studio Code, talvez você conheça esse. É bem parecido com o Atom, né? Então, o exemplo que eu vou fazer aqui vai ser para o Atom, mas ele serve para outros editores de texto, como o Visual Studio Code. Neste caso, o Atom, a gente chama o negócio de pacote. O Visual Studio Code chama de extensão. Então, tem nomes diferentes, mas a mesma coisa. Então, nós vamos aprender a instalar uns pacotes aqui do Atom, e esse pacote irá facilitar o desenvolvimento de code de um TypeScript, mas como é que vai facilitar? Ele vai adicionar o Intel eSense para ele poder identificar as coisas no código. Você pode usar o mouse e deixar o cursor em cima de uma palavra do código, ele vai te dizer o que significa, por exemplo. Ou também você está digitando o código, aí você quer que você complete o código e que automaticamente você tem que digitar todo o nome da função, por exemplo. Ah, então é facilito o desenvolvimento. Então, vamos lá. Para começar aqui, eu estou no Atom, vou clicar em Preferências, e eu vou lá para Instalar o pacote, e vou buscar pelo nome do pacote. Então, para o TypeScript, primeiro você tem que ter Language TypeScript, Language traço TypeScript, que vai ser o mais básico que é o suporte da linguagem TypeScript. Nesse caso, segundo item aqui, eu já tenho instalado. Se você não tiver instalado, só clicar em Instalar. Eu já instalei, então já tenho. Certo, então primeiro pacote é pacote que vai ser de suporte da linguagem TypeScript, normalmente é Language TypeScript. Você pode buscar no seu editor de texto pelo pacote ou extensão TypeScript. Agora, o próximo que apareceu é o Atom traço TypeScript, que é o do próprio Atom aqui. Então, você vai clicar em Install. Nesse caso, é para o Atom, mas no seu editor de texto deve ter algo parecido. É só fazer um busco para o TypeScript e vai aparecer lá. Pronto, a gente está leio o Atom TypeScript. Esse Atom TypeScript depende também desse outro pacote chamado Atom traço IDE traço UI. Então aqui, eu vou instalar. Normalmente ele aparece na ilímpica dizendo, ah, isso vai depender desse pacote e tal. É porque eu já tinha instalado, antes eu desinstalei isso para te mostrar. E não apareceu, mas devia aparecer. Um pouco. Estalou. Pronto, agora vou fechar aqui. Agora vamos testar se deu tudo certo. Aqui na pasta src, eu só vou... Ah, nem preciso criar um arquivo. É só criar aqui do menu, vou abrir a janela. Uma aba de texto aqui, eu vou aqui embaixo mudar de texto plano para tipo TypeScript. Vamos ver se está funcionando mesmo. A extensão ou pacote, se eu dizer let, número... Eu declarei um variável aqui, número. Aí se eu pegar aqui, vamos ver. Ainda não está funcionando, talvez tem que salvar o arquivo. Deixa eu criar aqui do lado novo arquivo. Vou dizer o nome... Pacote. Tess. Só criar um arquivo aqui de exemplo, colar aquilo que a gente tinha, vou salvar. Então, funcionou. Ah, então o que aconteceu aqui? Se você ver, quando eu pego o ponteiro do mouse e deixo em cima da palavra, nesse caso o nome da variável, ele aparece essa coisa aqui. ToolTip que mostra que o número é do tipo number, que está correto. Então, por exemplo, outro exemplo é se você tiver um string, por exemplo, let, nome, c, Paulo. Você dá o hover aqui, ele fala que é string, mas se eu for lá e dar o console.log, ele fala também aqui dos argumentos ou parâmetros da função. Nesse caso a função log, ele já mostra que o primeiro argumento é message, que é do tipo n, e tem outros parâmetros. Então, vou digitar aqui o nome, e eu vou botar também ponto, len. Interessante, não apareceu o autocomplatar, mas ele aqui também mostra o que é seu len. E len retorna número e a descrição do propriedade, né? A propriedade do tipo número, na verdade, não é uma função, desculpa. A propriedade do tipo número, e tem a descrição da propriedade, retorna o comprimento de um objeto string. Salvar. Vamos fazer uma função aqui, function. Vamos experimentar mensagens string. Então, essa função vai tornar uma string, só que, por exemplo, vai pegar uma mensagem, na verdade, em vez de mensagem, põe nome mesmo. Vamos fazer o pôlar nome. Se eu chamar cumprimentar, por exemplo, o nome, que é o Paulo, por isso é qualquer nome, ele vai pegar isso, vai interpolar aqui, vai pegar, retornar mensagem, pôlar, João, nesse caso. O que vai acontecer aqui? Se note a função, se eu digitar aqui, ele aparece também, que ele requere o argumento nome, que é do tipo string, para essa chamada de função. Tá? Esse note aqui, é só o pôr o ponteiro do mouse nas coisas que ele mostra o significado. Ah, esse é um tipo de string, parâmetro da função, diz aqui parâmetro. Aí, descomplementar uma função, function, esse tipo de arte. Agora, coisa que também deve ter a autocompletação, não sei por que não tá funcionando bem aqui, mas eu vou fazer uma interface. É errado, né? Do outro lado. Até faço aqui, só pegar letre, oi, oi, oi, oi, do tipo exemplo, define um objeto, ele já mostra aqui o erro, né? Também outra coisa que é legal, ele mostra o erro, tá dizendo que esse tipo aqui, a gente passou, o objeto vazio agora, não tem as propriedades de nome e idade, né? Tá faltando. Então, outra coisa que ele ajuda, ele mostra o erro. E a gente pode consertar aqui, dizendo o nome, né? E ainda tá com erro, porque precisa da idade, agora tá dizendo que a idade está faltando, aí você põe a idade lá, vou botar o nome grande aí, ah, idade número grande. Então, o erro se foi, né? Tá bom? Então, essa é uma das coisas bem simples que ajuda com esta extensão ou pacote, o editor de texto, né? Mostra as coisas. Tá? Então, ajuda, mas só para finalizar, tome cuidado com essas coisas, porque às vezes a gente fica muito dependente dessas coisas e a gente acaba esquecendo como essas coisas funcionam, né? Então, eu recomendo que você primeiro aprenda como as coisas funcionam, sem ter que pedir ajuda todo o tempo. Primeiro, aprende na marra, né? Aprende sem aquela ajudinha. Aí depois, quando você já estiver avançado, já entendeu o que está acontecendo, aí você precisa de mais velocidade no seu desenvolvimento, aí é que você pede aquela ajuda do seu editor de texto, da sua IDE, né? Tá? Então, deixe você com isso. Muito obrigado por assistir e até a próxima.