Introduction to TypeScript and React

In this article, we will be building a simple movie library application using TypeScript and React. We will cover the basics of TypeScript, including types, interfaces, and type constraints, and how to apply them in a React application.

Setting Up the Project

To start, we create a new React project using the command npm create react-app movie-library --template typescript. This sets up a basic React project with TypeScript configuration.

Understanding TypeScript

TypeScript is a superset of JavaScript that adds optional static typing and other features to improve the development experience. It helps catch errors at compile-time, making it easier to maintain and refactor code.

Creating Interfaces

In TypeScript, interfaces are used to define the shape of an object. We create an interface for our movie object, which has properties like id, title, rating, and genre.

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

Using Interfaces in React Components

We can use these interfaces in our React components to ensure that the props passed to the component conform to the expected shape. For example, in our MovieCard component, we can define the props type using the Movie interface.

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  // component implementation
};

Implementing Search Functionality

To implement search functionality, we create a SearchBar component that accepts a query string as a prop. We use the useState hook to store the query and update it when the user types something in the search bar.

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

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

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

Using Type Guards

We can use type guards to narrow the type of a value within a specific scope. For example, we can create a type guard to check if a value is a Movie object.

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

Conclusion

In this article, we have covered the basics of TypeScript and how to apply it in a React application. We have also implemented search functionality and used type guards to narrow the type of a value. By using TypeScript, we can make our code more maintainable and self-documenting, and catch errors at compile-time rather than runtime.

Introduction to TypeScript and React