使用 TypeScript 构建现代化 React & Redux 应用

2023-11-10 14:40:45

为什么选择 TypeScript？

TypeScript 是 JavaScript 的超集，它可以帮助您在 JavaScript 的基础上添加类型。类型可以帮助您在代码中捕获错误，并使您的代码更具可读性和可维护性。

安装 TypeScript

要安装 TypeScript，您需要使用 npm 包管理器。如果您还没有安装 npm，请先安装它。然后，您可以使用以下命令安装 TypeScript：

npm install -g typescript

创建 TypeScript 项目

要创建一个 TypeScript 项目，您需要创建一个新的目录，并创建一个名为 tsconfig.json 的文件。tsconfig.json 文件包含 TypeScript 编译器设置。

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "experimentalDecorators": true
  }
}

编写 TypeScript 代码

TypeScript 代码与 JavaScript 代码非常相似。但是，您需要在变量和函数上添加类型。例如，以下代码定义了一个名为 name 的字符串变量：

let name: string = "John";

编译 TypeScript 代码

要编译 TypeScript 代码，您可以使用 TypeScript 编译器。TypeScript 编译器将把您的 TypeScript 代码编译成 JavaScript 代码。

tsc

运行 JavaScript 代码

要运行 JavaScript 代码，您可以使用 Node.js。Node.js 是一个 JavaScript 运行时环境。

node index.js

使用 TypeScript 构建 React 应用

要使用 TypeScript 构建 React 应用，您需要安装一些必要的库。这些库包括：

React
React DOM
TypeScript

您可以在您的项目目录中使用以下命令安装这些库：

npm install --save react react-dom typescript

创建一个 React 应用

要创建一个 React 应用，您需要创建一个新的目录，并创建一个名为 index.tsx 的文件。index.tsx 文件是一个 TypeScript 文件，其中包含您的 React 代码。

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello, World!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

运行 React 应用

要运行 React 应用，您需要使用以下命令启动一个开发服务器：

npm start

使用 TypeScript 构建 Redux 应用

要使用 TypeScript 构建 Redux 应用，您需要安装一些必要的库。这些库包括：

Redux
React-Redux
TypeScript

您可以在您的项目目录中使用以下命令安装这些库：

npm install --save redux react-redux typescript

创建一个 Redux 应用

要创建一个 Redux 应用，您需要创建一个新的目录，并创建一个名为 store.ts 的文件。store.ts 文件是一个 TypeScript 文件，其中包含您的 Redux store。

import { createStore } from "redux";

const initialState = {
  count: 0
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "INCREMENT":
      return {
        ...state,
        count: state.count + 1
      };
    case "DECREMENT":
      return {
        ...state,
        count: state.count - 1
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

创建一个 Redux 容器

要创建一个 Redux 容器，您需要创建一个新的目录，并创建一个名为 Counter.tsx 的文件。Counter.tsx 文件是一个 TypeScript 文件，其中包含您的 Redux 容器。

import React from "react";
import { connect } from "react-redux";

const Counter = ({ count, increment, decrement }) => {
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    count: state.count
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "INCREMENT" }),
    decrement: () => dispatch({ type: "DECREMENT" })
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);