Aprenda a TypeScript: do iniciante às técnicas avançadas de codificação | Zoë Davidson | Skillshare
Menu
Pesquisar

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Aprenda a TypeScript: do iniciante às técnicas avançadas de codificação

teacher avatar Zoë Davidson, Software Engineer & Cinematographer

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      1:21

    • 2.

      PROJETO DO CURSO 

      0:35

    • 3.

      Introdução ao JavaScript

      0:54

    • 4.

      JavaScript e outras linguagens de programação

      1:44

    • 5.

      O que é o TypeScript?

      0:22

    • 6.

      Tipos

      1:06

    • 7.

      Erros

      0:41

    • 8.

      Como instalar o TypeScript

      1:24

    • 9.

      TypeScript e React

      17:55

    • 10.

      TypeScript e Next.js (estilização)

      28:19

    • 11.

      TypeScript e Next.js (tipos)

      23:40

    • 12.

      Conclusão

      0:53

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

119

Estudantes

1

Projeto

Sobre este curso

Este curso ensinará tudo o que você precisa saber para escrever JavaScript, do iniciante aos conceitos avançados:

  • O que TypeScript é
  • Como usar tipos
  • Como construir um medidor de dicas

Meu nome é Zoë, sou engenheira de software e professora de filme. Você pode conferir meu trabalho aqui.

Este curso é para qualquer pessoa que já tenha tido interesse em aprender a codificar.  Seu projeto de curso será criar seu próprio medidor de dicas usando o TypeScript. 

Este curso incluirá um guia passo a passo sobre como aprender o TypeScript do zero.

  • Como usar o TypeScript com React
  • O que faz uma linguagem de programação diferente
  • Como escrever interfaces e tipos

Depois de concluir o curso, não se esqueça de deixar uma avaliação sobre o que você pensou sobre isso!

Recursos

Next.js Starter: github.com/zdavidson/muxt-ts-app

Aprenda JavaScript: skillshare.com/en/classes/Learn-JavaScript-From-Beginner-to-Advanced-Coding-Techniques

Equipamento de filmagem

  1. Canon 5D IV
  2. Canon 24 - 70 f/2.8
  3. Amaran 60x - acessível e poderoso
  4. Desview T3 Teleprompter
  5. Montagem de mesa de equipamento pequeno
  6. Sennheiser MKE 600
  7. Braço de microfone de esgoto
  8. Zoom H4n Pro

Equipamento de desenvolvimento

  1. M1 Macbook Pro 13"
  2. Teclado mágico da Apple
  3. Logitech MX em qualquer lugar
  4. Suporte duplo para laptop
  5. LG 4k 27"
  6. Cadeira de mesa ergonômica - barata
  7. Bose QC 35 II
  8. AirPods Pro
  9. Monitor de expresso e stand (viagem) - incrível

Conheça seu professor

Teacher Profile Image

Zoë Davidson

Software Engineer & Cinematographer

Professor

Hey! I'm Zoe, a software engineer, filmmaker, and former professor from Toronto, Canada. I have an MFA in Film from Howard University, and also do work as a software engineer.

In the past, I've worked for the University of the District of Columbia, the Academy of Motion Picture Arts and Sciences, Lionsgate, Huffington Post, and I'm a member of organizations like the Canadian Society of Cinematographers.

The films that I've worked on have been featured at festivals around the world, including Sundance, ABFF, Trinidad Tobago Film Festival, and CaribbeanTales.

Check out my latest work, here: zoeahdavidson.com

Visualizar o perfil completo

Level: All Levels

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

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.