把你的 React 项目升级到 TypeScript-JavaScript中文网-JavaScript教程资源分享门户

如果你正在使用 React，那么你应该考虑将你的项目升级到 TypeScript。TypeScript 是一种面向对象的编程语言，它扩展了 JavaScript，并添加了静态类型、类、接口和模块等功能。

TypeScript 可以帮助你在开发过程中避免一些常见的错误，并提高代码的可读性和可维护性。本文将介绍如何将 React 项目升级到 TypeScript，并提供一些示例代码和实用的指导意义。

准备工作

在开始之前，你需要确保你的开发环境中已经安装了 TypeScript 和相应的工具。如果你使用 create-react-app 创建项目，可以通过以下命令安装 TypeScript：

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

在安装完 TypeScript 后，你需要将你的文件后缀名从 .js 改为 .tsx，这样 TypeScript 就能识别它们并为你提供代码提示和类型检查等功能。

类型定义

TypeScript 最重要的功能之一是类型定义。类型定义能够帮助你在编写代码时避免一些常见的错误。

例如，在使用 React 的过程中，你可能会在函数中传递一个错误的类型的属性：

function MyComponent({ name }) {
  return <div>{name}</div>;
}

ReactDOM.render(<MyComponent age={25} />, document.getElementById("root"));

在这个例子中，我们向 MyComponent 传递了一个 age 属性，但是 MyComponent 中并没有接收 age 属性。这样会导致一个运行时错误。

但是如果我们使用 TypeScript，我们就可以为 MyComponent 添加类型定义：

// javascriptcn.com 代码示例
interface Props {
  name: string;
}

function MyComponent({ name }: Props) {
  return <div>{name}</div>;
}

ReactDOM.render(<MyComponent age={25} />, document.getElementById("root"));

这样，当我们尝试向 MyComponent 传递错误的属性时，TypeScript 就会在编译时提示错误。

接口

另一个非常有用的 TypeScript 功能是接口。接口可以定义对象的结构，并强制对象符合特定的结构。在使用 React 进行开发时，你经常需要定义一些复杂的组件状态和属性。

例如，我们可以为一个简单的 TodoList 应用程序定义以下接口：

interface TodoListProps {
  todos: Array<{
    text: string;
    completed: boolean;
  }>;
  addTodo: (text: string) => void;
}

这个接口定义了一个包含 todos 和 addTodo 属性的对象，其中 todos 属性是一个包含 text 和 completed 字段的数组。addTodo 函数接受一个 text 参数，然后不返回任何内容。我们可以将这个接口与一个 React 组件结合使用：

// javascriptcn.com 代码示例
function TodoList({ todos, addTodo }: TodoListProps) {
  const [text, setText] = React.useState("");

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault();
    addTodo(text);
    setText("");
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input value={text} onChange={(event) => setText(event.target.value)} />
        <button type="submit">Add Todo</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.text}>
            {todo.completed ? <s>{todo.text}</s> : todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

类型导出

你可能已经注意到，在上面的例子中，我们为 TodoListProps 接口添加了类型定义。但是，我们没有把它导出，所以其他组件无法使用它。

要导出一个类型，我们可以使用 TypeScript 的 export 关键字：

export interface TodoListProps {
  todos: Array<{
    text: string;
    completed: boolean;
  }>;
  addTodo: (text: string) => void;
}

然后，我们就可以在其他文件中导入这个类型：

// javascriptcn.com 代码示例
import { TodoListProps } from "./TodoList";

function App() {
  const [todos, setTodos] = React.useState([]);

  function addTodo(text: string) {
    setTodos([...todos, { text, completed: false }]);
  }

  return (
    <div>
      <h1>Todo List</h1>
      <TodoList todos={todos} addTodo={addTodo} />
    </div>
  );
}

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

泛型

有时，你可能需要定义一个可以接收不同类型参数的函数或组件。在这种情况下，你可以使用 TypeScript 的泛型。

例如，我们可以创建一个通用的 Button 组件，该组件可以接受一个泛型参数 T，该参数表示按钮的类型：

// javascriptcn.com 代码示例
interface ButtonProps<T> {
  children: React.ReactNode;
  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
  disabled?: boolean;
  type?: T;
}

function Button<T>({ children, onClick, disabled, type }: ButtonProps<T>) {
  return (
    <button onClick={onClick} disabled={disabled} type={type}>
      {children}
    </button>
  );
}

在这个例子中，Button 组件接受一个泛型参数 T，并在 type 属性中使用它。然后我们可以创建一个普通按钮和一个提交按钮：

// javascriptcn.com 代码示例
function App() {
  function handleClick() {
    alert("Button clicked!");
  }

  return (
    <div>
      <Button onClick={handleClick}>Normal Button</Button>
      <Button onClick={handleClick} type="submit">
        Submit Button
      </Button>
    </div>
  );
}

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

总结

在本文中，我们介绍了如何将 React 项目升级到 TypeScript，并讨论了 TypeScript 的一些重要功能，如类型定义、接口、类型导出和泛型。我们提供了一些示例代码和实用的指导意义，希望能让你在使用 TypeScript 时变得更加自信和有成效。

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