Introduction to TypeScript and React

在这篇文章中，我们将使用 TypeScript 和 React 构建一个简单的电影库应用程序。我们将涵盖 TypeScript 的基础知识，包括类型、接口和类型约束，并学习如何在 React 应用程序中应用它们。

Setting Up the Project

首先，我们使用命令 npm create react-app movie-library --template typescript 创建一个新的 React 项目。这将设置一个带有 TypeScript 配置的基本 React 项目。

Understanding TypeScript

TypeScript 是 JavaScript 的超集，它添加了可选的静态类型和其他特性，以改善开发体验。它有助于在编译时捕捉错误，使代码更容易维护和重写。

Creating Interfaces

在 TypeScript 中，接口用于定义对象的结构。我们为电影对象创建一个接口，其中包含 id、title、rating 和 genre 属性。

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

Using Interfaces in React Components

我们可以在 React 组件中使用这些接口，以确保传递给组件的 props 符合预期的结构。例如，在我们的 MovieCard 组件中，可以使用 Movie 接口定义 props 类型。

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  // 组件实现
};

Implementing Search Functionality

为了实现搜索功能，我们创建了一个 SearchBar 组件，该组件接受一个 query 字符串作为 prop。我们使用 useState 钩子来存储查询，并在用户在搜索栏中输入内容时更新它。

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

我们可以使用类型保护来缩小特定作用域内的值的类型。例如，我们可以创建一个类型保护来检查值是否为 Movie 对象。

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

Conclusion

在本文中，我们涵盖了 TypeScript 的基础知识以及如何在 React 应用程序中应用它。我们还实现了搜索功能，并使用类型保护来缩小值的类型。通过使用 TypeScript，可以使我们的代码更易于维护和自我文档化，并在编译时而不是运行时捕捉错误。

Introduction to TypeScript and React

Setting Up the Project

Creating Interfaces

Using Interfaces in React Components

Implementing Search Functionality

Using Type Guards

Conclusion