Como tipar o useState do React com TypeScript

Neste artigo você aprenderá a como tipar o useState do React, utilizando o superset de JavaScript: o TypeScript!

Fala programador(a), beleza? Bora aprender mais sobre React JS!

TypeScript trouxe ao mundo JavaScript uma dimensão adicional: a tipagem estática.

E com a popularização do React, era apenas uma questão de tempo até essas duas poderosas ferramentas convergirem.

Uma área em que vemos essa intersecção é ao usar hooks, especificamente o useState, no React com TypeScript.

Neste artigo, vamos explorar como você pode tipar com precisão o hook useState do React ao trabalhar com TypeScript, permitindo que você tire o máximo proveito de ambos.

Por que tipar o useState?

O TypeScript é um superconjunto do JavaScript que permite a adição de tipos. Isso pode parecer um pouco desnecessário no início, mas quando sua aplicação cresce, os benefícios se tornam inestimáveis.

Com a tipagem, você pode evitar muitos erros em tempo de compilação que, de outra forma, só seriam detectados em tempo de execução.

Ao usar o useState com TypeScript, você está essencialmente fornecendo ao compilador informações sobre o tipo de estado que você está tentando gerenciar.

Isso garante que você não tente, acidentalmente, atualizar o estado com um tipo de dado incompatível.

Começando com a tipagem básica

Vamos começar com um exemplo simples para demonstrar a tipagem básica do useState.

Exemplo:

import React, { useState } from 'react';

const MeuComponente: React.FC = () => {
  const [contador, setContador] = useState<number>(0);

  return (
    <div>
      <p>O contador está em: {contador}</p>
      <button onClick={() => setContador(contador + 1)}>Incrementar</button>
    </div>
  );
}

Neste exemplo, estamos usando o useState para gerenciar um contador. Explicitamente declaramos que o estado deve ser do tipo number ao usar <number>.

Lidando com objetos complexos

Na prática, você pode encontrar situações em que o estado que está gerenciando não é tão simples quanto um número ou uma string. Pode ser um objeto com várias propriedades. Vejamos como tipar isso.

Exemplo:

import React, { useState } from 'react';

interface Usuario {
  nome: string;
  idade: number;
}

const MeuComponente: React.FC = () => {
  const [usuario, setUsuario] = useState<Usuario>({ nome: 'João', idade: 30 });

  return (
    <div>
      <p>{usuario.nome} tem {usuario.idade} anos de idade.</p>
    </div>
  );
}

Aqui, definimos uma interface Usuario e informamos ao useState que ele deve esperar um estado que se ajuste à forma desta interface.

Lidando com estados que podem ser nulos ou indefinidos

Em alguns casos, você pode ter um estado que começa como nulo ou indefinido e depois é preenchido. TypeScript tem você coberto aqui também.

Exemplo:

import React, { useState } from 'react';

const MeuComponente: React.FC = () => {
  const [nome, setNome] = useState<string | null>(null);

  return (
    <div>
      {nome ? <p>Olá, {nome}!</p> : <p>Nome não fornecido.</p>}
    </div>
  );
}

Usando o operador |, informamos ao TypeScript que o estado pode ser uma string ou nulo.

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Com a crescente popularidade do TypeScript no desenvolvimento React, é vital que os desenvolvedores entendam como tipar corretamente seus estados para obter o máximo dos benefícios que ambos oferecem.

O hook useState, sendo uma parte fundamental do React, é um excelente ponto de partida para mergulhar no mundo da tipagem no React com TypeScript.

Se você ainda não está usando TypeScript com React, esperamos que este guia sirva como um incentivo para começar.

A segurança e clareza adicionais que você obtém ao tipar seus estados e props farão uma diferença significativa à medida que sua aplicação cresce e se torna mais complexa.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.