TypeScript 与 React 结合：构建可扩展和可维护应用程序的最佳实践

TypeScript 和 React 是构建现代 Web 应用程序的强大组合。TypeScript 为 JavaScript 带来了静态类型，提高了代码质量和可维护性，而 React 则提供了一种声明式、基于组件的方法来构建用户界面。本博文探讨了将 TypeScript 与 React 结合使用的最佳实践，以创建适用于全球受众的稳健、可扩展和可维护的应用程序。

为什么在 React 中使用 TypeScript？

在深入探讨最佳实践之前，让我们先了解为什么 TypeScript 是 React 开发中的一个宝贵补充：

提高代码质量：TypeScript 的静态类型有助于在开发过程的早期捕获错误，减少运行时问题并提高代码的可靠性。
增强可维护性：类型注解和接口使代码更易于理解和重构，从而实现更好的长期可维护性。
更好的 IDE 支持：TypeScript 提供出色的 IDE 支持，包括自动补全、代码导航和重构工具，从而提高开发人员的生产力。
减少 Bug：静态类型可以在运行前捕获许多常见的 JavaScript 错误，从而使应用程序更稳定、Bug 更少。
改善协作：清晰的类型定义使团队更容易在大型项目上协作，因为开发人员可以快速理解不同组件和函数的用途和用法。

设置 TypeScript React 项目

使用 Create React App

开始一个新的 TypeScript React 项目最简单的方法是使用带有 TypeScript 模板的 Create React App：

npx create-react-app my-typescript-react-app --template typescript

此命令会设置一个配置好 TypeScript 的基本 React 项目，包括必要的依赖项和一个 tsconfig.json 文件。

配置 `tsconfig.json`

tsconfig.json 文件是 TypeScript 配置的核心。以下是一些推荐的设置：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

需要考虑的关键选项：

"strict": true：启用严格的类型检查，强烈建议使用此选项来捕获潜在错误。
"esModuleInterop": true：启用 CommonJS 和 ES 模块之间的互操作性。
"jsx": "react-jsx"：启用新的 JSX 转换，它简化了 React 代码并提高了性能。

使用 TypeScript 的 React 组件最佳实践

为组件 Props 添加类型

将 TypeScript 与 React 结合使用最重要的方面之一是为组件的 props 正确添加类型。使用接口或类型别名来定义 props 对象的形状。

interface MyComponentProps {
  name: string;
  age?: number; // 可选 prop
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    
      你好, {name}!
      {age && 你今年 {age} 岁。}
      
    
  );
};

使用 React.FC<MyComponentProps> 确保该组件是一个函数式组件，并且其 props 被正确类型化。

为组件 State 添加类型

如果你正在使用类组件，你还需要为组件的 state 添加类型。为 state 对象定义一个接口或类型别名，并在组件定义中使用它。

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      
        计数: {this.state.count}
        
      
    );
  }
}

对于使用 useState hook 的函数式组件，TypeScript 通常可以推断出 state 变量的类型，但你也可以显式提供它：

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    
      计数: {count}
      
    
  );
};

使用类型守卫

类型守卫是一种函数，它可以在特定作用域内缩小变量的类型。当处理联合类型或在执行操作前需要确保变量具有特定类型时，它们非常有用。

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  }
}

isCircle 函数是一个类型守卫，它检查一个 Shape 是否为 Circle。在 if 代码块内，TypeScript 知道 shape 是一个 Circle，并允许你访问其 radius 属性。

处理事件

在 React 中使用 TypeScript 处理事件时，正确地为事件对象添加类型非常重要。使用 React 命名空间中适当的事件类型。

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

在这个例子中，React.ChangeEvent<HTMLInputElement> 用于为一个 input 元素的 change 事件的事件对象添加类型。这提供了对 target 属性的访问，该属性是一个 HTMLInputElement。

项目结构

一个结构良好的项目对于可维护性和可扩展性至关重要。以下是针对 TypeScript React 应用程序建议的项目结构：

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

关键点：

Components：将相关组件分组到目录中。每个目录应包含组件的 TypeScript 文件、CSS 模块（如果使用）以及一个用于导出组件的 index.ts 文件。
Pages：存储代表应用程序不同页面的顶级组件。
Services：在此目录中实现 API 调用和其他服务。
Types：在此目录中定义全局类型定义和接口。
Utils：存储辅助函数和常量。
index.ts：使用 index.ts 文件从目录中重新导出模块，为导入模块提供一个干净、有组织的 API。

在 TypeScript 中使用 Hooks

React Hooks 允许你在函数式组件中使用 state 和其他 React 功能。TypeScript 与 Hooks 无缝协作，提供类型安全和更好的开发者体验。

`useState`

如前所示，你可以在使用 useState 时显式地为 state 变量添加类型：

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    
      计数: {count}
      
    
  );
};

`useEffect`

使用 useEffect 时，请注意依赖数组。如果你忘记包含在 effect 中使用的依赖项，TypeScript 可以帮助你捕获错误。

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `计数: ${count}`;
  }, [count]); // 将 'count' 添加到依赖数组中

  return (
    
      计数: {count}
      
    
  );
};

如果你从依赖数组中省略 count，effect 将只在组件挂载时运行一次，并且当计数更改时，文档标题不会更新。TypeScript 会警告你这个潜在问题。

`useContext`

使用 useContext 时，你需要为 context 的值提供一个类型。

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // 在此处实现主题逻辑
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    
      主题: {theme}
      
    
  );
};

export { ThemeProvider, MyComponent };

通过为 context 的值提供类型，你可以确保 useContext hook 返回一个具有正确类型的值。

测试 TypeScript React 组件

测试是构建稳健应用程序的重要组成部分。TypeScript 通过提供类型安全和改进的代码覆盖率来增强测试。

单元测试

使用像 Jest 和 React Testing Library 这样的测试框架来对你的组件进行单元测试。

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component with the correct name', () => {
    render();
    expect(screen.getByText('你好, John!')).toBeInTheDocument();
  });

  it('calls the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

TypeScript 的类型检查有助于在测试中捕获错误，例如传递不正确的 props 或使用错误的事件处理程序。

集成测试

集成测试验证应用程序的不同部分是否能正确协同工作。使用像 Cypress 或 Playwright 这样的工具进行端到端测试。

性能优化

TypeScript 也可以通过在开发过程的早期捕获潜在的性能瓶颈来帮助进行性能优化。

记忆化 (Memoization)

使用 React.memo 来记忆化函数式组件，防止不必要的重新渲染。

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Rendering MyComponent');
  return (
    你好, {name}!
  );
};

export default React.memo(MyComponent);

只有当 props 发生变化时，React.memo 才会重新渲染组件。这可以显著提高性能，特别是对于复杂的组件。

代码分割

使用动态导入将你的代码分割成更小的块，并按需加载。这可以减少应用程序的初始加载时间。

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    正在加载...

React.lazy 允许你动态导入组件，这些组件只在需要时才会被加载。Suspense 组件在组件加载时提供一个后备 UI。

结论

将 TypeScript 与 React 结合使用可以显著提高 Web 应用程序的质量、可维护性和可扩展性。通过遵循这些最佳实践，你可以利用 TypeScript 的强大功能来构建满足全球受众需求的稳健且高性能的应用程序。请记住，要专注于清晰的类型定义、结构良好的项目组织和彻底的测试，以确保项目的长期成功。

MLOG

TypeScript 与 React 结合：构建可扩展和可维护应用程序的最佳实践

为什么在 React 中使用 TypeScript？

设置 TypeScript React 项目

使用 Create React App

配置 `tsconfig.json`

使用 TypeScript 的 React 组件最佳实践

为组件 Props 添加类型

为组件 State 添加类型

使用类型守卫

处理事件

项目结构

在 TypeScript 中使用 Hooks

`useState`

`useEffect`

`useContext`

测试 TypeScript React 组件

单元测试

集成测试

性能优化

记忆化 (Memoization)

代码分割

结论

更多资源

TypeScript 与 React 结合：构建可扩展和可维护应用程序的最佳实践

为什么在 React 中使用 TypeScript？

设置 TypeScript React 项目

使用 Create React App

配置 tsconfig.json

使用 TypeScript 的 React 组件最佳实践

为组件 Props 添加类型

为组件 State 添加类型

使用类型守卫

处理事件

项目结构

在 TypeScript 中使用 Hooks

useState

useEffect

useContext

测试 TypeScript React 组件

单元测试

集成测试

性能优化

记忆化 (Memoization)

代码分割

结论

更多资源

配置 `tsconfig.json`

`useState`

`useEffect`

`useContext`