Introducción a TypeScript y React

En este artículo, exploraremos los conceptos básicos de TypeScript y React mediante la creación de una sencilla aplicación de biblioteca de películas. Cubriremos la instalación de TypeScript, la configuración de un nuevo proyecto y la creación de componentes, interfaces y tipos.

Primeros Pasos con TypeScript y React

Para empezar, necesitamos crear un nuevo proyecto de React utilizando el comando npm create react-app movie-library --template typescript. Esto configurará un nuevo proyecto de React con soporte para TypeScript.

Entendiendo los Fundamentos de TypeScript

TypeScript es un superconjunto de JavaScript que añade tipado estático opcional y otras características para mejorar la experiencia de desarrollo. Está diseñado para ayudar a los desarrolladores a detectar errores de forma temprana y mejorar el mantenimiento del código, lo que lo convierte en una opción popular para aplicaciones grandes y complejas.

Una de las características clave de TypeScript es su capacidad para definir interfaces, que se utilizan para definir la forma de los objetos. Podemos usar interfaces para definir la estructura de nuestros datos, facilitando el trabajo con ellos y reduciendo errores.

Creando Interfaces

Para demostrar cómo funcionan las interfaces, creemos una interfaz sencilla para un objeto de película. Definiremos una interfaz llamada Movie con propiedades para id, title, rating, genre e image.

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

Usando Interfaces en Componentes React

Ahora que tenemos nuestra interfaz Movie, podemos usarla para definir las props de un componente React. Creemos un componente MovieCard que acepte una prop movie de tipo Movie.

import React from 'react';

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  return (
    <div>
      <h2>{movie.title}</h2>
      <p>Rating: {movie.rating}</p>
      <p>Genre: {movie.genre}</p>
      <img src={movie.image} alt={movie.title} />
    </div>
  );
};

export default MovieCard;

Usando React.FC

En el ejemplo anterior, utilizamos el tipo React.FC para definir el componente MovieCard. Este es un tipo genérico que representa un componente funcional. El FC significa "function component".

Creando una Barra de Búsqueda

A continuación, creemos un componente de barra de búsqueda que permita a los usuarios buscar películas por título o género. Definiremos una interfaz para las props de la barra de búsqueda y crearemos un nuevo componente que acepte esta prop.

interface SearchBarProps {
  onSearch: (query: string) => void;
}

const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
  const [query, setQuery] = useState('');

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

  return (
    <input
      type="text"
      value={query}
      onChange={handleSearch}
      placeholder="Search for movies"
    />
  );
};

Manejando Eventos

En el componente de la barra de búsqueda, manejamos el evento onChange del campo de entrada usando la función handleSearch. Esta función actualiza el estado query y llama a la prop onSearch con el nuevo valor de la consulta.

Usando Tipos de Evento

TypeScript proporciona una variedad de tipos de evento que podemos usar para escribir nuestros manejadores de eventos. Por ejemplo, usamos el tipo React.ChangeEvent<HTMLInputElement> para escribir la función handleSearch.

Creando una Función de Ordenamiento

Creemos una función de ordenamiento que ordene las películas por título, rating o género. Definiremos una interfaz para las opciones de ordenamiento y crearemos una nueva función que acepte esta prop.

interface SortOptions {
  sort: string;
}

const sortMovies = (movies: Movie[], sort: SortOptions) => {
  switch (sort.sort) {
    case 'title':
      return movies.sort((a, b) => a.title.localeCompare(b.title));
    case 'rating':
      return movies.sort((a, b) => a.rating - b.rating);
    default:
      return movies;
  }
};

Conclusión

En este artículo, cubrimos los conceptos básicos de TypeScript y React mediante la creación de una sencilla aplicación de biblioteca de películas. Creamos interfaces, componentes y tipos, y los usamos para definir la estructura de nuestros datos y props. También manejamos eventos y usamos tipos de evento para escribir nuestros manejadores de eventos. Además, creamos una función de ordenamiento que ordena las películas por título, rating o género.

Introduction to TypeScript and React

What is TypeScript?

Creating Interfaces

Using Interfaces in React Components

Creating a Search Bar

Handling Events

Using Event Types

Este artículo demuestra el poder de TypeScript en la creación de aplicaciones robustas y mantenibles. Al usar interfaces, componentes y tipos, podemos asegurar que nuestro código esté bien estructurado y sea fácil de entender. Además, manejar eventos y usar tipos de evento puede ayudarnos a escribir código más eficiente y efectivo.