Siga estes passos para criar um novo projeto com Typescript e React utilizando Vite.
-
Criar o projeto
npm create vite@latest
Siga os passos escolhendo o nome do projeto e selecionando a opção
React
e posteriormenteTypescript
ouTypescript + SWC
. -
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" }
-
Executar o projeto
npm run dev
-
Fim 🎉
// 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
// 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
// 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);
}
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} />
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>
);
}