Transcrições
1. Introdução: Você já deve ter ouvido falar
disso, mas sabe por que e como usar o texto datilografado
em vez do Javascript Typescript é um superconjunto de
Javascript de tipos
seguros que permite todos
os mesmos recursos e capacidades do
Javascript,
evitando que
erros descuidados sejam em seu
aplicativo web Hoje, veremos tudo o você precisa saber para aprender
e usar o texto datilografado Oi, meu nome é Zoe. Sou engenheiro de software
e ex-professor que adora ajudar outras pessoas a
começar a programar Eu criei muitos
sites e aplicativos web usando React CSS, HTML e muito mais. Hoje, abordaremos
o Typescript e como
você pode usá-lo para melhorar substancialmente seu tempo
e experiência de desenvolvimento e experiência Para fazer isso, criaremos
esse projeto em texto datilografado. Falaremos sobre quais tipos são, como usá-los e
por que são úteis. Em seguida, mergulharemos
diretamente em nosso tutorial. O tutorial será
dividido em três partes. Primeiro, inicializaremos nosso
novo projeto Typescript. Em seguida, vamos colocá-lo em
funcionamento em nossos navegadores. E, finalmente, criaremos nosso
site usando o Typescript. Este curso é para qualquer pessoa interessada em
aprender texto datilografado, embora ter uma
compreensão geral de Javascript seja essencial se você
precisar aprender Javascript Tenho uma aula completa no
link abaixo No entanto, se você
já está familiarizado com o Javascript e
precisa apenas atualizá-lo, incluí algumas
lições aqui para garantir que estamos
todos na mesma página. Ao final deste curso,
você deverá ser capaz de criar um aplicativo web totalmente digitado para si mesmo. Vamos começar.
2. PROJETO DO CURSO : Projeto de classe. Nosso
projeto para esta aula será criar um aplicativo
web simples usando texto datilografado Para esta aula,
será essencial ter acesso
a um
computador onde você
possa executar o código do Visual Studio ou outro editor
de código de sua escolha. Você também vai querer ter um
navegador como o Google Chrome instalado
e funcionando ,
pois o usaremos para exibir nossa página da web. Finalmente, ter uma compreensão
geral do Javascript será essencial. Se você está familiarizado
com o Javascript, só
precisamos de uma atualização. Não se preocupe, eu incluí isso nas
próximas aulas. Deixarei todos os links
para quaisquer ativos e recursos de que você
precisará na guia Projeto e recursos abaixo.
3. Introdução ao JavaScript: Introdução ao Javascript. dois lugares onde
o Javascript pode ser escrito em arquivos HTML ou em seu próprio arquivo
Javascript dedicado. Se quisermos escrever
Javascript em um arquivo HTML, basta adicionar a tag de script à
seção principal do documento. Essa tag de script é reservada
para qualquer linguagem de script, que são linguagens com as quais você
pode executar comandos e é onde nosso Javascript
poderia teoricamente residir Tudo o que você escrever entre
essas tags será compilado e interpretado
como Javascript. Embora isso seja bom para aplicativos
muito pequenos, isso pode ficar um pouco
mais complicado quando
começarmos a criar sites cada vez mais complexos. Nesse caso, podemos usar o segundo lugar em que o
Javascript pode ser escrito em seu próprio arquivo e apenas utilizar a
tag de script como referência. Criaremos aplicativos de
arquivo Javascript separados e conectaremos os dois. E pronto, adicionamos
Javascript ao nosso projeto. Vamos mergulhar nos
meandros do
Javascript e das linguagens de programação em geral.
4. JavaScript e outras linguagens de programação: Javascript e outras
linguagens de programação. Como já discutimos, o Javascript é uma
linguagem de script que
permite introduzir lógica e funcionalidade em suas páginas da web Mas como ele faz isso? Como também mencionamos, o Javascript é uma linguagem
de programação. Há várias
coisas que a maioria, se não todas, as
linguagens de programação têm em comum. Assim como outros tipos de linguagens baseadas em
computador, as linguagens de
programação estão
em sua forma mais simples, apenas uma forma de nós humanos
falarmos com o computador. Javascript, em particular, nos
permite, como programadores, interagir com o
navegador da Web por meio do Dom ou do Document Object Model O Dom é a interface de
programação para documentos da web e atua como uma representação
dessa página para que ela
possa ser interagida,
atualizada e modificada com base na entrada e interação do usuário Javascript, em particular, é a linguagem que usamos
para interagir com o Dom, e 98% de todos os sites usam Javascript no lado
do cliente Todas as linguagens de programação também têm sua própria sintaxe exclusiva Assim como em outros idiomas,
como inglês e francês, há uma sintaxe que define e explica as maneiras pelas quais as palavras se juntam para formar frases, parágrafos,
etc Linguagens
de programação da mesma forma, cada uma tem sua própria
sintaxe para determinar o que constitui uma linha
completa de código Por exemplo,
todas as linguagens de
programação têm seu
próprio caso e propósito. Você já deve ter ouvido falar
de outras
linguagens de programação , como Python, Ruby, Java e Dependendo dos tipos de
aplicativos que eles
desejam criar, uma dessas
linguagens de programação pode ser mais adequada para
a tarefa do que outras, pois o objetivo deste
curso é aprender a interagir e criar
aplicativos para a web. A melhor linguagem de programação
que podemos aprender é Javascript
ou, nesse caso, Typescript.
Vamos mergulhar nisso.
5. O que é o TypeScript?: O que é texto datilografado? O texto datilografado é simplesmente um
superconjunto de Javascript. Isso significa que ele tem todos
os mesmos recursos do Javascript, com alguns recursos
adicionais que beneficiam o desenvolvedor. Um dos principais recursos
do Typescript é usar tipos, que garantem que
o valor que está sendo acessado seja
do tipo correto Mas vamos recuar.
O que são tipos?
6. Tipos: Tipos. Há
muitos tipos diferentes acessíveis em texto datilografado Então, vamos começar falando sobre os mais comuns que você provavelmente encontrará no
seu dia a dia de trabalho. Alguns desses tipos comuns você já deve estar familiarizado do Javascript, como número de
string e booleano Uma string é qualquer valor que possa ser colocado e lido
entre aspas. Um número é um valor
numérico regular, como 1234,
etc., e um booleano pode ser
um de dois valores, Existem também matrizes que,
assim como em Javascript, são listas ordenadas que podem
conter vários tipos de dados No entanto, o script de tipo tem um tipo
especial chamado any. Qualquer um é um tipo que pode ser usado quando você
não quer
digitar um valor específico ou ainda
não tem certeza de
qual tipo usar. No segundo caso, você também
pode usar Unknown, mas qualquer um funcionará bem por enquanto.
7. Erros: Erros que você pode encontrar. Ao começar a usar o Typescript, você começará a ver muito
mais erros no início Mas isso é
bom porque o ajudará a aprender
muito mais rápido. script de tipo não apenas gera erros para tipos incompatíveis, mas também gera erros para uma variedade de cenários
que você deseja evitar Como quando você chama uma função, mas esquece de
fornecer todos os argumentos necessários
em Javascript, um erro como esse
seria considerado um erro incorreto que
passa No entanto, isso é algo
que você não quer porque, se esses argumentos adicionais
nessa função forem essenciais, sua função provavelmente
não funcionará conforme o esperado. Mas isso é suficiente para escrever um roteiro
teórico, vamos começar a
escrevê-lo por nós mesmos.
8. Como instalar o TypeScript: Tudo bem, então, para
começar com o script de tipos, podemos fazer isso de duas maneiras. Podemos instalar o compilador de texto
datilografado e trabalhar em apenas um arquivo
datilografado simples, ou podemos incorporá-lo ao
nosso conjunto de aplicativos create Vou seguir
o caminho da escada, mas mostrarei como
instalá-lo rapidamente em seu computador
globalmente, se você quiser Portanto, se você quiser instalar um texto datilografado globalmente,
é muito fácil Você só precisa
instalar o compilador. datilografado, como você mencionou, é um superconjunto Mas o navegador
na verdade não lê texto datilografado, ele só lê Javascript A maneira como podemos
usar o Typescript
no navegador é
compilá-lo novamente para Você se lembrará desse processo de compilação de uma
linguagem para outra, partir de CSS e CSS O Scss foi compilado em CSS. O mesmo vale para
Typescript e Javascript. Se você quiser usar o Typescript globalmente
em seu computador, tudo o que você precisa
fazer é instalá-lo Instale o compilador Typescript. Então você usa o NPM I, e é para o global E então você
digitaria Typescript. E depois de fazer
isso, você teria instalado o compilador de texto datilografado globalmente e ele deveria funcionar
no seu Depois de fazer isso,
você apenas verificou se havia feito
isso corretamente. Tscv e eu já fizemos isso, então ela vem com a versão 4.2 0.8. Depois de
instalar o Typescript globalmente, agora
podemos criar
um projeto de reação
9. TypeScript e React: O que vou fazer é copiar uma linha de código que tenho aqui,
que basicamente diz
que vou
criar um aplicativo de reação e
vamos chamá-lo de script de
aprendizado de tipo. Ele vai usar
essa
bandeira muito especial aqui chamada modelo. Talvez tenhamos visto isso
uma ou duas vezes antes. O modelo, desta vez em
vez de vermelho, será datilografado, então ele nos fornecerá
um modelo
de script de tipo para que não precisemos nos preocupar tentar descobrir como configurar o aplicativo corretamente
usando o Vamos executar isso e, quando estiver pronto, começaremos. Tudo bem, então temos
nossa
pasta de script de tipo aprendido pronta para uso. Então, vamos começar com o
NPM e dar uma olhada no que
temos no navegador Então, como você pode ver
aqui, é praticamente o mesmo aplicativo, exceto por
uma diferença fundamental. Dizia editar o aplicativo de origem TSX em vez de JSX para salvar e recarregar.
Praticamente isso. Essa é a única
diferença que temos aqui com nosso script de tipos. Então, o que vamos fazer agora
é entrar em nossa pasta pública. Dizemos que
tudo é o mesmo. Vamos entrar em nossa pasta de origem e conferir o que está
acontecendo aqui. Como você pode ver, temos alguns arquivos diferentes
nessas duas pastas. Em nosso
diretório maior,
no aplicativo e em
nossa pasta de origem. Vamos conferir esse arquivo
de configuração TS. Portanto, este é um novo arquivo que não
tínhamos da última vez. Esse arquivo basicamente informa ao compilador de script de tipo como queremos que ele
compile o código Portanto, existem
diferentes versões do Javascript atualmente
disponíveis na web. Agora, quando estamos compilando o script
de tipo para Javascript, queremos basicamente
compilá-lo para
a versão mais antiga que
ainda seja perfeitamente Porque queremos garantir
que seja o mais compatível
possível com o maior número possível de
máquinas. Se o compilarmos apenas para
a versão mais recente
do Javascript, algumas máquinas mais antigas
podem não ter acesso
a muitas das funcionalidades
que ele implementa E então tornaríamos nossos
sites mais inacessíveis. Então, neste caso, nós o
compilamos para ES five, que é uma
versão um pouco mais antiga do Java script. Acho que Ron tem sete
ou oito anos agora. E depois, há algumas outras opções que
você notará. Tudo isso também está no objeto
Jon Json. Ele diz que permitirá que
você coloque Javascript porque todos os arquivos Javascript
são arquivos datilografados válidos Portanto, você pode realmente
escrever Javascript em um projeto datilografado pode
não fazer muito sentido, mas você pode fazer isso se quiser E então é rigoroso? Portanto, ele vai impor uma verificação
estrita de tipos. Você pode ou quando estiver aprendendo, talvez
queira deixar isso ligado. Mas isso pode ou não criar algumas regras difíceis
posteriormente em seu projeto. Depende do que
funciona para você e , em seguida, de alguns outros valores que eles meio que
inserem automaticamente para nós. À medida que trabalhamos com script de tipo. Cada vez mais
veremos quando e quando
não precisaremos interagir
com esses arquivos. Mas, por enquanto, vamos
deixar como está. Em seguida,
vamos entrar em nosso arquivo TSX e
nosso arquivo TSX de índice e ver
o que eles têm O arquivo de índice TSS, arquivo TSX, parece
praticamente o mesmo Não há nada realmente diferente
lá. Quando
acessamos nosso arquivo TSX, é
praticamente a mesma
coisa, para ser honesto E como você já pode ver, Typescript e Javascript são
praticamente a mesma Não há muita coisa que
seja muito diferente, mas há algumas peças-chave que farão alguma diferença. Vamos criar um pequeno aplicativo
para trabalhar com eles. Então, criei
um componente chamado Counter, assim como nosso contador anterior. Esse contador pode
fazer coisas como contar até um
ou fazer uma contagem regressiva. No momento, ele não
faz nada, é apenas um componente vazio. Mas vamos tentar passar alguns adereços para que possamos adicionar
algumas funcionalidades a ele Então, o que vamos
fazer em nosso aplicativo, vamos criar algumas
variáveis aqui. Digamos título e
daremos ao título, um valor do meu contador. Então, esse pode ser o
título do nosso contador. Diremos o texto do botão const e poderíamos dizer que isso
pode ser mais um Então, vamos dar a ele algumas variáveis
básicas básicas. Tudo isso é apenas para mostrar
como o script de tipo funciona. Veremos que isso está nos dando
um pequeno sublinhado amarelo , o que acontecia antes Como as variáveis
foram declaradas, mas
não são vermelhas, elas ainda não foram usadas. Não
se preocupe, chegaremos a isso. O que faremos agora é
passá-los para o balcão. Diremos que título é igual a
título e botão. É igual ao texto do botão. Legal, ainda estamos recebendo
esse erro porque, mas agora é na verdade
um erro de tipo. Portanto, diz que o tipo de título da string e o
tipo string do texto
do
botão não ao
atributo
intrínseco do tipo O título da propriedade não existe
em atributos intrínsecos. Então, o que isso
significa? Então, basicamente, datilografado permite essa
coisa muito especial chamada E digitar nos permite
ter certeza de que os valores que passamos são
de um determinado tipo, certo? Estamos, você sabe, em um título em que queremos que seja texto,
queremos que seja uma string. Não estamos passando um
objeto, por exemplo, estamos apenas passando uma string. Portanto, o script de tipo nos permite
verificar isso antes de
realmente chegarmos ao estágio de
compilação e perceber que nosso aplicativo
está quebrado sem motivo Então, se formos ao nosso contador, podemos realmente trazer essas variáveis, como
fizemos antes título e o texto
do botão,
e podemos salvá-las. Mas estamos recebendo
alguns erros aqui. Então, estamos fazendo com que todos os
elementos destruidores não sejam usados. O título do elemento de vinculação tem
implicitamente qualquer tipo. Tudo bem, então estamos
recebendo dois erros. Estamos recebendo um erro porque
ainda não os usamos. Tudo bem. Mas também estamos recebendo o segundo erro que não
vimos antes. O título do elemento de vinculação tem
implicitamente qualquer tipo. Agora, os
tipos e o texto datilografado são
iguais aos diferentes tipos de dados sobre os quais
falamos Temos um objeto
numérico booleano de string, mas há uma coisa no script
de tipo chamada an e na verdade
não é um bom tipo Qualquer um está literalmente dizendo que
isso pode ser de qualquer tipo e isso anula o
propósito de usar o script de tipo Se você tentar digitar
algo com o tipo de qualquer um, na verdade
ocorrerá um erro. Portanto, há algumas
maneiras de contornar esse erro. Tudo bem, da maneira como vamos contornar
esses erros primeiro, vamos
implementá-los em nosso projeto. Então, vamos colocar um H
e dar um título a ele. Nós lhe daremos a propriedade
de qualquer título. Vamos salvar isso e, em seguida,
criaremos um botão. Daremos a ele a propriedade
de qualquer texto
do botão . Legal. Vamos em frente e
guardaremos isso. Agora, pelo
menos nos livramos
desse primeiro erro, mas ainda temos
o erro do tipo Eddy O que precisamos fazer
no script de tipo é na verdade, criar algo
chamado interface. Uma interface é
basicamente um conjunto de regras que diz ao componente o que fazer com as variáveis
que foram passadas, o que fazer com as propriedades que foram
passadas por ela. A maneira de criar uma
interface é sair do componente logo acima
, talvez para onde você
importaria algo exatamente
entre esses dois espaços. Você vai em frente e
diz interface, e depois
dá um nome a ela. Normalmente, as pessoas chamam
isso de adereços, mas você pode chamá-lo do que
quiser Você pode chamá-lo de contra-adereços ou adereços de aplicativos para ser específico
para seu componente Mas você pode chamá-lo do que
quiser porque só temos um
componente que aceita adereços Vamos chamá-lo apenas de adereços,
mas precisa ser capital. Seja qual for o nome escolhido, certifique-se de que a primeira letra
seja Interfaces maiúsculas e seja um objeto. Então, vamos apenas criar
nosso objeto lá. Não é igual a isso, ele
só usa os colchetes encaracolados. Então, o que queremos fazer
é que, para cada objeto que
temos que está sendo
enviado para o contador, queremos dizer à interface
qual deve ser esse tipo Se eu digitar o título aqui, posso usar dois pontos para
atribuir um tipo a ele Então, vou dizer que o título é do
tipo string e salve-o. E nós temos um feito. O próximo é o texto do botão, que também é do tipo string. E vamos colocar a string aqui e
depois salvá-la e funcionar bem. Agora estamos recebendo
esse outro erro aqui e ainda estamos
recebendo esses erros aqui. Isso porque esses dois ainda não
foram conectados. Eles existem no mesmo arquivo. Mas o componente, o componente, precisa ser instruído a realmente usar esses adereços A maneira de fazer isso com SX é
colocar dois pontos aqui, ao
lado desses
colchetes , e digitar o nome de Então, no nosso caso, adereça e economize. E depois de fazer isso, você verá que todos os nossos erros
desapareceram. E agora
inicializamos nossos valores com algum tipo de
tipo Agora, se estivéssemos realmente, e se você verificar sua página, teríamos meu contador
com um número, certo? Bem simples. Também existem
diferentes tipos disponíveis. Digamos que você queira transmitir
uma função, certo? Então, digamos que criaremos uma função ao
clicar. Um clique é igual ao
registro de pontos do console M clicado Então, você só quer criar uma função
onclick muito simples E nós passamos isso
tão bem quanto um adereço. Como de costume, notaremos que ela fica amarela
porque é uma função. E temos que adicioná-lo aos
nossos adereços aqui no clique. Vamos adicioná-lo ao
clique do nosso botão. Diga isso. Mas o
problema é que, primeiro, não é amarelo aqui porque ele não sabe
de que tipo é, certo? Porque não o colocamos
em nossos adereços reais aqui. Então, vamos em frente e
realmente colocá-lo em nossos adereços. Então, diremos em um clique. Mas a diferença
aqui é que é uma função. E se você se lembra do
seu Javascript, uma função não é como um
tipo em script Java, certo? É como uma
coisa que usamos, certo? Quero dizer, acho que funções são objetos, mas, como
você
não gostaria , elas são de
uma classe diferente, são de um tipo diferente. Então, no script de tipo, eles realmente têm algo
para funções em você diria se ele retorna ou
não algo. Portanto, a sintaxe para isso é na verdade, apenas seus
parênteses regulares Em seguida, você digitaria
a seta e digitaria void se ela
não retornasse nada Se ele retornar algo, talvez
você possa dizer string
ou o que quer que ele retorne. E se usar argumentos, você poderia passá-los aqui, como se fosse verdade, seria necessário um do tipo
string. Isso não é verdade para
nossa função aqui. Mas, na maioria das
vezes, a maioria das funções
transmitirá apenas
nosso argumento simples,
menos funções que
serão transmitirá apenas
nosso argumento simples, anuladas e
a razão pela qual elas serão
anuladas é porque na verdade
não retornam
nada, Se uma função retornar algo
, esses dados seriam
significativos para armazenar em uma variável
ou em outra coisa. Mas, na maioria das vezes, quando você está
transmitindo uma função, ela simplesmente
aciona algo dentro do outro aplicativo. Então, se tivéssemos, por exemplo, se pegássemos o botão e criássemos
nosso próprio
componente de botão, como fizemos criássemos
nosso próprio
componente de botão, como antes com
o anúncio no botão de subtração, poderíamos simplesmente passar o
clique como um vazio e deixar toda a lógica na
função de contador. Essa é
uma opção que poderíamos ter. Então, agora que colocamos os parênteses nulos, assim
como uma função de seta,
você sabe, parênteses, e então Nós o adicionamos aqui aos nossos adereços e o adicionamos
à nossa função Quando clicarmos em mais um, notaremos em nosso console real, deixe-me esclarecer isso Se verificarmos
nosso console real aqui, perceberemos que diz clique. E toda vez que clicamos
nele, ele apenas adiciona um
à pilha para que saibamos
que está funcionando corretamente.
Digite o script. Demora um
pouco para se acostumar, mas quando você se acostuma,
é muito mais fácil trabalhar com ele. Pessoalmente, acho que uma
das coisas mais difíceis de se
trabalhar quando você trabalha com script de tipos é quando você tem objetos maiores, certo? Então, digamos que tivéssemos um objeto talvez tenhamos um objeto
chamado casa novamente, certo? E isso é um objeto, esse é um objeto que tem o
valor do nome da minha casa. E então talvez tenha
quartos, o que é um número. E então talvez
tenha eletrodomésticos, que são uma variedade de Sim,
e tenha eletrodomésticos. Então, vamos fazer isso mesmo e dizer que
passamos house para nossa função de
contador. Provavelmente deveríamos
renomear esse componente, mas digamos que passemos house
para nosso balcão Há algumas maneiras
de lidar com isso. Se importarmos a casa, vamos apenas
registrá-la no console por enquanto. Para eliminar esse primeiro erro, queremos adicioná-lo aos nossos adereços Então, vamos adicionar casa aos nossos adereços. Mas que tipo
damos, certo? Acho que poderíamos atribuí-lo
ao tipo de objeto, mas em teoria, como quando
você pensa sobre isso, tudo em Javascript
é um objeto. Portanto, dar a ele o tipo de objeto
pode não ser a melhor ideia. Quero dizer, funciona.
Mas pode não ser a melhor maneira de verificar se está
funcionando corretamente, certo? Tipo, quero dizer, nós do console registramos
isso. Está tudo bem, funciona. Mas em
um mundo ideal, na verdade
teríamos um pouco mais específica,
uma digitação um pouco mais rígida
para sabermos se obtivemos ou não forma correta
do nosso objeto Você sabe, casa
com o nome os eletrodomésticos e os quartos. Você sabe, queremos
ter certeza de
que esse é realmente
o objeto certo. Então, uma maneira de fazer isso
é começar no aplicativo, você pode criar um tipo para casa, então vamos dizer interface e você também pode ter
várias interfaces. Você não precisa ter
apenas um, mas pode dizer Interface House. Então, você pode basicamente usar a forma dessa
casa para criar esse tipo. Você pode dizer que o nome será uma string, os quartos serão um número, os aparelhos
serão uma matriz de strings. A maneira de escrever isso é
digitar uma string e colocar o
símbolo da matriz ao lado dela. Está nos dizendo que, na verdade, é uma matriz dessas cordas. Se fosse uma matriz de
números, você poderia, na verdade, simplesmente
digitar matriz e número,
mas, no nosso caso, seriam cadeias de Então, o que você
vai querer fazer é exportar essa
casa de interface de exportação e depois importar a interface
para o contador. Então, lembre-se de como eu
disse que você pode nomear as interfaces,
qualquer coisa que você saiba. Apenas certifique-se de que seja relevante para o que a coisa é. E você também pode digitar casa. Você pode colocar seus dois pontos
aqui e depois dar à
casa o tipo de casa para que o compilador
saiba em ambos os lados que,
ok, essa casa
corresponde a essa casa Ambos são do mesmo tipo. Então, se formos até nosso balcão, podemos ir até o
topo do nosso arquivo, onde todas as nossas declarações de importação
devem estar e
devemos armazenar a partir do aplicativo de barra de pontos E então iremos para
nosso objeto doméstico aqui. E depois é só
passar o tipo de casa. E agora isso não
muda nada em nosso aplicativo, mas agora sabemos que é digitado com
mais precisão, certo? Agora sabemos que com
certeza essas duas coisas combinam, com certeza sabemos que a casa é do tipo casa e a outra também é do
tipo casa. Então, se realmente tivéssemos o tipo errado de
interface, certo, digamos que eu criei outra
interface aqui e a chamei de
casa e tinha um nome era só um número
e pronto. E eu tentei passar
isso para esse tipo de casa. Isso deve gerar um erro. E você verá em nosso abdômen
que ele já ficou vermelho. Então, você verá aqui que ele nos
dirá que o tipo casa não pode ser atribuída ao tipo casa porque as propriedades
do nome são incompatíveis Cadeia de caracteres que você não pode
atribuir ao número do tipo. É aqui que o script de tipo
mostra sua verdadeira força. Podemos ter dois
tipos muito semelhantes, como casa e lar. Que eles são quase
a mesma coisa e ambos
têm o
nome de propriedade. Porém, a propriedade do nome em si não é do mesmo tipo. Sei que isso pode ser um pouco complicado e confuso,
mas à medida que você trabalha um
pouco mais no texto
datilografado,
fica muito mais claro que faz sentido
e o que não faz Mas, por enquanto, você pode ver
que, basicamente, desde que você digite
as coisas da mesma maneira, o datilografado fará
a verificação por você e garantirá que você não
cometa erros descuidados Pessoalmente, acho que o texto
datilografado é realmente essencial. Eu prefiro escrever com ele
quando estou criando aplicativos. Só porque
faz tudo isso. Verificando meus pequenos
erros bobos antes de chegar
ao estágio real de produção e depois não
consigo descobrir o que há de
errado com o aplicativo Então, essa foi apenas uma
introdução rápida ao texto datilografado, e vamos continuar trabalhando com ela
um pouco mais tarde Se você tiver
alguma dúvida sobre o que pode ou
não fazer com o texto datilografado,
deixarei um link para
o site que contém
a documentação
datilografada para que você possa acessar
todas as informações necessárias ou pesquisar todas
as informações
necessárias se não tiver certeza
de como escrever
algo deixarei um link para
o site que contém a documentação
datilografada para que você possa acessar todas as informações necessárias ou pesquisar todas
as informações
necessárias se não tiver certeza como escrever
10. TypeScript e Next.js (estilização): Tudo bem, então
vamos
começar a criar nosso aplicativo de script
de tipos. Se você der uma olhada
no arquivo de design aqui, é
isso que vamos
construir. É um aplicativo simples de
calculadora de dicas que envolve alguns tipos
diferentes com os quais podemos trabalhar e verificar se nosso projeto está funcionando corretamente
e aprender o script de tipos. Então, vamos mergulhar nisso. Em primeiro lugar,
vou começar no meu repositório aqui Agora eu já usei
esse aplicativo inicial aqui. Está no meu Github,
é chamado de aplicativo Muck. O que isso faz é combinar algumas coisas rápidas para
começar a trabalhar
mais rapidamente usando o material Y
próximo S e digitar script. A maioria deles está relacionada
apenas ao estilo e à
criação de um aplicativo rápido Portanto, sinta-se à vontade para
usá-lo se quiser. Mas você não tem,
você pode simplesmente iniciar um aplicativo normal usando
react e type script. Portanto, temos três ou
quatro seções aqui. Temos o valor da fatura,
a porcentagem da gorjeta, o número de pessoas e, seguida, o
valor da gorjeta por pessoa. Esta é a
peça calculada e a peça reiniciada. Ok, muito simples. O que vou fazer é
supor que com este aplicativo você queira
inserir o valor da fatura Então, você vai querer usar
algum tipo de entrada. Depois de inserir isso,
você deve adicionar,
colocar o valor
da gorjeta nesse número e, em
seguida, adicionar o número de
pessoas, como se todo
o lado esquerdo fosse
suas entradas e, em seguida, o lado
direito fosse sua saída,
essencialmente
resultasse colocar o valor
da gorjeta nesse número e, em seguida, adicionar o número de pessoas, como se todo
o lado esquerdo suas entradas e, em seguida, o lado
direito fosse sua saída, de tudo isso Para fazer isso, acho que
o que vou fazer é criar uma
entrada de dica e uma saída de dica. Talvez eu crie
um novo arquivo para dizer,
digamos, entrada de fatura ou custo. E eu vou colocar isso
aqui e então vamos dizer A novamente. Você pode nomeá-los como
quiser. a primeira coisa que
me veio à mente. Saída. Tudo bem, incrível. Então você
tem a entrada e a saída. Agora, uma coisa a considerar, especialmente quando
você está trabalhando com script do tipo
reator ou qualquer
tipo de tecnologia como essa, pensar em onde está
o estado inicial do seu
aplicativo. Está em cada componente
e, em seguida, temos algum gerente estadual global
maior? Ele vive em um componente
superior? Qual é a forma como
seus dados estão fluindo? Essencialmente, para isso, acho que é um aplicativo bastante
simples, então eu não gostaria de
usar uma situação mais complexa, estou pensando em dados
vermelhos. Acho que o que eu quero fazer é tentar mantê-la
dentro do estado local. Talvez o coloque em um suporte Z, mas vamos ver o quanto podemos fazer sem realmente
pressioná-lo demais. Tudo bem, primeiro de tudo, vamos terminar de construir isso. Queremos gorjeta de fatura, porcentagem e número de
pessoas em nossa entrada de custos. Teremos
alguns elementos diferentes adicionaremos em nossa caixa. Vamos dizer um pouco
de tipografia para dizer fatura S percentual da
fatura S
T. Oh, incrível. Ok, legal. E então teremos
algum tipo de entrada de texto. Oh, apenas me dê o
mesmo erro aqui, porque eu preciso
fazer uma entrada direta. Importações diretas,
devo dizer, sem insumos. Tudo bem, vamos importar a caixa
e vamos importar a tipografia. Tudo bem, incrível. Agora, a entrada I tem um
componente de campo de texto, é isso que é. Então, vamos pegar isso
emprestado. Vamos
pegar emprestado o componente
básico do campo de texto resumido
para nossa fatura e para
nosso número de pessoas componente
básico do campo de texto resumido para nossa fatura e para
nosso número de Vou
importar isso para lá. Legal, incrível. Então, para eles, agora será mais como uma seleção com base em um botão
com uma entrada no final. É um pouco mais
complexo nesse sentido, o que eu realmente vou
fazer é embrulhá-las em caixas para não
confundirmos qual é qual. Tudo bem, então isso
é para a conta. Essa caixa
será a porcentagem da gorjeta. Vou adicionar mais alguns nesta caixa. Adicione os botões e, em seguida esta caixa será
para o número de pessoas. Incrível. Só para realmente estruturar as coisas com um
pouco mais de clareza ,
porque acho que
vai ficar um
pouco complicado de controlar. Tudo bem, legal. Então, agora temos o problema
com essas entradas, certo? Como se
pudéssemos fazer com que o valor fosse o que o usuário
digitar no valor. E também devo
mudar a cor aqui para que possamos realmente ver a cor. Ok, legal. Então, sim, eu poderia simplesmente
configurá-lo para que, quando eu colocasse o
valor na entrada de custo, ele simplesmente resida dentro
desse componente. Mas porque precisamos acessar o valor 142 para que possamos obter o valor da gorjeta
no total por pessoa Em termos da maneira como estou
pensando sobre o estado, acho que quero
elevar o estado ou elevar o estado
e colocá-lo ativo na
própria calculadora de dicas . Então, como
é isso? Bem, para mim, parece
criar alguns elementos, alguns elementos de estado. Acabaríamos criando
um preço total em zero e depois repassando-o
por nossos aplicativos. Faremos isso em apenas um segundo. Vamos terminar
com o estilo. Então, vamos dar
essa cor de fundo. Cores de fundo, certo? E, como eu disse, fique à vontade para usar o estilo que quiser Isso depende totalmente de você. Estou apenas usando Maly, certo? Porque é um
pouco mais rápido para mim. OK. E então, oh, você sabe, esse é
o outro problema, eu preciso fazer disso uma caixa flexível Tudo bem? Incrível. Ok,
então agora dentro deles, vamos prosseguir e terminar Essa linha do céu
será qual é a largura desse 379 Eu não adiciono isso. O
inferior também. Esses dois meio que
terão estilos de espelhamento. Eu me pergunto se talvez tenha havido
algum comentário sobre isso. Lá vamos nós. Eu queria saber por
que isso não estava
afetando o estilo global. Há uma espécie de
redefinição global que eu coloquei aqui, o que é útil, mas estava superando minha margem e,
Paddy, eu a retirei Tudo bem, então vamos lá. Tudo bem, então tem
uma etiqueta aqui e
vai dizer pessoas,
então essa, vai ser, a etiqueta
da fatura vai ser apenas
$1, etiqueta
da fatura vai ser apenas assine essas duas identidades porque elas não são
úteis para nós no momento. Você pode alterá-los quando eles se tornarem úteis, então
eu também vou definir a
cor para que seja essa cor
para os dois, que
possamos ver o texto dentro. Vou consertar o copo em um segundo. Nossa próxima peça aqui leva em consideração isso. Ok, então vamos adicionar esses
cinco botões e uma entrada. Uma será uma dessas
entradas sem a largura. Então eu vou
fazer algo rápido. Eu vou dizer
gorjeta de custo por porcentagens, e vou
definir isso como uma matriz de números Eu vou dizer 5%, eu acho. 5% 10% 50% 20% e 25. É 25%? Ah, não, desculpe. 50% 25% e 50% 25% e 50% Tudo bem. Legal. Então, essas são as porcentagens
da gorjeta Agora, aqui embaixo, vou apenas
mapeá-los. Eu vou dizer que as
porcentagens das gorjetas mapeiam cada porcentagem. Em seguida, quero
retornar um botão com a
porcentagem percentual como botão, e ela também pode ser fornecida aqui. Deixe-me me livrar
disso. Não posso dizer que eu deva devolvê-la, mas alto Key, a
chave vendida é a porcentagem, porque essas serão únicas. Tudo bem, legal. Então agora
temos nossos botões. Incrível. Vamos mudar a cor do
fundo para ficar tão legal. E então vamos definir
a largura de cada um como 117, eu acredito. 48. Perfeito. Incrível. Então, você sabe o que, eu
tenho uma coluna flexível Eu quero que seja uma coluna flexível, mas acho que quero
embrulhá-las na caixa Estou colocando os botões no campo
de texto em uma caixa. Lá vamos nós. E então
eu vou dizer que display flex wrap
vai ser, então eu vou dizer largura Digamos que. O 353? Sim, três em uma fileira. Então, digamos que a largura seja 450. Incrível. Vou copiar esses
estilos para este texto salve-os e talvez
adicione um pouco de margem. Estamos muito
bem nisso aqui. Incrível. Isso parece
muito bom para mim. Acho que estou muito contente
com isso apenas em termos de estilo geral. O que vou fazer
agora com essas caixas, vou adicionar uma
margem na parte superior e inferior de cada uma
delas, como caixas externas, temos um bom espaçamento lá Eu também poderia usar uma caixa flexível, que na verdade
provavelmente seria melhor Vamos fazer dessa
caixa externa uma caixa flexível. Eu vou dizer espaço. Agora, há espaço uniformemente
de cima para baixo. Tudo bem, legal. Está
parecendo muito bom. Agora vamos ver, o que
mais precisamos fazer? Ah, sim, precisamos
fazer o outro lado. Vamos pensar um pouco sobre a
produção de faturas aqui. Saída da fatura, temos
essa caixa verde escura. Vamos começar com isso.
Vamos pegar essa cor mais
uma vez. Digamos que antes. E então vamos dar a ela
uma largura, 413 por 41714. Apenas 413 por 413, mas isso realmente não importa 417, Digamos
que eu preciso adicionar
à calculadora de dicas Não está aqui. Isso é para subir até aqui. Margem zero O para a calculadora de
gorjetas em si, preciso alinhar os itens no centro, certo? Perfeito. Legal, legal,
legal. Parece bom. Tudo bem, então a próxima
coisa que quero fazer agora adicionar
as peças que queremos, retirá-las e totalizar
e um botão de reset. Vamos criar alguns elementos
tipográficos. Diremos que basta corrigir esse
erro na parte superior aqui. Eu vou dizer o
valor da gorjeta por pessoa, e então isso vai
ser um valor. Vamos corrigir
isso em 2 segundos. Pode embrulhar isso em uma caixa. E então vamos
fazer isso de novo, mas vamos
dizer total por pessoa. Então, na parte inferior,
teremos um botão que diz reinicializações. Mesmo botão. Ok, botão de reset, nós vamos fazer isso. Isso chegou. Está bem? Ok, incrível. Então, aplique esse material
na próxima caixa também. Legal. Perfeito. Em seguida, vamos embrulhar esses
dois em uma caixa. E a razão para isso,
aqueles dois em uma caixa, é que quando eu digo que eles
justificam o espaço de conteúdo
entre os botões na parte inferior e os
valores dos preços estão na parte superior Incrível Per cool. Lá vamos nós. Muito básico. Vou apenas retocar mais
alguns estilos e depois
trabalharemos com nosso roteiro de brinquedos. Tudo bem, sabe,
acho que preciso mirar. Estou apenas tentando definir a cor aqui para que possamos vê-la. Acho que preciso mirar. Deixe-me inserir a base. Pode puxar, sim. Tudo bem, perfeito.
Isso é o que eu quero fazer. Tudo bem, então eu vou pegar, na verdade tirar essa cor. Tire essa cor, pode tirar essa cor,
você não está fazendo nada. E basta pegar esse gráfico lá. Tudo bem, legal. Então, apenas digite as coisas aqui, agora
podemos vê-las. Quaisquer outros pequenos ajustes. Esse lado parece muito bom. Agora eu acho que no lado direito aqui, talvez pudéssemos
mudar essa cor, a quantidade de ponta para branco e dar um
pouco mais de espaçamento E então devemos estar prontos
para seguir em frente e passar para nosso
espaço de script de texto espaço entre eles.
11. TypeScript e Next.js (tipos): Tudo bem, agora que
temos tudo isso construído,
vamos continuar e desenvolver
a
funcionalidade de vamos continuar e desenvolver script de tipo,
o propósito desta lição, e ver como ela é um
pouco diferente do uso normal
de
Javascript ou JSX Nosso estilo
está praticamente pronto. Mas uma coisa a observar e
observar, da
qual falei antes, é sobre o estado. Queremos pensar em onde
o estado está morando
nesse aplicativo porque temos três ou quatro peças diferentes. Aqui temos a seção de entrada, onde o usuário pode selecionar a dica e colocar o número de pessoas ou
colocar o valor total da fatura. Em seguida, temos a saída,
que nos dará valor
da gorjeta e o custo
total por pessoa, valor da
gorjeta por pessoa,
custo por pessoa. Então temos um botão de
reset aqui. Agora, para que tudo
isso funcione, o estado precisa estar um pouco,
bem, não necessariamente
globalizado, mas disponível em um nível mais alto para ser passado entre
esses dois componentes Vou tentar
fazer isso usando
apenas o estado normal de reação. Se essa não parecer uma solução adequada, faremos a transição para
algo como stand. O que estou tentando fazer é evitar o uso de reduct
porque há muitos clichês envolvidos e são aplicativos bastante Vamos ver se podemos fazer isso
usando apenas algumas soluções simples. Em minha mente, preciso
aprovar a fatura total, a porcentagem da gorjeta
e o número de pessoas do
lado esquerdo para o lado direito. Acho que precisa estar no componente superior
da calculadora de
dicas aqui. Vamos
fazer isso acontecer na calculadora de dicas aqui. O que vou fazer
é começar definindo algumas variáveis. Eu vou dizer,
digamos que a fatura total. Eu vou dizer que definir a fatura
total é igual ao estado, que será importado do react Vamos
inicializá-lo em zero. Agora, uma coisa com o script de
tipo aqui podemos realmente adicionar um tipo e especificar que isso
precisa ser um tipo de número. Agora, como você
também coloca zero, ele infere que
precisa ser um tipo de número Estamos recebendo um erro aqui porque não usamos o cliente aqui porque esse é
apenas o próximo erro do GS. Não tem a ver com o
script de tipo, mas podemos especificar o tipo que essa fatura precisa
ser do tipo numérico. O valor precisa
ser um número para que
possamos realmente fazer cálculos. Esse é um dos pontos
em que
começamos a usar o texto datilografado E você verá como isso
chega até o nosso, então temos a conta Vamos fazer a mesma
coisa para
definir a porcentagem da gorjeta, porcentagem percentual. Isso também vai
ser um número. Sim, vai
ser um número e depois um número de pessoas.
Faremos mais um. Vou dizer número de pessoas, número
definido de pessoas. E, novamente, você declara e numera que o inicializaria em zero, para
começarmos do zero. Tudo bem, agora que
inicializamos essas variáveis, vamos
utilizá-las em nosso aplicativo para minha entrada de custos Agora quero passar
esses parâmetros de fatura total e definir a fatura, porcentagem
total, definir o número
percentual total de pessoas, definir o número de pessoas
para a entrada de custo. Porque isso vai
ter implicações em termos do que acontece. Agora, na verdade, existem
duas maneiras de fazer isso. Poderíamos passar
os dois para baixo ou definir as
funções na calculadora. Deixe-me começar apenas passando a variável inicial.
Digamos que a fatura total. Fatura total, gorjeta por porcentagem, porcentagem é igual a
gorjeta por porcentagem e número de pessoas
é igual Veja, eu já estou
recebendo um erro aqui porque o
script de tipo está nos dizendo que na verdade não temos a propriedade no
componente em si. Portanto, esse é um dos
benefícios do script de tipo. Você não pode simplesmente
passar coisas aleatórias e
esperar que funcionem. Você precisa realmente
utilizar o script de tipo. Você tem que especificar, devo dizer, quais
tipos você está esperando. Se por acaso eu
inserir o custo aqui e importar a fatura total, aceitarei a porcentagem da gorjeta e também aceitarei
o número de pessoas. Novamente, se este for um aplicativo de reação
normal, você pode simplesmente
trazê-los assim. Mas como não é uma reação normal, não
é apenas uma aplicação Javascript, devo dizer, React. Você verá que, na verdade,
está recebendo um erro aqui. Diremos que o
número de pessoas do elemento vinculativo, por exemplo,
tem implicitamente qualquer tipo E, como você lembra anteriormente,
falamos sobre qualquer um, não
queremos necessariamente ter
apenas um tipo genérico. O que queremos fazer
é seguir em frente e digitar
especificamente
essas variáveis. Deixe-me mostrar como
vamos fazer isso. A forma como vamos
fazer isso é criando algo
chamado interface. Uma interface é basicamente
uma forma de digitar o script, de dizermos o script de tipo. Ei, espero que
essas variáveis venham nessas propriedades e quero que sejam de certos tipos, e esses são
os tipos que eu espero Qualquer coisa diferente disso,
declare um erro. Eu vou
criá-lo, vou
chamá-lo de adereços. Você pode
chamá-lo do que quiser. E vou descrever
essas propriedades diferentes. Eu vou dizer fatura total. Vai ser um
número. Eu vou dizer porcentagem
de gorjetas. Vai ser um número
como um número de pessoas. Vai ser, então eu
vou dizer ao script de tipo que todos esses você
pode usar esse mapa,
essa interface para obter
o tipo de safra. E você verá aqui que eu
não tenho mais lá, as coisas estão funcionando até agora. A última coisa que precisamos
fazer agora é
conectar isso aos
locais reais em nosso aplicativo. Quanto à propriedade Textfield, acredito que há um
valor que podemos usar Eu acredito que isso se chama
valor. Deixe-me verificar. Vamos até a API. Tenho certeza de que é
como uma entrada normal, mas quero ter certeza de que
não recebamos alguns erros errôneos Tudo bem, sim, acho que
acabamos de valorizar. Vamos tentar esse projeto de lei. Vamos dizer que o valor é
igual ao total da fatura. Vamos dizer que confira aqui. Incrível. Então, estamos
recebendo $0 Perfect Faremos isso com
todas as três porcentagens de gorjeta. A porcentagem será
um pouco diferente, mas para o último campo de texto, vamos dizer que o valor é
igual ao número Lá, temos um número
de pessoas definido como zero. Perfeito. Estamos prontos para ir. Nesse sentido, a próxima coisa que eu quero fazer é criar um
conjunto, certo? Quando o valor
dessas entradas muda, queremos acionar
alguma função Vamos em frente e
escreveremos essa função. E podemos realmente
escrever essa função na calculadora de
gorjetas ou
podemos escrevê-la em custo. Não importa, só
depende do que é para nós. Se eu continuar e
escrever isso na entrada de custos, posso dizer que preciso
passar no conjunto. Eu quero passar pelo
setter. Quer passar para você apenas uma função aleatória? Vamos passar pelo setter porque
acho que vou limpar você. Ok, e então ela está nos dando um conjunto
semelhante de erros Sim, vamos
deixá-los aqui, e então eu
os colocarei aqui. Então, a diferença aqui é
que, na verdade, vamos passar
, serão
parênteses iguais a E é assim que você diz ao
Typescript que é uma função pela qual estamos passando Essencialmente, se a função pegasse algo
como se fosse um R, esse era todo o
número do tipo, por exemplo, então poderíamos especificar
isso também. Não há problema em
deixá-lo em branco por enquanto. Mas definitivamente poderíamos
especificar o tipo, se necessário. E veja que já estamos
recebendo um erro aqui. Na verdade, ele não é
capaz de definir seu tipo nulo, temos que configurá-lo para esse tipo Na verdade, é bom. Ele nos dá o tipo exato
que deseja que usemos. Se fosse uma função normal,
poderíamos usar o tipo void. Mas como essas são ações de estado
definidas, precisamos usar os tipos muito específicos que
elas estão nos dando. Tudo bem, nós apenas
importamos esses tipos e, em seguida,
devemos estar prontos para começar. Incrível, ótimo aspecto
do texto datilografado. Ele dirá
quais tipos são importados. Tudo bem, agora queremos dizer que, para o nosso campo de texto, queremos dizer
sobre mudança , queremos definir que a fatura
total seja o valor. Deixe-me realmente criar
uma função aqui que diz que vamos aprovar um projeto de lei de atualização
constante, que será o evento. Eu digo que a fatura
definida será Targetvalue Essa será a maneira como
poderemos pegar ou realmente fazer. Na verdade, não precisamos
fazer tudo isso. Desculpe. Podemos simplesmente pagar a fatura
do conjunto de mudanças, vamos apenas repassar o valor do Sarge E deve ser
capaz de simplesmente agarrá-los. Ele deve ser capaz de simplesmente
pegar o valor de E, que é como o
evento que está ocorrendo, ele está ouvindo o tipo de tensão do
argumento, não atribuível ao tipo de número de
parâmetros Diga-me que o
valor que vou receber de volta é na verdade uma string,
não um número. Mas o que eu posso fazer é
, na verdade , transformar isso em um número. Diga que será um número que corrigirá esse
tipo de erro. Às vezes, um pouco irritante. Você precisa alterar muitas pequenas coisas para ter
certeza
de que
não está recebendo erros de digitação. Mas acho que vale a
pena porque funciona no final do tipo 57, depois o número no
estado, quero dizer, não
podemos vê-lo aqui,
mas o número no estado seria
57,
o que é ótimo. Então, está tudo bem. Tudo bem, então
temos isso configurado. Vamos fazer o mesmo por aqui. Em vez da fatura total,
vamos dizer que defina número
definido de pessoas com a
mesma coisa, valor-alvo. Quando esse valor muda,
mudamos o número de pessoas. Gostaria de saber se você muda para o valor
padrão, se isso
faz alguma diferença. Tudo bem, vamos fazer
disso uma jogada de valor por enquanto. Tudo bem, então
temos esses dois conjuntos. O último que eu quero lidar é a porcentagem que precisamos para
lidar com isso de duas maneiras. Basicamente, quando
um usuário altera
os tipos semelhantes em algo no campo de texto
personalizado aqui. E eu vou realmente
dar, tem um rótulo? Acho que precisa de valor ou um valor padrão é igual a
personalizado por porcentagem Agora, uma pequena porcentagem, 1.000% Sim Quando um usuário digita
aqui ou clica em um botão aqui, precisamos garantir que
a porcentagem percentual seja
atualizada para corresponder a isso O que eu quero fazer é
dizer que,
ao clicar , isso realmente não importa, é, estamos listando para ambos. Mas se você clicar, o valor muda quando algo é adicionado a esse
número que muda, acontecer por último
é o
que Ao clicar, vou
criar uma função ao clicar. Vamos dizer que, ao
clicar,
diremos que define
a porcentagem como porcentagem. E está nos dando
o mesmo erro, mas desta vez é correto nos
dar o mesmo erro porque dissemos que é uma string. O que eu realmente
vou fazer é transformá-los em objetos. Eu vou dizer porcentagem, e então o valor real da
multiplicação que
usaríamos é 0,05. E assim
que vamos
resolver esse problema Temos nossa string
e também
temos nosso número real
que podemos usar. Essa deve ser uma solução bastante
simples. Eu vou dizer isso. E
então a chave agora tem que ser porcentagem. Ah, Ash. Na verdade, essa não era a maneira correta de fazer
esse título percentual. Essa porcentagem, é o que eu
deveria ter feito. Tudo bem Desculpe. Deixe-me
resolver isso bem rápido. Tudo bem Incrível. Então, digamos que a porcentagem do título seja a chave, valor percentual seja o
valor e, em seguida, a porcentagem do título seja o que aparece na bunda,
corrigiu esse problema Agora definimos
todas essas coisas. O último que precisa ser definido
é o arquivo de texto. Vamos apenas pegar emprestada a funcionalidade de
mudança aqui, base
percentual, tudo o que
obtemos do valor alvo Sim, devemos ser
bons nesse sentido. Vou voltar para a
calculadora Tip e podemos testar,
na verdade, para ver se isso funciona, podemos dizer log de pontos do console. Digamos que a
porcentagem total de gorjetas e o número de pessoas que o console registre cada uma
delas e seja inspecionada
em nosso console No momento, eles são todos
zero, o que faz sentido porque
os definimos como padrão para zero. Então, se eu disser que a fatura
total é 100, você verá o primeiro
número mudar. selecionar dez, ele obtém o 0,1, que é o que
esperamos que aconteça se eu
adicionar cinco pessoas, a última muda,
então sabemos que está realmente funcionando
corretamente. Pronto para ir. Nesse sentido, removerei esse log do console
por enquanto, ótimo. Portanto, sabemos que as
informações estão sendo passadas corretamente
para a calculadora de gorjetas, para que as coisas realmente
aconteçam corretamente. Agora, a razão pela qual eu não
queria usar a calculadora
de
gorjetas anteriormente com todas essas pequenas funcionalidades, porque agora você
vai criar algumas funções na calculadora de
gorjetas, precisamos calcular qual valor
da gorjeta por pessoa e qual deve ser o total
por pessoa Para fazer isso, precisamos
criar duas funções. Dizemos que recebemos uma gorjeta constante por pessoa e depois
criamos outra. Obtenha o total por pessoa. Podemos fazer isso aqui
ou podemos fazer isso na entrada de custos. Isso realmente
não importa. Mas se fizermos isso aqui
, não precisaremos inserir um
conjunto adicional de adereços na
saída da nota, devo dizer Se eu conseguir um nível ou
talvez queiramos detalhá-lo, sim, talvez queiramos fazer
isso, na verdade, desculpe. Vamos fazer isso na saída da fatura
apenas para manter as coisas limpas. Tudo bem, então vamos
criar esses dois aqui, mas o que
precisamos fazer é passar três adereços para faturar a saída Assim como tínhamos uma
interface na entrada de custos. Vou criar uma
interface na saída da fatura. Basta copiar e colar
isso do, pegar esses aqui e ali. Então, agora, na função aqui, eu vou dizer:
receba uma gorjeta por pessoa. Nós somos a gorjeta por pessoa
seria o total da fatura
multiplicado porcentagem da gorjeta dividida pela porcentagem da gorjeta dividida pelo número de pessoas dividido
pelo número de pessoas. Essa será a pessoa que deu a dica. Podemos dizer que esse valor ou, na verdade, não precisamos
criar uma função inteira, vamos apenas dizer
gorjeta constante por
pessoa, pessoa igual, pronto E então vamos dizer que
essa é a gorjeta por pessoa, essa é a gorjeta por pessoa. Sim, acabamos de dizer que a gorjeta por pessoa é uma fatura total multiplicada porcentagem
da gorjeta dividida
pelo número de pessoas atualmente. Não é um número porque
não temos esses números. Mas vamos corrigir isso
em apenas 1 segundo. Tudo bem, a próxima
coisa que vamos
fazer é o total por pessoa. O total por pessoa será
a gorjeta por pessoa, a fatura total dividida pelo número de pessoas
mais a gorjeta por pessoa. Dessa forma, podemos realmente usar isso para nossa
segunda função. Diremos que esse
será nosso total por pessoa, por pessoa. Isso faz sentido. Fatura total pelo número de pessoas
mais a pessoa que deu a gorjeta. Incrível. No momento
, estamos recebendo um número. Gostaria de saber se não, eles deveriam estar
chegando, pois os números podem ser especificados. Gostaria de saber se eles não estão chegando como números por algum motivo. Vamos ver o que acontece se
eu mudar o número aqui. Ou, você sabe, pode ser que
eu acho que sei
onde está o problema. Na verdade, não estamos
passando as variáveis, então isso provavelmente criaria um problema
muito, muito grande. Tudo bem, incrível. Então,
nós já o conectamos. Então, sim, se você puder ver aqui, definindo
a gorjeta 10%, o valor da gorjeta
acabaria sendo $2 por pessoa E então o total por pessoa seria de
$22, o que faz sentido $100 divididos por cinco pessoas seriam $20 por
pessoa mais $102 de gorjeta $22. Podemos fazer um
pequeno formulário
somando aqui apenas para
que pareça um pouco mais Podemos simplesmente adicionar o sinal de $1 aqui. Adicione $1 inscreva-se aqui. Você pode mudar isso
. Veja se quando eu aperto o botão ele muda, muda os valores lá. A última coisa que
provavelmente poderíamos fazer é conectar nosso botão de reset. Basta redefinir tudo para zero. Então, sim, como você pode ver, Typescript não é muito
diferente do Javascript É muito semelhante à
forma como você operaria em um aplicativo react ou
apenas em um aplicativo web de
texto datilografado simples em Javascript A única diferença
é poder ver os erros
antes que eles ocorram. Então, por exemplo, o erro foi que
nem tínhamos aprovado o Se fosse um aplicativo
Javascript, poderíamos ter passado cerca de dez, 50 minutos tentando depurar o problema e descobrir
qual é o problema A melhor coisa
sobre o script de tipo é que ele permite que você, ei, é aqui que está o problema. Aquele tratamento rápido de erros
antes de você iniciar seu aplicativo e as coisas não
funcionarem, você não sabe. Sim, é assim que se
configura um script de tipo, aplicativo de
reação,
espero que tenha sido útil
12. Conclusão: Conclusão sobre
a qual falamos muito neste vídeo. Do básico do texto datilografado à
criação de seu próprio aplicativo web de texto
datilografado No futuro, você deve
ser capaz de começar a criar seus próprios sites do
zero usando o texto datilografado Lembre-se de pesquisar algo quando
não tiver certeza Eu adoraria ver o desempenho do
seu site,
então, deixe um link para
seu código, uma captura ou o site hospedado
na guia Projeto e recursos abaixo, para que eu possa ver todo o trabalho
árduo que você fez Eu leio todos os comentários, todas as avaliações e vejo
cada envio de projeto. Portanto, se você tiver alguma dúvida, sinta-se à vontade para
deixar um comentário
na seção de avaliações abaixo ou
entrar em contato comigo diretamente. Confira minha página de perfil para obter mais informações sobre isso. Se você quiser saber
mais sobre programação, confira os outros vídeos que
tenho na minha página de perfil Também tenho vídeos
sobre o Next GS e React disponíveis no meu canal e site
do Youtube. Vou vinculá-los abaixo
e no meu perfil se você também estiver interessado em
aprendê-los, e vou ver no próximo.