Resumão Typescript + React

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

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) {
  return (
    <div>
      <p>Nome: {props.nome}</p>
      <p>Idade: {props.idade}</p>
    </div>
  );
}

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