typescript.md

Typescript + React

Criando e configurando um novo projeto

Siga estes passos para criar um novo projeto com Typescript e React utilizando Vite.

1. Criar o projeto

   npm create vite@latest

   Siga os passos escolhendo o nome do projeto e selecionando a opção React e posteriormente Typescript ou Typescript + SWC.

2. Configurar LINT da Trybe

   npm install -D @trybe/eslint-config-frontend

   Exclua o arquivo eslintrc.cjs criado pelo Vite e crie o arquivo .eslintrc.json na raiz do projeto com o seguinte conteúdo:

   {
     "extends": "@trybe/eslint-config-frontend/typescript"
   }

3. Executar o projeto

   npm run dev

4. Fim 🎉

Typescript

Tipagem de variáveis

// Tipagem de variáveis
let nome: string;
let idade: number;
let adulto: boolean;

// Tipagem por inferência (igual no JS)
let nome = 'Tryber';
let idade = 30;
let adulto = true;

Tipagem de funções

// Tipagem de funções

// Função recebe dois números e retorna um número
function soma(a: number, b: number): number {
  return a + b;
}

// Função recebe duas strings e retorna uma string concatenada
function concatena(a: string, b: string): string {
  return `${a}${b}`;
}

// Função recebe um número e retorna um boolean
function maiorQueDez(numero: number): boolean {
  return numero > 10;
}

Criando os próprios tipos

// Criando os próprios tipos

// Tipo para um objeto
type Pessoa = {
  nome: string;
  idade: number;
  adulto: boolean;
};

// Tipo para um array
type Pessoas = Array<Pessoa>;
// ou
type Pessoas = Pessoa[];
// ou para tipos primitivos
type Idades = Array<number>;
type Idades = number[];
type Nomes = Array<string>;
type Nomes = string[];

// Usando um tipo criado
const pessoa: Pessoa = {
  nome: 'Tryber',
  idade: 30,
  adulto: true,
};

// Em uma função
function imprimePessoa(pessoa: Pessoa) {
  console.log(pessoa.nome);
  console.log(pessoa.idade);
  console.log(pessoa.adulto);
}

Typescript em React

Tipagem de props

Obs: Não é necessário utilizar o pacote PropTypes.

// Tipo para as propriedades do componente
type Props = {
  nome: string;
  idade: number;
};

function Pessoa(props: Props) {
  const { nome, idade } = props;

  return (
    <div>
      <p>Nome: {nome}</p>
      <p>Idade: {idade}</p>
    </div>
  );
}

// Usando o componente
<Pessoa nome="Tryber" idade={30} />

Tipagem de eventos

Eventos de mudança em inputs:

React.ChangeEvent<HTMLInputElement>

Na prática:

function NameInput() {
  const [fullName, setFullName] = useState('');
  
  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFullName(e.target.value);
  };

  return (
    <input
      type="text"
      name="fullName"
      onChange={ handleChangeName }
      value={ fullName }
    />
  );
}

Submição de formulários:

React.FormEvent<HTMLFormElement>

Na prática:

function NameInput() {
  const [fullName, setFullName] = useState('');
  
  const handleChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFullName(e.target.value);
  };
  
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    
    // ....
  };

  return (
    <form onSubmit={ handleSubmit }>
        <input
          type="text"
          name="fullName"
          onChange={ handleChangeName }
          value={ fullName }
        />
        <button type="submit">Enviar</button>
    </form>
  );
}