Introducción al uso de TypeScript en React

TypeScript, un superconjunto de JavaScript, sin duda tiene algunos beneficios asombrosos: escritura estática, clases, interfaces e intellisense mejorado que pueden hacer sugerencias más sólidas para el autocompletado y manejar posibles errores antes de compilar. Eso significa que su editor de código no solo hará sugerencias más inteligentes para autocompletar, sino que también le mostrará errores en ese mismo momento, en lugar de tener que descubrir que algo no funciona correctamente cuando cambia a su navegador.

Hay algunas cosas que debe tener en cuenta al comenzar con TypeScript en React:

1. Empezando con create-react-app y TypeScript:

Si está iniciando un proyecto NUEVO usando create-react-app:

npx create-react-app [your app's name] --template typescript

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

Ahora que estamos usando TypeScript en react, utilizará la extensión de archivo .tsx en lugar del .js estándar para JavaScript.

Las otras cosas que verá son un tsconfig.json que tiene algunos valores predeterminados para la configuración de TypeScript, y el react-app-env.d.ts, que hace referencia a los tipos de react-scripts y ayuda con cosas como permitir SVG Importaciones.

3. Componentes e importaciones:

Debido a la forma en que las cosas se escriben estáticamente en TS, necesitamos hacer un par de cosas adicionales al configurar nuestros componentes. Deberá importar algunas cosas adicionales en la parte superior de cada componente (* o puede usar React. <> Donde <> es el tipo o evento que de otra manera importaría).

Algunas cosas comunes que me he encontrado importando además de algunos de los enlaces de reacción habituales como useState y useEffect, son ChangeEvent y FC (componente funcional): ¡el autocompletado con TS es AGRADABLE al importar cosas!

import React, { useState, ChangeEvent, FC } from "react";

Lo último en lo que nos centraremos hoy son las definiciones de tipos simples. Una de las principales funciones de TypeScript es el conocimiento documentado de los tipos que estamos usando y dónde cambiarlos, y la detección temprana automática para evitar errores y errores.

Hay varias formas de declarar un tipo. Uno de ellos es utilizar una interfaz:

export interface Props {   
   name: string;   
   age: number;
}

Tome nota de algunas definiciones de tipo:

1. 'App: FC' que está definiendo nuestra App como un componente funcional.
2. 'useState <string> ()' que declara esa parte del estado como una cadena. También puede hacer esto dando a useState una cadena vacía: useState ('')
3. 'event: ChangeEvent <HTMLInputElement>' que declara qué tipo de evento se acepta en la función onSearchInput.

Saludos, ¡volveré pronto con más!