1
resposta

Typescript - Conta

Criei um fork a partir do repo e adicionei typescript, nesse commit estamos pareados com essa aula. https://github.com/rivailJunior/1976-react-testes/pull/2/commits/3d682c223fa241745fd7552218d34451b5068b86

Qeum quiser modifcar, basta dar um fork e mandar um pr. TMJ!

1 resposta

Oi Rivail!

Muito obrigado pelas sugestões e parabéns por estar aplicando o Typescript neste curso de React!

Tenho algumas sugestões pra te fazer:

  • remova o "i" antes dos types, entendo que você deve ter pegado essa ideia de outras linguagens como C# e Java que utilizam esse padrão para interfaces, mas ele não é utilizado no typescript com frequência.
  • modifique o "iRealizarTransacao" para
    type RealizarTransacaoArgs = {
      transacao: string;
      valor: number;
      data: string;
    }

e utilize como

type ContaProps = {
    saldo: number;
    realizarTransacao?: (args: RealizarTransacaoArgs) => void
}
  • crie um type para Valores e implemente ele no useState

    type Valor = {
      transacao: string;
      valor: number
    }
    // ...
    const [valores, atualizarValores] = useState<Valor>({ transacao: '', valor: 0 });

    Desta forma somente objetos que seguem o type Valorpodem ser atribuídos à variavel valores e usados como parâmetro em atualizarValores

  • Já que está usando o typescript, evite usar any e identifique os events corretamente para conseguir benefícios como o intellisense

      function handleSubmit(e: FormEvent<HTMLFormElement>) {
          // ...
      }
      // ou
    
    function handleSubmit(e: SyntheticEvent) {
          // ...
      }

    creio que é necessário importar FormEvent ou SyntheticEvent do React.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui! :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software