Olá pessoal estamos de volta com mais uma aula. Na cidadona nós vamos ver como se faz o componente de classe no react com type script, vamos ver como definitamente é fácil para o estado do componente Vou fazer aqui o seguinte, um contador, tem um botão você clica e o número vai aumentar Vamos criar aqui um novo arquivo, contador.testx Clasta contador Agora deixa eu portar o react aqui, se não vai reclamar Como estou usando o classe a gente sempre tem o extend, react.component Mas agora está no type script, então como é que vai fazer isso? Vou dar o render aqui, vou dar o return Vou colocar o div só para dizer contador E vamos fazer já já Bem eu vou exportar isso aqui na mesma hora Quando você usa o type script aqui, normalmente quando você pega o cnote que o react opona quando você deriva da classe, normalmente a gente passa como aqui desses genéricos A gente passa, você tem p, note que a gente tem p, s e os outros ali O p vai ser do props, o s vai ser do state Então a primeira interface que a gente vai passar dentro desses assinados de men e mais Vai ser o props e o segundo vai ser o state Serão interfaces que a gente vai definir para este componente Você pode nomear de qualquer maneira Qualquer nome vai ter que definir E vou definir interface para props e descomponente e interface para o estado desse componente No estado a gente vai manter o contador, a contagem, o número Então vamos ver aqui Então é o seguinte, para o render retorno J, X, L, remember? É o título explícito O render aqui você pode quiser para até definir com public Só adiciona um tipo Class e tal e tal, contador Agora vamos supor que a gente queira acessar o estado do componente Des, mont state e o número né Sei lá, chamar de Contagem Agora como é que a gente está reclamando? Propriedade e contagem não existe no tipo read only state O estado é um tipo de read only Vamos definir então, na interface do state Como segundo, parâmetro desse seu form aqui Você vai definir a interface para o estado do componente Contagem vai ser o número, só isso Pronto Legal, mas qual é o valor desse número né Então se dá pra gente fazer a iniciação do state Né Pode fazer o seguinte Static Contagem zero Opa, não tem Conta e viva Então o estado inicial vai ser Contagem zero Não tem a uso da propriedade static Então esse cara vai Obedecer a interface state Se não tivesse isso Sei lá, será que era reclamaria? Então, está meio esquisito Mas se eu botasse tipo state Não sei, vamos ver se funciona mesmo Que eu não sei, que está configurado para Permitir se usa Vamos lá Contador e tal e tal Não tem props Vai no app Antes da lista ou depois da interface Contador e vou dar um import Contador Contador Vamos ver aqui Ah, deu erro Desse ponto state é no Ah Não Bem, não está funcionando essa maneira static Talvez eu não tenho transformador, mas deixa assim mesmo Vou falar no constructor mesmo Então vou pegar isso aqui Constructor Props Super props Porque estamos derivando o react component Esses props, ou tem Plistamente, any type Esse props vai ser props Tipo do props que a gente definiu aqui No caso, não tem nada E desse ponto state Vai ser o digital inicial Que a gente já tinha definido aqui Eu estou curioso por Outra maneira Deixa eu ver react Aqui Docs Até Cadê o state State State State State State State O look em space O look O look Estou curioso se tivesse o static Parece que tem que ter o transform Eu não me lembro muito bem Já usei Tem que ter o transform, eu deixo como é o exercício Se você quiser aquela Notação Qualquer maneira, vamos voltar Está bem State Vou ver se o state está errado Se eu passar algo que não tem nada a ver Que foi definido na interface state Estado Contagem Não pode associar O tipo vira um state Então ele realmente checou o tipo Ele viu que não tinha essa propriedade No state, se eu tivesse adicionado Stream Ele iria funcionar Mas como a gente não tem Ele está reglamando Está certo Então, vamos ver Agora vamos suger o botão Botão Está Um click Botão Botão Um click Um click Um click Um click Um click Um click Um click Um click Um click Um botão Um botão Um click Um click Não existe Olha que ele já está reclamando Que essa função não existe No tipo contador Defini Um click Um click Um click Eu acho que não vai retornar na mental void E não pega nada Com parâmetro No click Ele vai dar o vset state Contagem Vai incrementar D state, contagem, mais um Eu quero te mostrar também Se eu passasse outra coisa aqui no set state Ele iria reclamar também Ele não vai deixar Mas se você realmente tivesse Aqui Novo Estado Às vezes a gente tem esse problema De você Tiver, por exemplo Hum Você tem o state Contagem Vamos dizer que tem nome, ABC E aqui no Novo Estado Você só tem a A propriedade Vamos ver aqui Vamos ver aqui Só adicionar um nome aqui Só de ler, só para ter Uma propriedade extra no estado Então o estado tem duas propriedades Nome e Contagem Eu queria te mostrar Às vezes a gente não tem Todo o estado na hora de dar o set state Ah Vamos ver aqui Não reclamou aqui Interessante Já tinha Fico qualquer maneira novo estado Set state Novo Estado Normalmente ele iria Ver aqui, por exemplo, se A variável fosse tipo state Ele iria reclamar Eu quero mostrar aqui A maneira de usar a palavra chave as Quando você faz a acerção De tipo Para dizer para o compilador Eu sei, esse tipo aqui vai ser esse tipo Por exemplo, aqui Se eu disser Esse tipo aqui vai ser do tipo state Eu tenho certeza Agora eu não posso usar Dessa maneira aqui Por causa do JSS Quando você tiver em arquivos TSS Devido ao JSS ter Conflito com essa notação De acerção de tipo Para você dizer o compilador Eu sei que o tipo desse objeto Vai ser por favor interpretar esse tipo Dessa objeto como tipo Da interface state Não dá para usar essa Notação, então tem que fazer outra notação Chamada as Estate Isso que eu queria mostrar Quando você estiver usando com TSS Tem que usar a notação alternativa Do state Porque não pode usar outra com O state por causa de conflito com JSS Então eu vou ver daqui Então você vai dizer Compilador, eu sei Interpreta o seu objeto Vai ser interpretado como state Não reclame Se não tiver algo Até a ter um negócio Vamos ver se funciona aqui Quer ver Mesmo sim Ele está até inteligente que ele já note Que o set state não precisa ter Todas as propriedades Eu me lembro que Atingamente às vezes dá problema Que ele não sabia Que o set state pode passar Só Do state Em vez de todo o state Agora parece que já está Melhor Deixa você ver a versão do TSS Eu nem sei qual é Ta no react script Type script versão 3.7.5 3.7.5 Certo Não precisa disso Mas é só para mostrar O S state Certo com montagem Contagem mais um e tal Vamos clicar Vamos ver Voltando aqui Contador Ah, ah Vez ainda definido Ah, tem que dar o bind Pode usar no curso do toro Para a função com o som de flash Vou fazer aqui this Onclick This Onclick bind Faltando aqui Dois, três, quatro, cinco Seis Ah, certo So, masked Pedido Vamos mexer bewusst Engenho fik Z da É de um eres um contagem inicial, você pode checar aqui contagem inicial, não for definida ou não, né? Se você for passar a zero, eu poderia fazer isso aqui, props, contagem inicial. Mas se fosse zero, você nota que ele ia, se eu fosse indefinido, qualquer valor falso, né? Falso e ia bater lá de volta para o zero, mas em qualquer maneira, 1, 2, 3, 4, 5, 6, seria pegava esse valor aqui, então adicionei na props, pode ter ou não, então pode ser que esse valor seja, não seja passado, nesse caso, iria ter, por quadrão, ser zero, contado zero, voltando aqui no led de texto, voltando no app, contador, contagem inicial, eu muto 10, tomando aqui, ele é bater lá no checar, então é fácil, certo, contagem inicial, passou como um number, correto, vamos pegar aqui no estado de sinal, você está a proposta contagem inicial, está com 10, 11, 12, 13, vamos fazer uma coisa errada para ver se reclama, se eu passasse um string, acidentalmente, string com valor 10, ele ia reclamar, tipo string não pode ser associada ao tipo união de número ou indefinido, note que quando você pôs o sinal de interrogação lá, ele determinou o tipo, como fosse a união, união de número e undefinado, pode ser número, pode ser undefinado, não passei como próprio, o que acontece se fosse no? Não, também não funcionaria porque a união não inclui no, interessante, hein, eu passasse um array, um, dois, três, a array de número não é o nosso alceio ao tipo número, ok, certo então, então vou deixar um 10 como número, adonde que o app nem tenha check de tipo, né, vamos ver qual é o tipo empliste, jsx element, legal, então jsx element, empliste, então vamos revisar o que a gente fez aqui, criamos essa componente de classe chamado contador que estende de react component, como a gente usa o TypeScript nós podemos adicionar o check das propostas de state, para poder fazer isso adicionando esse sinal de menor, sinal de maior, tem dois parâmetros, você pode passar aqui, o primeiro é o P, segundo é o S, e tem outros que a gente pode ver aí, esse próprio, mas o primeiro P é o props, você pode passar uma interface, normalmente a gente define interface aqui, e o state é o segundo, você também define outra interface, a primeira vai ser a interface para as props que o componente pode receber, a segunda vai ser o state que é o estado do componente, o componente mantém o estado para armazenar contagem e o nome, o nome só usei para demonstrar ali outras coisas, mas nem precisou, então não construtou aqui, a gente sete o estado inicial, pega de props, a contagem inicial se tiver ou não, foi opcional. Fizemos o barro do click para poder funcionar direito, vou falar a verdade, você definida corretamente na função com click, a gente usa os dois, na hora de que a gente fez o novo estado set state com a contagem mais um, eu demonstrei o uso do as state aqui, só para dizer que você não pode usar a maneira notação de bracket, devido a conflitos com o JST, aqui a opção render retorna tipo JST.element, fiz o contador, state contagem e o botão, só para incrementar só isso mesmo, mas o principal que era aprender como adicionar, definir a interface do state dessa maneira aqui. Por essa aula é só e até a próxima.