Introducción a TypeScript y React

En este artículo, construiremos una sencilla aplicación de biblioteca de películas utilizando TypeScript y React. Cubriremos los conceptos básicos de TypeScript, incluidos los tipos, las interfaces y las restricciones de tipo, y cómo aplicarlos en una aplicación React.

Configuración del Proyecto

Para empezar, creamos un nuevo proyecto React utilizando el comando npm create react-app movie-library --template typescript. Esto configura un proyecto React básico con la configuración de TypeScript.

Entendiendo TypeScript

TypeScript es un superconjunto de JavaScript que añade tipado estático opcional y otras características para mejorar la experiencia de desarrollo. Ayuda a detectar errores en tiempo de compilación, lo que facilita el mantenimiento y la refactorización del código.

Creación de Interfaces

En TypeScript, las interfaces se utilizan para definir la forma de un objeto. Creamos una interfaz para nuestro objeto de película, que tiene propiedades como id, title, rating y genre.

interface Movie {
  id: number;
  title: string;
  rating: number;
  genre: string;
}

Usando Interfaces en Componentes React

Podemos utilizar estas interfaces en nuestros componentes React para asegurarnos de que las props pasadas al componente se ajustan a la forma esperada. Por ejemplo, en nuestro componente MovieCard, podemos definir el tipo de props utilizando la interfaz Movie.

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  // implementación del componente
};

Implementando la Funcionalidad de Búsqueda

Para implementar la funcionalidad de búsqueda, creamos un componente SearchBar que acepta una cadena query como una prop. Utilizamos el hook useState para almacenar la consulta y actualizarla cuando el usuario escribe algo en la barra de búsqueda.

const SearchBar = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  return (
    <input type="search" value={query} onChange={handleSearch} />
  );
};

Usando Type Guards

Podemos usar type guards para restringir el tipo de un valor dentro de un alcance específico. Por ejemplo, podemos crear un type guard para verificar si un valor es un objeto Movie.

function isMovie<T>(value: T): value is Movie {
  return 'id' in value && 'title' in value && 'rating' in value && 'genre' in value;
}

Conclusión

En este artículo, hemos cubierto los conceptos básicos de TypeScript y cómo aplicarlos en una aplicación React. También hemos implementado la funcionalidad de búsqueda y hemos utilizado type guards para restringir el tipo de un valor. Al usar TypeScript, podemos hacer que nuestro código sea más mantenible y autodocumentado, y detectar errores en tiempo de compilación en lugar de en tiempo de ejecución.

Introduction to TypeScript and React