Introduction to TypeScript and React

In this article, we'll explore the basics of TypeScript and React by building a simple movie library application. We'll cover the installation of TypeScript, setting up a new project, and creating components, interfaces, and types.

Getting Started with TypeScript and React

To start, we need to create a new React project using the command npm create react-app movie-library --template typescript. This will set up a new React project with TypeScript support.

Understanding TypeScript Basics

TypeScript is a superset of JavaScript that adds optional static typing and other features to improve the development experience. It's designed to help developers catch errors early and improve code maintainability, thus making it a popular choice for large and complex applications.

One of the key features of TypeScript is its ability to define interfaces, which are used to define the shape of objects. We can use interfaces to define the structure of our data, making it easier to work with and reducing errors.

Creating Interfaces

To demonstrate how interfaces work, let's create a simple interface for a movie object. We'll define an interface called Movie with properties for id, title, rating, genre, and image.

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

Using Interfaces in React Components

Now that we have our Movie interface, we can use it to define the props of a React component. Let's create a MovieCard component that accepts a movie prop of type 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;

Using React.FC

In the example above, we used the React.FC type to define the MovieCard component. This is a generic type that represents a functional component. The FC stands for "function component".

Creating a Search Bar

Next, let's create a search bar component that allows users to search for movies by title or genre. We'll define an interface for the search bar props and create a new component that accepts this 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"
    />
  );
};

Handling Events

In the search bar component, we handled the onChange event of the input field using the handleSearch function. This function updates the query state and calls the onSearch prop with the new query value.

Using Event Types

TypeScript provides a range of event types that we can use to type our event handlers. For example, we used the React.ChangeEvent<HTMLInputElement> type to type the handleSearch function.

Creating a Sort Function

Let's create a sort function that sorts the movies by title, rating, or genre. We'll define an interface for the sort options and create a new function that accepts this 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;
  }
};

Conclusion

In this article, we covered the basics of TypeScript and React by building a simple movie library application. We created interfaces, components, and types, and used them to define the structure of our data and props. We also handled events and used event types to type our event handlers. Additionally, we created a sort function that sorts the movies by title, rating, or genre.

Introduction to TypeScript and React

What is TypeScript?

Creating Interfaces

Using Interfaces in React Components

Creating a Search Bar

Handling Events

Using Event Types

This article demonstrates the power of TypeScript in building robust and maintainable applications. By using interfaces, components, and types, we can ensure that our code is well-structured and easy to understand. Additionally, handling events and using event types can help us write more efficient and effective code.