TypeScript em 15 minutos - 2021 (direto ao ponto!)

Olá, tudo bem? No vídeo de hoje eu vou lhe dar uma introdução rápida, clara e objetiva de o que é e como utilizar TypeScript envolvendo os conceitos mais básicos de tipagem e transpilação, em apenas 15 minutos. Se gostou do vídeo, deixe o seu like e se inscreva no canal para me dar uma força. Para mais conteúdos, visite os links abaixo:

– Meu curso: – Meu curso: http://184.73.67.74/curso-fullstack?utm_source=youtube&utm_medium=link&utm_campaign=curso-fullstack&utm_content=ts15

– Transcript do vídeo e fontes: http://184.73.67.74/post/como-usar-typescript-com-node-js/

– Meus livros: – Meus livros: http://184.73.67.74/meus-livros?utm_source=youtube&utm_medium=link&utm_campaign=livros&utm_content=ts15

Um abraço e sucesso.

Prof. Luiz

—

o Olá tudo bem até o Luiz e o vídeo de
hoje é sobre typescript eu quero lhe dar
uma introdução clicar o que que é como
funciona para que que serve se você
nunca viu nada sobre tá descript ou
civil e não entendeu não conseguiu fazer
funcionar esse vídeo de hoje é para você
ir
é o primeiro passo é garantir que a
gente tem o ambiente necessário para
programar utilizando techstreet primeiro
requisito é ter um novo JS instalado na
sua máquina você acessa noite atrás. Org
baixa a versão LTS os seus um
profissional e avança do início ao fim
uma vez finalizar essa etapa Você vai no
seu terminal diante comando junto
comando Novo Espaço menos ver você vai
ter a versão do novo falar nossa marca
é o próximo passo é instalar o
typescript na sua máquina como é que a
gente fazer isso primeiro você vai ter
que ter permissão de administrador no
seu terminal de leite comandos gostaram
hinos da lá botão direito executará como
administrador no Linux e no Mac você vai
dar um surdo e aí o comando que é igual
no Linux e no Windows npm instal – G1
npn agenciador de pacote node install
para instalar um pacote – G para
instalar de maneira global no seu
computador typescript só que Ao bater no
repositório de pacotes noite vai baixar
e instalar o que é diferente na tomar
conta dos cabelos o lado nós temos
acesso utilitário de linha de comando
chamado tsc ela tá escrito de comprar né
se eu vou dar aqui até 6 passo menos ver
eu voltei a versão de tarde skript
atualmente instalado na máquina se eu
instalei ela com sucesso e de uma era
Global anteriormente é a partir desse
TCC que eu vou poder fazer uso do
typescript a gente poderia aqui fazer
todos os testes no bloco de notas mas eu
vou usar
e se você ainda não tem baixe em qual de
pontos altos. Com o visual Studio code
editor de código de outra forma e
gratuito você baixa o seu tempo nacional
e apenas instala avançando até o final
do assistente de instalação com ele só a
nossa máquina você vai ter uma interface
parecida com esta que
e crie uma pasta typescript para você
colocar os exemplos esse vídeo dentro
o seu serve para tudo pode na opção Open
Folder
a procura essa pasta na sua máquina
clica nela Abrir é uma pasta vazia mesmo
a primeira coisa que você tem que saber
sobre tá script é que ele usa a
extensão. TS ao invés de ponto parece
que é normal do nojo Então escreve aqui
o arquivo
o Teste. TS certo e aqui dentro eu posso
colocar um código JavaScript qualquer
É sim o typescript aceita sem por cento
da sintaxe do jscript porque ele é
construído em cima do Jardim senti o
typescript é um super 7 é um conjunto
adicional de instruções e porque não
dizer de poderes para usar o script às
vezes por aqui algumas coisas bem
básicas nesse vídeo porque ele é bem
introdutório e ao longo da minha
formação foi steck dia iaci completa daí
a gente usa tá distrito de pra caramba
ao mesmo tempo a gente constrói uma
aplicação real Mas beleza escrever em um
console logo super tradicional não tem
nem o dinheiro de comando Navegue até a
pasta onde faz seus exemplos descritos
no meu caso tá aqui ó essa torta
diferente talvez você tem ouvido falar
que o pai escrito tiram transpilador ele
transforma assim táxi dele em Jaru
escrito tranquila em breve Street Então
como é que a gente faz a transpiração a
gente roda do comando tsc seguido do
arquivo que a gente quer transpilar Fast
confesso Beleza o que que aconteceu aqui
ó ele ver ou para
é uma pasta um arquivo Teste. JS quer
versão de Java escript deste arquivo
typescript então no final das contas
gente typescript é para tempo de
desenvolvimento é durante a programação
a construção de sistema introdução a
gente não roda typescript a gente
transpira todo o projeto techstreet em
um projeto java script e utiliza ele
produção porque todo esse trabalho
porque a gente não fazem já descritos ó
Então porque vocês vão ver eu vou
mostrar que algumas novidades sabe
script e elas te dão um pouco mais de
segurança na hora de programar segurança
no que tange confiança do que o que você
está fazendo Está correto e não vai
quebrar em produção depois
principalmente o recurso de Type checker
né que a tipagem que é o que eu mostrar
para você aqui ela tanto ajuda
dissolvedor a programar corretamente
como evita que seja colocado em produção
algo quebrado ao que não está
funcionando por causa de erro de
digitação ou uso indevido de funções
que atire a primeira pedra quem nunca se
deparou com algum problema e um projeto
java script só quando executou o projeto
não conseguiu achar esse problema com
tava programando por exemplo isso porque
eu já escrevi tradicional ele é
interpretado Então quando você passa por
uma linha de código para um problema em
execução é que você vê o problema
acontecendo conta descrente não quando a
gente for dar um teste cê teste acontece
se tiver algum problema ele já vai
acusar ali mas a gente subir essa versão
grande scripts compilada para a produção
voltando aqui próximo do Cold temos aqui
o teste e jsps bom mas a graça é a gente
utilizar os poderes está escrito certo e
o primeiro poder é a tipagem coisa vocês
normal nós não temos ou na verdade nós
temos Nazaré dinâmica
e vamos criar aqui uma function somar
por exemplo
e ela espera num não dói e daí ela vai
imprimir no console num mas não dói
E aí que eu vou chamar ela aqui embaixo
e para nessa situação primeira coisa
aconteceu chamei um somar sem passar
parâmetros ele já tá me xingando aqui ó
tão esperado dois argumentos Mas você
fornecer 10 se eu fizer a mesma coisa no
arquivo JavaScript é para que ele não me
dá erro
a receita esse tipo de coisa
e é isso quer dizer que a gente faz mais
confiança ele não vai deixar eu compilar
esse aqui no TS aqui porque ele tá com
erro quando eu ver aqui ó peço você ter
assistência ele não deixa porque eu
tenho um erro tá faltando o argumento
então se eu passar 1 e 2 daí ele para
com erro para eu ver aqui Beleza Trans
pillow se eu voltava Studio code na hora
que ele me geram sjs idêntico que eu não
usei nada muito específico tava script
apenas mostrei pra você ele não deixa
você compre lá né para cada inscrito se
tiver erros de programação se esta minha
função ela espera algum tipo específico
de dado por exemplo são a soma Ela tem
que esperar numérico certo neste caso eu
posso depois do nome do argumento
colocar: e o tipo de dado que eu espero
nesse argumento mesma coisa no segundo
argumento o por exemplo tipo de dado
number
e assim eu posso passar esse uma e dois
aqui é porque são dois Number Beleza
você funciona se eu voltar a criação de
Cold repara que meu test.js ele não tem
aqueles numbers ela porque na hora da
transpiração e tá discutir vai remover o
que é específico Tá difícil deixar só
javscript certo
o ma se por exemplo eu quiser passar um
texto e o número e eu for tentar
compilar novamente ele me xinga um
argumento do tipo string né Não pode ser
associado ao parâmetro do tipo Number
então isso aqui o Parque Chácara que a
gente fala aqui ele tá me xingando ela
consonaro porque tá repetida em relação
ao test.js tá você tá me xingando
inclusive se eu apagar as TJS aqui ou
salvar Nossa já vai começar me xingar lá
que ele vai entender que é só que eu vou
somar aqui de cima que eu tô utilizando
e ainda vai me xingar Olha esse
argumento aquele tipo string que não é
associada já mexendo tempo de
desenvolvimento não precisa nem rodar o
teste ser beleza Outro ponto assim como
eu associe os tipos aos parâmetros eu
posso associar o tipo de retorno essa
função se eu posso colocar que depois
dos parentes dos argumentos: e o tipo de
retorno da função pode ser Number string
and void eu vou colocar aqui ó num mais
função mais tarde ou seja neste mesmo
módulo ou em outro módulo eu tenho aqui
A somar ele tá aqui essa altura dois
números e devolve um número tô nota aqui
o meu código quando eu tô programando
vou utilizar um código tá discreet ele
fica muito mais fácil de ler fica mais
fácil de entender o que que é esperado
dele e o que que é o retorno dessa
função
eu vou colocar aqui um e dois só que vai
me tornar o número
o que eu vou imprimir no conselho eu vou
estar lá no console mandar compilar o
teste seu olhar com o teste aparece ó
mesma coisa de sempre eles tome com a
causa de páginas que a gente adicionou
para acabar com esse problema aí tem que
ficar limpando o teste JS e até para ele
não ficar poluindo um projeto mas não
projeto com dezenas de arquivos
typescript vai ficar toda hora
compilando os elementos aqui do lado do
elemento original você é muito chato
certo para resolver isso a gente pode
adicionar uma série de configurações até
descriptive definir como ele se comporta
e dentre algumas alguns comportamentos
aonde é que ele vai gerar o realista
mostrando pelado
e como é que a gente cria é um arquivo
de configuração para um projeto
typescript a gente vai na pasta do
projeto que roda tsc fácil menos menos
rinite criou não é um arquivo teste
conflito.de Zone com sucesso
eu vou lá no nosso projeto tá Que hora
que nós configuração do tá discreet
entre outras coisas eu posso dizer por
exemplo é que eu vou compilar para essas
seis por exemplo eu posso dizer que o
alt dir weh passa de comentar aqui ó out
dinheiro vai ser uma pasta dist Então
vai criar um quando eu comprei lá e
acaba pastinha discutir vai jogar as
coisas lá dentro e depois tem uma série
de outras configurações aqui embaixo que
não vem ao caso agora a gente fala dela
a gente vai pagar isso aqui será que
acontece JS aqui agora ao invés de rodar
até sei o nome do arquivo vou rodar
apenas até ser ele vai olhar nos pés
config. Disso nós aquelas configurações
vai sair procuramos aqui no CS no
projeto e vai gerar todos eles invenção
JS na pasta nisso eu olhar aqui nosso
projeto depois aqui ó passa disso com o
teste o teste dela Pode parecer simples
mas dá uma trabalheira fazer vídeos como
esse se você está gostando tá prendendo
alguma coisa comigo aqui deixe seu like
e se inscreve no canal para certificar
nos próximos vídeos que me ajuda
bastante aqui no YouTube Mas voltando
aqui
e o outro ponto que acho Vale fazer para
você nesta nossa missão está escrito é
que eu posso declarar variáveis e já
definiu o tipo delas logo a declaração
certo sendo assim Futuramente você
tentar adicionar um tipo errado o
próprio vs code tá entendendo que eu tô
arquivo está escrito que ele já vai me
avisar olha só tá fazendo besteira a
nome é do tipo string ele não pode ser
associado a um tipo Number não pode
receber um Number dentro certo então
isso aqui é bem útil isso vale também
para rei né então se eu tiver por
exemplo um let Array eu posso definir o
tipo dele eu posso fazer por exemplo com
um Number Array ou se eu for tentar
fazer um peixe certo de um primeiro que
ele me xinga aqui ó que eu estou usando
a variável Array antes de inicializar
ela a outra coisa diferente fase então
eu vou utilizar ela aqui ó
e agora o olho aceita agora você tem tá
adicionar uma estrela dentro dele ele já
me xinga novamente se eu queria ignorar
o puxão de orelha e tentar compilar
acontecer ele não vai deixar então é
isso que eu tava me referindo quando eu
falo de segurança de mais confiança
provedor e o que que ele tá fazendo Tá
correto que é muito fácil quando está
programando um script cometer esse tipo
de deslize e usar uma variável que não
foi realizada de passar um tipo errado
com uma função e passar o tipo errado
com uma variável de outro tipo E mesmo
quando eu faço intencionalmente e isso é
uma má prática é abusar da tipagem
dinâmica do JavaScript é uma má prática
de programação torna o código menos
legível e consequentemente mais propenso
a erros por causa desse tipo de
característica que tá distrito de
vencendo cada vez mais utilizado
principalmente em projetos envolvendo
várias pessoas e consequentemente
projetos grandes se vale a pena os a
typescript se você tá trabalhando
sozinho
é um sim não vale um pouco para você
praticar e tá preparado para projetos
maiores mas ao mesmo tempo vai demorar
um pouco a sua velocidade que você vai
ter que escrever um pouco mais preocupar
com tipagem coisa do tipo assim tem
alguma coisa aí você é pesar os prós e
os pontos e o último. Já que tá acabando
nosso tempo aqui e esse é parece um
vídeo curta objetivo eu vou criar uma
outro módulo que vai ser aqui funções
confesse eu vou jogar essa nossa soma
para lá certo e o cês vão tá descript eu
posso usar uma sintaxe mais moderna do
reality sem correr o risco de não ser
interpretada por uma versão específica
do node por exemplo ou se for utilizar
no navegador anos interpretado pelo
navegador específico Então tá discutiu
permite que eu use uma sintaxe mais
moderna e depois de tranquila umas um
táxi com a compatibilidade então por
exemplo em vez de usar o molde o ponto
forte eu posso usar o EcoSport de fou
um objeto com as funções eu quero
exportar
o transporte de fogo essa daqui para
dizer qual é o objeto padrão que vai ser
exportado Quando eu fizer a importação
deste modo
e já que eu tô utilizando os ataques
mais rodar de gastrite ao invés da Rico
Aires eu posso importar aquele modo
utilizando o impacto Então posso colocar
aqui em pote funções from
funções./Funções né E aí aqui onde eu
chamava o somar posso chamar funções.
Tomar normalmente Beleza então eu tava
tendo tudo no olho arquivos eu posso sim
modularizado a mesma maneira que eu já
faço o mesmo script E além disso eu
posso trabalhar os módulos com assim
táxi mais moderna do Java script se eu
for agora o terminal vou dar um terceiro
pela última vez
e compilou tudo certinho
o seu olhar agora disse que tá com dois
aquivos artrite
se preparem quartel funções agora hein
tem uma série de características
diferentes e também a comissão Nei
enquanto tá escrito tem uma sintaxe mais
moderna e já me inscrever e tranquila
umas um táxi com maior compatibilidade
com menos chance lá problema
O que é que o caso aparece a mesma forma
também foi transpilado colocar os
clientes com maior compatibilidade Tá
mas eles são transpilado a gente não
mexe não corrige não atualiza você
trabalha Santa decrypt compila para
discutir o Galo Street introdução você
rodar essa disse aqui
a produção você fazer alguma coisa do
tipo node./Disso/teste certo né rodou o
projeto java script eu sei essa falei
são Mega introdutória mas se você quer
aprender mais sobre typescript eu vou
dar três opções a primeira opção me
ajuda a fazer esse vídeo bombar comenta
embaixo que você quer mais ações
atitudes como essa curte o vídeo se
inscreve no canal e se possível
compartilha também em grupos Facebook
WhatsApp onde você tem amigos derf
sucesso desse vídeo vai me indicar seu
devo ou não gravar mais conteúdo sobre
tá escrito aqui no canal opção número
dois na descrição do vídeo tem um link
de uma série de artigos no meu blog
sobre está escrito há outra maneira de
você aprender sobre a tecnologia
a opção número 3 a mais completa e mais
poderosa dá uma olhada também a
descrição que tem o link da minha
formação completa em um web full Tech
Jesus Cristo onde eu te ensino a
construção junto consultor Daniel Castro
de back-end e front-end de bancos de
dados publicação a nuvem tudo em cima da
estética completa dos olhos críticos
muita caloria legal Monte consegui bem
bacana tem certeza que podem ver que ser
muito a sua formação seu currículo Tá
bom então um abraço e até a próxima
valeu Um