JavaScript es un lenguaje de programación débilmente tipado. Debido a esto, es muy indulgente y es probable que los errores de programación pasen desapercibidos durante el desarrollo. TypeScript, una biblioteca de verificación de tipos de JavaScript, resuelve este problema imponiendo tipos en los valores. Este artículo le enseñará cómo crear un proyecto React con TypeScript.
Creación de un proyecto React con TypeScript
El comando create-react-app le permite crear proyectos Typescript usando el --modelo opción.
A crear un nuevo proyecto React con TypeScript, ejecute el siguiente comando:
npx crear-aplicación reaccionar-aplicación-nombre--plantilla mecanografiada
Este comando crea un nuevo proyecto de React y TypeScript desde cero. También puede agregar TypeScript a una aplicación React existente.
Para hacerlo, navegue hasta el proyecto al que desea agregar TypeScript y ejecute el siguiente código:
npm install --save mecanografiado @tipos/node @tipos/react @tipos/react-dom @tipos/jest
Luego cambie la extensión de archivo .js con .tsx para los archivos que desea convertir a TypeScript. Una vez que hagas esto, obtendrás el "
React se refiere a un UMD global, pero el archivo actual es un módulo. error. Puede resolverlo importando React en cada archivo mecanografiado como este:importar Reaccionar de "reaccionar"
Como una solución más sencilla, cree un tsconfig.json y configure jsx para reaccionar-jsx.
{
"opciones del compilador": {
"jsx": "reaccionar-jsx",
"objetivo": "es6",
"módulo": "siguiente",
},
}
Puede encontrar todos los ajustes de configuración en el Documentos de TypeScript.
Creación de un componente de función React en TypeScript
Usted define un componente de función de React de la misma manera que una función de JavaScript.
A continuación se muestra un ejemplo de un componente de función denominado Saludos.
exportardefectofunciónSaludos() {
devolver (
<división>Hola Mundo</div>
)
}
Este componente devuelve una cadena "Hola mundo" y TypeScript infiere su tipo de retorno. Sin embargo, puede anotar su tipo de retorno:
exportardefectofunciónSaludos(): JSX.Elemento{
devolver (
<división>Hola Mundo</div>
)
}
TypeScript generará un error si el componente Saludos devuelve un valor que no es un elemento JSX.
Usando React Props con TypeScript
React te permite crear componentes reutilizables a través de accesorios. Por ejemplo, el componente Saludos puede recibir una propiedad de nombre de modo que el valor devuelto se personalice en función de él.
A continuación se muestra el componente editado con un nombre como accesorio. Observe la declaración de tipo en línea.
funciónSaludos({nombre}: {nombre: cadena}) {
devolver (
<división>Hola {nombre}</div>
)
}
Si pasa el nombre "Jane", el componente devolverá el mensaje "Hola Jane".
En lugar de escribir la declaración de tipo en la función, puede definirla externamente de esta manera:
escribe SaludosAccesorios = {
nombre: cadena;
};
Luego pase el tipo definido al componente de la siguiente manera:
funciónSaludos({name}: SaludosAccesorios) {
devolver (
<división>Hola {nombre}</div>
)
}
Use la palabra clave de interfaz si está exportando este tipo y desea extenderlo:
exportar interfazSaludosAccesorios{
nombre: cadena;
};
Tenga en cuenta la diferencia de sintaxis entre tipo e interfaz: la interfaz no tiene un signo igual.
Puede extender una interfaz usando el siguiente código:
importar {Accesorios de saludos} de './Saludos'
interfazBienvenidaAccesoriosextiendeSaludosAccesorios{
tiempo: "cuerda"
}
A continuación, puede utilizar la interfaz ampliada en otro componente.
funciónBienvenidos({nombre, hora}: accesorios de bienvenida) {
devolver (
<división>
¡Buen {tiempo}, {nombre}!
</div>
)
}
Utilizar el "?" símbolo con su interfaz de accesorios para definir accesorios opcionales. Aquí hay un ejemplo de una interfaz con un accesorio de nombre opcional.
interfazSaludosAccesorios{
nombre?: cadena;
};
Si no pasa un accesorio de nombre, TypeScript no arrojará ningún error.
Usando React State con TypeScript
En JavaScript simple, usted define el gancho useState() como sigue:
const [nombreCliente, establecerNombreCliente] = usarEstado("");
En este ejemplo, TypeScript puede deducir fácilmente el tipo de firstName como una cadena porque el valor predeterminado es una cadena.
Sin embargo, a veces no puede inicializar el estado a un valor definido. En estos casos, debe dar un tipo de valor de estado.
Estos son algunos ejemplos de cómo definir tipos en el gancho useState().
const [nombreCliente, establecerNombreCliente] = estadoUso<cuerda>("");
const [edad, establecerEdad] = estadoUso<número>(0);
constante [isSubscribed, setIsSubscribed] = useState<booleano>(falso);
También puede usar una interfaz en el gancho useState(). Por ejemplo, puede reescribir el ejemplo anterior para usar una interfaz que se muestra a continuación.
interfazICliente{
nombre del cliente: cadena;
edad: numero ;
está suscrito: booleano ;
}
Use la interfaz personalizada en el enlace de esta manera:
const [cliente, establecerCliente] = useState<ICliente>({
Nombre del cliente: "jane",
edad: 10,
está suscrito: falso
});
Uso de eventos con TypeScript
Los eventos son esenciales ya que permiten a los usuarios interactuar con una página web. En TypeScript, puede escribir eventos o los controladores de eventos.
Para demostrarlo, considere el siguiente componente de inicio de sesión usando los eventos onClick() y onChange().
importar { estado de uso } de 'reaccionar';
exportardefectofunciónAcceso() {
const [email, setEmail] = useState('');constante handleChange = (evento) => {
establecer correo electrónico(evento.objetivo.valor);
};constante handleClick = (evento) => {
consola.log('¡Presentada!');
};
devolver (
<división>
<tipo de entrada ="Email" value={correo electrónico} onChange={handleChange} />
<botón onClick={() => handleClick}>Enviar</button>
</div>
);
}
Así es como manejaría los eventos en JavaScript simple. Sin embargo, TypeScript espera que defina el tipo de parámetro de evento en las funciones del controlador de eventos. Afortunadamente, React proporciona varios tipos de eventos.
Por ejemplo, utilice el tipo changeEvent para el controlador de eventos handleChange().
importar { ChangeEvent, useState } de 'reaccionar';
const handleChange = (evento: ChangeEvent<HTMLInputElement>) => {
establecer correo electrónico(evento.objetivo.valor);
};
El tipo changeEvent se usa para cambiar los valores de los elementos input, select y textarea. Es un tipo genérico, lo que significa que debe pasar el elemento DOM cuyo valor cambia. En este ejemplo, pasó el elemento de entrada.
El ejemplo anterior muestra cómo escribir el evento. El siguiente código muestra cómo puede escribir el controlador de eventos en su lugar.
importar { ChangeEventHandler, useState } de 'reaccionar';
const handleChange: ChangeEventHandler<HTMLInputElement> = (evento) => {
establecer correo electrónico(evento.objetivo.valor);
};
Para el evento handleClick(), use MouseEvent().
importar { Estado de uso, Evento del ratón } de 'reaccionar';
constante handleClick = (evento: MouseEvent) => {
consola.log('¡Presentada!');
};
Una vez más, puede adjuntar el tipo al propio controlador de eventos.
importar { useState, MouseEventHandler } de 'reaccionar';
constante handleClick: MouseEventHandler = (evento) => {
consola.log('¡Presentada!');
};
Para otros tipos de eventos, consulte el Hoja de trucos de React TypeScript.
Si está creando formularios grandes, es mejor use una biblioteca de formularios como Formik, ya que está construido con TypeScript.
¿Por qué debería usar TypeScript?
Puede indicarle a un nuevo proyecto de React que use TypeScript o que convierta uno existente. También puede usar TypeScript con componentes de función React, estado y eventos React.
Escribir componentes de React a veces puede parecer como escribir código repetitivo innecesario. Sin embargo, cuanto más lo use, más apreciará su capacidad para detectar errores antes de implementar su código.
