Resumo da Aula sobre TypeScript em um Aplicativo React

Estamos de volta nesta aula, nós vamos fazer uma prática, vamos escrever TypeScript num aplicativo de React. Antes disso, vou ver se esse negócio compila. Como o children aqui não está sonando ainda, eu vou tirar daqui. Deixe-me comentar esse componente com children. Vamos dar um teste no terminal para compilar. Vamos ver o que aqui, o arquivo foi gerado. Como a propriedade Jsx de opção de compilado é preserve, ele vai preservar todos os Jsx, a escrita em Jsx, mais a extensão será em vez de TSx, Jsx. O meu componente e tal preservou o Jsx. Outro componente e tal, e tal. Note que meu target é S5. Gera código para S5. Tudo certo então. Vamos fazer uma prática agora. Vou voltar ao meu terminal. Vamos usar o create React app para poder criar um novo aplicativo. Mas em vez de usar o template perfil para padrão, vamos criar um aplicativo que usa TypeScript. Vamos usar o template TypeScript. Antes de tudo, você tem que ter o create React app. Se você não tiver ainda, se tiver NPM, vou dar o NPM. Install, traço de create, traço react, traço app, app, espaço, o nome do aplicativo. Desculpa, sem nome. Isso seria como criar, mas a gente ainda vai instalar. Então, NPM, install, traço de create, traço react, traço app para instalar globalmente. Como já tenho, create React app, é só digitar create, react, app e o nome do aplicativo que você quer gerar. Eu já... Deixa eu dar um CD para cima aqui. Create React app e o nome. Exemplo, ts, react. Esse vai ser o nome da pasta que será gerada com o projeto. Quando você aperta a entra, vai gerar tudo. Como eu já fiz isso, eu só vou dar. Depois de criar esse, dá o CD. Não se esqueça. Para a pasta do projeto. Eu vou abrir aqui a pasta do projeto. Certo? Então, já criou texas, confega aqui. Esse é um projeto de React usando TypeScript. Note que ele, na compiler options, usa a opção Jsx com react. Isto é, ele vai converter todos os chamados de create de Jsx para chamada de react create element com a extensão final do arquivo.js. Targets 5 e tal e tal. Vamos aqui no index tsx, not tsx, para poder usar Jsx. Adeus, Jsx, usado aqui. Usa aqui, usa aqui. Vamos lá para o app. Então, app.tsx, o arquivo, na pasta src. Tem a definição do app como um componente de função ou funcional. Legal. Vamos rodar esse app aqui. NPM, na verdade, yarn. Ele usa yarn por padrão agora. Vamos dar o yarn start. Deixa eu ver aqui. Na verdade, quero ver os comandos no package de JSON. Start, build, test, reject. Certo. Vamos ver aqui. Yarn start. Não tem o yarn globalmente? Deixa eu ver. Usa o npex para poder rodar o yarn. Ele vai abrir o play. Pronto. Está aqui o app. Vamos começar a fazer alguma coisa aqui, só para demonstrar o uso de TypeScript. Vou criar na pasta src. Vamos fazer, sei lá, lista.tsx. Vamos fazer o componente para uma lista aqui. Vamos dizer function, lista. Vai ser o props. Vamos começar a ser em Type e a gente vai adicionar o Type. É Tony. Vamos retornar o L. O que está acontecendo aqui? We've não pode cobrir lá na Space quando Solator module. Solator modules não é provável. Vamos ir para o React. Nesse caso, lista declarada, esse valor não é usado. Quando tem nenhum export, vou dar o export. Fazendo que props tem tipo n, que eu não defini o tipo, e que o declarador vai falar que não foi usado. Certo, certo. Posso fazer um app aqui, props, e vou chamar, vamos fazer definição da interface. Essa lista vai receber as seguintes props. Vou fazer a interface aqui. Lista props. Vai receber a lista de objects, que serão os itens. Eu vou dizer, vou falar das itens assim. Itens vai ser um array, mas array de object, então tem que ter uma interface da MapRita. Vamos supor que... Eu quero primeiro definir qual é a estrutura dos dados, antes de fazer tudo isso. Vamos supor que a lista está assim. É um array, dentro do array tem object com o ID, e a descrição do item. Para a guata. Vou supor que a pira. ID2, ID3, descrição. Vou fazer alguma coisa. Vou fazer outra coisa. Essa vai ser a lista de itens, agora ele está... Implicitamente definiu o tipo, como object literal, o array, o ID descrição. Podemos definir a interface também. Interface. Vamos definir interface para cada item. Eu sei que a gente fica entrando em uma espécie de... Para poder definir isso, a gente vai precisar de aquilo. Para poder definir aquilo, a gente vai precisar de outra coisa. Então a gente vai ter que ficar cavando, até definir as coisas mais básicas. Vamos definir o que é um item dessa lista. Vou fazer uma interface aqui. Interface, item. Item tem um ID, vou dizer que é number, número, descrição, que é stream. Essa vai ser a mais básica unidade que vai ser o item. Então, lista de itens. Vai ser um array de itens. O list de itens vai ser item array. Certo? Agora, essa lista de itens vai ser passada como props. Vamos pegar aqui propriedades, se lembra agora voltando aqui. Componente lista vai ser um componente que vai mostrar uma lista dessas coisas aqui, por exemplo. Vai fazer um ul com várias ls para cada descrição do item. Então, vai levar com propriedade a lista inteira. Lista props, itens serão de que tipo? Que tipo é isso? Itens array. Agora, está dizendo que é decorado, mas nunca é usado. Finalmente, vamos usar como tipo do props, vai lista, lista, props. Finalmente, e eu escrevi com n, então, eu vou correr disso. Agora, eu tenho que dar um mapeamento para converter isso para uma lista de ls. E tem... Vou criar um ALI com a descrição do item. Vou dar um key aqui, com o item poder de... Isso vai adicionar as parênteses para punha o seu alinha. O que está reclamando agora? Está esperando uma vígula. Ampoi uma... Ls. Vou pôr dentro de uma variável aqui. Ls. Vou lis. Agora, eu sei, faltou outro parênteses. Então, com isso, a gente exportou e tal, e tal, e tal. Vou pegar essa lista de itens, vou recortar, e vou definir no app. Agora, como ele tem esse tipo item, ele não sabe o que é. Então, vou ter que definir esse tipo em outro arquivo. Então, vou pegar item.ts, vou definir a interface aqui, e vou exportar. E do listo, vou importar item from.item. Talvez a interface precisa de chaves, quando for importar. É, quando exporta a interface precisa de chaves. Mesma coisa lá para o app que eu estou usando no item, ele não sabe o que é, não, pode encontrar item. Import item, ufa, item. From.item. Certo? Então, a lista import item, eu uso aqui, vou definir sua interface de props. O item definido aqui. App, para a lista de itens, vai ser passada. Vamos pegar o app aqui, remover todo esse código, ele não precisa. E vou fazer uma lista, e vou passar uns itens, essa variável aqui, lista de itens, que é, na verdade, o constante. Essa maneira aqui. Agora, ele não sabe que é a lista, não, pode encontrar o nome lista, porque a gente tem que importar. Import, lista, from, lista. Deixa eu ver aqui, módulo, não tem default, export, certo. Então, como eu não fiz default, tenho que ter a chave. Deixa eu fechar isso aqui. Então, vamos usarmos o list aqui. Vamos supor que a gente escreveu errado, e não passou itens. Ele vai reclamar. Está dizendo que a propriedade vazia, type, esse objeto vazio, significa que não passei nenhuma propria. Não, pode ser assigned, por tipo, lista propria, porque o item, a propriedade, não é encontrada. Então, você precisa, é obrigatório, passar o itens. Não dá aí de compilação. Eu não estou usando, logo, vou remover aqui. Agora, lá do lista, certo, do certo, do certo, vamos ver se funciona. Deixa eu voltar ao navegador. Está aqui a lista, limpar o quarto, fazer a outra, uma coisa, faz outra coisa. E fez a li para cada um. Então, vamos supor, por exemplo, você não sabe o que é que é o valor de retorno da lista, né? A gente não definiu. Esse caso aqui vai ser, o quê? Deixa eu botar o mouse aqui. Está, function lista, por é a entrada, props, do tipo, lista props, com a saída, está dizendo, implicitamente, que é JSS element, tá? Você pode definir explicitamente também. Vamos dizer aqui, JSS.element, um valor de retorno. Agora, desde tentar fazer o seguinte, você tem a lista, né? E retorna JSS element, mas em vez de retornar isso, você retorna uma spring, ele vai pegar e ver que você fez um erro. Está. Se fosse um array. Number não pode dar valor. Ok. Se fosse um array de welles. Tipo, array de element não pode, porque element só pode ser um. Mas se eu tivesse definido assim, com array de vários JSS element, ele é aceitado. Sem problema. Que agora a lista retorna um array de JSS element. Mas nós, o que a gente quer? A gente quer só a tone 1, então vamos reverter. Está bom. Vamos falar aqui agora de children, como já tinha falado mais. Vamos supor que essa lista pegue aqui e ponha props.children antes dos elives. Vamos passar o children aqui. Vamos supor que vai ser o título, sei lá, um item extra. Lá no começo da URL. Eu poderia até remover is e botar uma div aqui, na verdade. E dentro dessa div, você adicionaria um título como props ou children, qualquer coisa pra por antes da lista, sei lá. Agora, ele está reclamando porque não existe children na lista props, você quer adicionar. Children, JSS.element. Se você quiser, que as children for well-metre of cheese. Mas se eu quiser que for só um string, vai ver o que vai acontecer. Vamos lá. Vai ver o que vai acontecer. Vamos lá. Vai lá em cima, quem está usando as listas, o app. Aqui eu vou abrir a lista, você não acha que já está reclamando? Porque está... esperou o children, não tem. Então children lá, você não acha que é obrigatório. Você pode fazer isso, é opcional. Se você for derrubar essa manquina. Mas eu vou fazer obrigatório. Só agora, se não está reclamando, então vamos adicionar. Abrir a lista. Aqui estão os itens. Vamos ver no que dá. Note que adicionou a questão itens antes da lista, dentro da própria lista. Isso é só o texto. Bem, o que acontece se eu passar outra coisa? Não for... Por exemplo, em vez de vai ser um span, ou até um H1. Vai reclamar. Por que? Porque eu passei um elemento como children, em vez de string. O lista próprio só aceita children do tipo string. Então vamos lá no lista, se você quiser corrigir isso, Jpsts.element como o tipo de children para o lista próprio. Agora é H1. Bem, obviamente como um modelo tipo, se eu reverter isso e for string, não vai deixar. Vamos ver. Deu eu. Se eu quiser os dois, você poderia usar o que chama de união. Vai na lista, children pode ser ou pode ser Jpsts.element ou pode ser string. Como é que faz isso? Faz a união. A união é você usa o pipe. Cano, né? string. Então o children pode ser um elemento ou pode ser um string. Dessa maneira, ele vai aceitar dois tipos. A união. Agora funciona. Tanto como node de texto como elemento H1. Ou qualquer outro Jpsts.element. Agora vamos falar de esse children ser opcional. Se eu não quiser ter children Se eu quiser remover isso. Tá reclamando. Como é que faz pra consertar eu já tinha feito antes. É só ir lá no lista e fazer o children ser opcional. Adiciona o sinal de interrogação. children interrogação children interrogação opcional não precisa passar. Agora porque tá reclamando? Provavelmente porque eu tenho que fechar dessa maneira aqui. Sonou? Se eu tirar o interrogação tá erro aqui. Vou reverter. Não tem erro. Posso adicionar qualquer coisa. Funciona. Sem título. Também funciona. Legal. E aí? Como é que faz classe e estado? Até na próxima aula.