JavaScript é uma linguagem de programação fracamente tipada. Por causa disso, é muito brando, e os erros de programação provavelmente passarão despercebidos durante o desenvolvimento. TypeScript, uma biblioteca de verificação de tipos JavaScript, resolve esse problema impondo tipos em valores. Este artigo ensinará como criar um projeto React com TypeScript.
Criando um projeto React com TypeScript
O comando create-react-app permite que você crie projetos Typescript usando o --modelo opção.
Para criar um novo projeto React com o TypeScript, execute o seguinte comando:
npx crio-react-app app-nome--template texto datilografado
Este comando cria um novo projeto React e TypeScript do zero. Você também pode adicionar TypeScript a um aplicativo React existente.
Para fazer isso, navegue até o projeto ao qual deseja adicionar o TypeScript e execute o seguinte código:
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Em seguida, troque a extensão de arquivo .js por .tsx para os arquivos que deseja converter para TypeScript. Depois de fazer isso, você obterá o "
React se refere a um UMD global, mas o arquivo atual é um módulo.” erro. Você pode resolvê-lo importando o React em cada arquivo datilografado como este:importar Reagir a partir de "reagir"
Como uma solução mais direta, crie um tsconfig.json e defina jsx para react-jsx.
{
"Opções do compilador": {
"jsx": "react-jsx",
"alvo": "es6",
"módulo": "próximo",
},
}
Você pode encontrar todas as definições de configuração do Documentos TypeScript.
Criando um componente de função React no TypeScript
Você define um componente de função React da mesma forma que uma função JavaScript.
Abaixo está um exemplo de um componente de função chamado Greetings.
exportarpredefiniçãofunçãoSaudações() {
Retorna (
<div>Olá Mundo</div>
)
}
Este componente retorna uma string “Hello world” e o TypeScript infere seu tipo de retorno. No entanto, você pode anotar seu tipo de retorno:
exportarpredefiniçãofunçãoSaudações(): JSX.Elemento{
Retorna (
<div>Olá Mundo</div>
)
}
O TypeScript lançará um erro se o componente Greetings retornar um valor que não seja um JSX.element.
Usando React Props com TypeScript
O React permite que você crie componentes reutilizáveis por meio de adereços. Por exemplo, o componente Greetings pode receber um name prop de forma que o valor de retorno seja personalizado com base nele.
Abaixo está o componente editado com um nome como prop. Observe a declaração de tipo embutido.
funçãoSaudações({nome}: {nome: string}) {
Retorna (
<div>Olá {nome}</div>
)
}
Se passar o nome “Jane”, o componente retornará a mensagem “Hello Jane”.
Em vez de escrever a declaração de tipo na função, você pode defini-la externamente assim:
modelo SaudaçõesProps = {
nome: cadeia;
};
Em seguida, passe o tipo definido para o componente da seguinte forma:
funçãoSaudações({name}: Adereços de Saudações) {
Retorna (
<div>Olá {nome}</div>
)
}
Use a palavra-chave interface se estiver exportando esse tipo e quiser estendê-lo:
exportar interfaceAdereços de saudação{
nome: cadeia;
};
Observe a diferença de sintaxe entre tipo e interface — a interface não possui um sinal de igual.
Você pode estender uma interface usando o seguinte código:
importar { Saudações } a partir de './Saudações'
interfaceWelcomePropsestendeAdereços de saudação{
Tempo: "corda"
}
Você pode então usar a interface estendida em outro componente.
funçãoBem-vindo({nome, hora}: WelcomeProps) {
Retorna (
<div>
Bom {time}, {name}!
</div>
)
}
Use o "?" símbolo com sua interface de adereços para definir adereços opcionais. Aqui está um exemplo de uma interface com um prop name opcional.
interfaceAdereços de saudação{
nome?: string;
};
Se você não passar um name prop, o TypeScript não lançará nenhum erro.
Usando React State com TypeScript
Em JavaScript simples, você define o gancho useState() do seguinte modo:
const [NomeCliente, setNomeCliente] = useState("");
Neste exemplo, o TypeScript pode inferir facilmente o tipo de firstName como uma string porque o valor padrão é uma string.
No entanto, às vezes você não pode inicializar o estado para um valor definido. Nesses casos, você deve fornecer um tipo de valor de estado.
Aqui estão alguns exemplos de como definir tipos no gancho useState().
const [customerName, setCustomerName] = useState<corda>("");
const [idade, setAge] = useState<número>(0);
const [isSubscribed, setIsSubscribed] = useState<boleano>(falso);
Você também pode usar uma interface no gancho useState(). Por exemplo, você pode reescrever o exemplo acima para usar uma interface mostrada abaixo.
interfaceICliente{
nomedocliente: string;
idade: número;
estáAssinado: boleano ;
}
Use a interface personalizada no gancho assim:
const [cliente, setCustomer] = useState<ICliente>({
nome do cliente: "Jane",
idade: 10,
estáAssinado: falso
});
Usando eventos com TypeScript
Os eventos são essenciais, pois permitem que os usuários interajam com uma página da web. No TypeScript, você pode digitar eventos ou manipuladores de eventos.
Para demonstrar, considere o seguinte componente Login usando os eventos onClick() e onChange().
importar { useEstado } a partir de 'reagir';
exportarpredefiniçãofunçãoConecte-se() {
const [email, setEmail] = useState('');const handleChange = (evento) => {
setEmail(evento.alvo.valor);
};const handleClick = (evento) => {
console.log('Submetido!');
};
Retorna (
<div>
<tipo de entrada ="o email" value={email} onChange={handleChange} />
<botão ao clicar={() => handleClick}>Enviar</button>
</div>
);
}
É assim que você lidaria com eventos em JavaScript simples. O TypeScript, no entanto, espera que você defina o tipo de parâmetro de evento nas funções do manipulador de eventos. Felizmente, o React fornece vários tipos de eventos.
Por exemplo, use o tipo changeEvent para o manipulador de eventos handleChange().
importar { ChangeEvent, useState } a partir de 'reagir';
const handleChange = (evento: ChangeEvent<HTMLInputElement>) => {
setEmail(evento.alvo.valor);
};
O tipo changeEvent é usado para alterar os valores dos elementos input, select e textarea. É um tipo genérico que significa que você deve passar o elemento DOM cujo valor muda. Neste exemplo, você passou o elemento input.
O exemplo acima demonstra como digitar o evento. O código abaixo mostra como você pode digitar o manipulador de eventos.
importar { ChangeEventHandler, useState } a partir de 'reagir';
const handleChange: ChangeEventHandler<HTMLInputElement> = (evento) => {
setEmail(evento.alvo.valor);
};
Para o evento handleClick(), use o MouseEvent().
importar { useState, MouseEvent } a partir de 'reagir';
const handleClick = (evento: MouseEvent) => {
console.log('Submetido!');
};
Novamente, você pode anexar o tipo ao próprio manipulador de eventos.
importar { useState, MouseEventHandler } a partir de 'reagir';
const handleClick: MouseEventHandler = (evento) => {
console.log('Submetido!');
};
Para outros tipos de eventos, confira o Folha de dicas do React TypeScript.
Se você estiver criando formulários grandes, é melhor use uma biblioteca de formulários como Formik, pois é construído com TypeScript.
Por que você deve usar o TypeScript?
Você pode instruir um novo projeto React a usar o TypeScript ou converter um existente. Você também pode usar TypeScript com componentes de função React, estado e eventos React.
Digitar componentes React às vezes pode parecer escrever código clichê desnecessário. No entanto, quanto mais você usá-lo, mais apreciará sua capacidade de detectar erros antes de implantar seu código.