通过 TypeScript 整合 React 和 Redux-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，React 和 Redux 经常被使用来构建 web 应用。然而，在大型项目中，为了保证代码的可维护性和可测试性，我们需要使用 TypeScript 来强化代码。本文将介绍如何整合 TypeScript、React、Redux，并为大家提供示例代码。

什么是 TypeScript？

TypeScript 是一种开源的编程语言，它是 JavaScript 的一个超集，意味着任何有效的 JavaScript 代码也可以是 TypeScript 代码。TypeScript 为 JavaScript 提供了静态类型、类、模块等特性，这使得 TypeScript 代码更加结构化和易于维护。

React 和 TypeScript

在 React 中使用 TypeScript 最常见的方式是使用 TypeScript 转换器（TypeScript Transform），它将 TypeScript 代码转换为 JavaScript 代码。这样，我们就可以在 React 中使用 TypeScript 中的所有特性了。

另外，React 提供了一些 TypeScript 接口，如 React.FC interface，这使得 TypeScript 的类型检查可以适用于 React 组件的 Props 和 State。

下面是一个使用 TypeScript 开发的 React 组件示例：

// javascriptcn.com 代码示例
import React from 'react';

type Props = {
  name: string;
};

const Greeting: React.FC<Props> = ({name}) => {
  return (
    <div>
      <h1>Hello, {name}!</h1>
    </div>
  );
};

export default Greeting;

在上面的代码中，使用了tsc对类型进行验证，以确保每个组件都具有正确的类型。

Redux 和 TypeScript

Redux 是一个流行的状态管理库，它用于管理 React 应用程序的状态。与 React 一样，Redux 也可以整合 TypeScript，以提高可维护性和代码的可读性。

为了在 Redux 中使用 TypeScript，我们需要使用类型化的 action 和 state。下面是一个使用 TypeScript 开发的 Redux store 的示例：

// javascriptcn.com 代码示例
import { createStore } from 'redux';

type Todo = {
    id: number,
    text: string
}

type AppState = {
    todos: Todo[]
}

type AddTodoAction = {
    type: 'ADD_TODO',
    payload: {
        text: string
    }
}

const initialState: AppState = {
  todos: []
};

const todoReducer = (state: AppState = initialState, action: AddTodoAction): AppState => {
  switch (action.type) {
    case 'ADD_TODO': {
      const { text } = action.payload;
      const newTodo = {
        id: state.todos.length + 1,
        text
      };
      const todos = [...state.todos, newTodo];
      return { ...state, todos };
    }
    default:
      return state;
  }
};

const store = createStore(todoReducer);

export default store;

在上面的代码中，我们定义了 AppState 和 AddTodoAction 的类型，并在 todoReducer 中进行了类型检查。这样，在编写代码时可以获得代码提示，并且在编译时可以检测到错误。

整合 TypeScript、React 和 Redux

为了将 TypeScript、React 和 Redux 结合起来，我们需要安装@types/react-redux和@types/redux依赖。这些依赖提供了类型化的 React 和 Redux 的接口。

下面是使用 TypeScript 开发的 React 和 Redux 结合的应用程序：

// javascriptcn.com 代码示例
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { AppState } from './store';
import { addTodo } from './store/actions';

type Props = {};

const TodoList: React.FC<Props> = () => {
  const todos = useSelector((state: AppState) => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => {
    const text = prompt('Enter todo item');

    if (text) {
      dispatch(addTodo(text));
    }
  };

  return (
    <div>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={handleAddTodo}>Add todo</button>
    </div>
  );
};

export default TodoList;

在上面的代码中，我们使用useSelector和useDispatch钩子来获取和更改 Redux store 中的状态。我们还为addTodo操作创建了一个类型化的 action。

总结

在本文中，我们了解了如何将 TypeScript、React 和 Redux 结合起来。我们学习了如何在 React 中使用 TypeScript、如何在 Redux 中使用 TypeScript，并展示了一个整合了 TypeScript、React 和 Redux 的示例应用程序。这些技能对于构建大型、可维护的 web 应用程序非常有用，希望可以对你有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528cae27d4982a6ebb58fc5