TypeScript 和 React 入门
在本文中,我们将通过构建一个简单的电影库应用程序来探索 TypeScript 和 React 的基础。我们将涵盖 TypeScript 的安装、创建新项目以及创建组件、接口和类型。
开始使用 TypeScript 和 React
首先,我们需要使用命令 npm create react-app movie-library --template typescript
创建一个新的 React 项目。这将设置一个带有 TypeScript 支持的新 React 项目。
理解 TypeScript 基础
TypeScript 是 JavaScript 的超集,它增加了可选的静态类型和其他特性,以改善开发体验。它旨在帮助开发人员尽早发现错误并提高代码的可维护性,因此成为大型和复杂应用程序的热门选择。
TypeScript 的一个关键特性是它能够定义接口,接口用于定义对象的形状。我们可以通过接口定义数据的结构,使其更易于使用并减少错误。
创建接口
为了展示接口的工作原理,让我们为电影对象创建一个简单的接口。我们将定义一个名为 Movie
的接口,其中包含 id
、title
、rating
、genre
和 image
属性。
interface Movie {
id: number;
title: string;
rating: number;
genre: string;
image: string;
}
在 React 组件中使用接口
现在我们有了 Movie
接口,可以使用它来定义 React 组件的 props。让我们创建一个 MovieCard
组件,该组件接受一个类型为 Movie
的 movie
prop。
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;
使用 React.FC
在上面的例子中,我们使用了 React.FC
类型来定义 MovieCard
组件。这是一个表示函数组件的泛型类型。FC
代表 "function component"。
创建搜索栏
接下来,让我们创建一个搜索栏组件,使用户可以根据标题或类型搜索电影。我们将定义搜索栏的 props 接口并创建一个接受此 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"
/>
);
};
处理事件
在搜索栏组件中,我们使用 handleSearch
函数处理了输入字段的 onChange
事件。该函数更新 query
状态并使用新查询值调用 onSearch
prop。
Hath Events
TypeScript 提供了一系列事件类型,我们可以使用这些类型来类型化事件处理程序。例如,我们使用 React.ChangeEvent<HTMLInputElement>
类型来类型化 handleSearch
函数。
创建排序函数
让我们创建一个排序函数,按标题、评分或类型对电影进行排序。我们将定义排序选项的接口并创建一个接受此 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;
}
};
结论
在本文中,我们通过构建一个简单的电影库应用程序来介绍了 TypeScript 和 React 的基础。我们创建了接口、组件和类型,并使用它们来定义数据和 props 的结构。我们还处理了事件并使用事件类型来类型化事件处理程序。此外,我们创建了一个按标题、评分或类型对电影进行排序的函数。
Introduction to TypeScript and React
Using Interfaces in React Components
本文展示了 TypeScript 在构建健壮和可维护应用程序方面的强大功能。通过使用接口、组件和类型,我们可以确保代码结构良好且易于理解。此外,处理事件和使用事件类型可以帮助我们编写更高效和有效的代码。