返回
创建于
状态
公开

在 React 项目中高效使用 TypeScript 的实用技巧

在现代前端开发中，React 和 TypeScript 的结合已经成为构建高质量、可维护代码的标准选择。TypeScript 提供的静态类型检查功能能在开发阶段捕获潜在错误，提升团队协作效率。本文总结了一些在 React 项目中使用 TypeScript 的技巧，并关联相关知识点，帮助开发者更好地应用这些工具。

1. 枚举类型的键和值的类型获取

TypeScript 提供了灵活的方式获取枚举的键和值类型，这在类型约束中十分有用。

获取键的类型

通过 keyof 关键字，可以获取枚举的键的类型：

typescript
1enum MyEnum {
2  Key1 = 'Value1',
3  Key2 = 'Value2',
4  Key3 = 'Value3',
5}
6
7type MyEnumKeys = keyof typeof MyEnum;
8// MyEnumKeys 的类型为 "Key1" | "Key2" | "Key3"

获取值的类型

通过索引访问类型，可以获取枚举值的类型：

typescript
1type MyEnumValues = MyEnum[keyof typeof MyEnum];
2// MyEnumValues 的类型为 "Value1" | "Value2" | "Value3"

这种方式常用于约束接口或函数的参数类型。

2. 将 JSX 或组件作为 Props 传递

在 React 中，允许传递 JSX 或组件作为 Props，以增强组件的灵活性。

JSX 作为 Props

通过定义 Props 类型为 React.ReactNode，可以传递任意合法的 JSX 内容：

typescript
1interface LayoutProps {
2  nav: React.ReactNode;
3  children: React.ReactNode;
4}
5
6const Layout: React.FC<LayoutProps> = ({ nav, children }) => (
7  <>
8    <nav>{nav}</nav>
9    <main>{children}</main>
10  </>
11);
12
13// 使用示例
14<Layout nav={<h1>My Site</h1>}>
15  <div>Hello!</div>
16</Layout>;

组件作为 Props

使用 React.ComponentType，可以将整个组件作为 Prop 传递：

typescript
1interface RowProps {
2  icon: React.ComponentType<{ className?: string }>;
3}
4
5const Row: React.FC<RowProps> = ({ icon: Icon }) => (
6  <div>
7    <Icon className="h-8 w-8" />
8  </div>
9);
10
11// 使用示例
12<Row icon={UserIcon} />;

这种方式特别适合需要动态渲染图标或 UI 组件的场景。

3. 使用 satisfies 运算符

satisfies 是 TypeScript 4.9 引入的新特性，用于在不丢失值类型推断的情况下添加类型注解。

强类型化 URLSearchParams

在构造 URLSearchParams 时，通常需要传入松散的 Record<string, string> 类型对象。satisfies 可以确保传入对象满足更精确的类型：

typescript
1type GHIssueURLParams = {
2  title: string;
3  body: string;
4};
5
6const params = new URLSearchParams({
7  title: "New Issue",
8} satisfies GHIssueURLParams);
9// 错误：缺少 'body' 属性

强类型化 POST 请求

在发送 HTTP 请求时，通过 satisfies 限定请求体类型，可以减少因数据结构不匹配导致的错误：

typescript
1type Post = {
2  title: string;
3  content: string;
4};
5
6fetch("/api/posts", {
7  method: "POST",
8  body: JSON.stringify({
9    title: "New Post",
10    content: "Lorem ipsum.",
11  } satisfies Post),
12});

4. 模板字面量类型的灵活应用

模板字面量类型可以动态构建新的类型定义，在复杂业务场景中非常实用。

动态属性名生成

以下示例通过模板字面量类型动态生成 Getter 函数的类型：

typescript
1type Event = 'click' | 'focus' | 'hover';
2type EventHandler = `on${Capitalize<Event>}Handler`;
3
4// 结果类型为 'onClickHandler' | 'onFocusHandler' | 'onHoverHandler'

结合映射类型实现键重映射

通过模板字面量类型和映射类型，可以对对象键名进行重命名：

typescript
1type User = {
2  name: string;
3  age: number;
4};
5
6type UserGetters = {
7  [K in keyof User as `get${Capitalize<string & K>}`]: () => User[K];
8};
9
10// 结果类型为
11// {
12//   getName: () => string;
13//   getAge: () => number;
14// }

5. React-Router 中的 useParams 类型定义

在使用 React Router 的 useParams 钩子时，明确定义参数类型可以避免不必要的类型断言：

typescript
1import { useParams } from "react-router-dom";
2
3type RouteParams = {
4  id: string;
5};
6
7const Component = () => {
8  const { id } = useParams<RouteParams>();
9  return <div>ID: {id}</div>;
10};

6. 类型缩小的多种方法

类型缩小（Type Narrowing）通过条件语句，将联合类型缩小为具体类型，确保类型安全。

使用 typeof

typescript
1function double(input: string | number) {
2  if (typeof input === "string") {
3    return input.repeat(2);
4  }
5  return input * 2;
6}

使用 in

通过检查特定属性的存在，可以区分对象类型：

typescript
1type Movie = { title: string; runtime: number };
2type Series = { title: string; episodes: number[] };
3
4function getDuration(media: Movie | Series) {
5  if ("runtime" in media) {
6    return media.runtime;
7  }
8  return media.episodes.length;
9}

使用类型谓词

自定义类型谓词函数可用于高效过滤数组：

typescript
1function isString(value: any): value is string {
2  return typeof value === "string";
3}
4
5const items: (string | number)[] = [1, "a", 2, "b"];
6const strings = items.filter(isString); // 类型为 string[]

7. Array 与 T[] 的选择

在 TypeScript 中，Array<T> 和 T[] 功能相同，但 Array<T> 在多维数组和 keyof 操作中更有优势：

typescript
1const matrix: Array<Array<number>> = [
2  [1, 2],
3  [3, 4],
4];

通过合理运用上述 TypeScript 技巧，可以显著提升 React 项目的开发体验、代码安全性和可维护性。随着 TypeScript 的不断发展，其与 React 的结合将进一步优化前端开发工作流。