React与TypeScript的优雅结合

前端

2024-01-09 12:20:20

TypeScript和React：打造健壮且易维护的Web应用程序

什么是TypeScript？

TypeScript是一种静态类型的编程语言，它扩展了JavaScript，增加了类型系统和一些其他特性。它允许您为变量、函数和类的属性添加类型注解。这可以帮助编译器检查代码的类型正确性，并防止潜在的错误。

什么是React？

React是一个流行的JavaScript库，用于构建用户界面。它以其组件化、声明式编程风格和高性能而著称。React应用程序由称为组件的可复用部分组成，这些部分可以组合在一起形成复杂的用户界面。

TypeScript与React的结合

TypeScript和React是天作之合，可以帮助您编写更健壮、更易维护的Web应用程序。TypeScript的类型系统可以防止潜在的错误，而React的组件化特性使代码易于组织和重用。

实用示例

让我们看一些使用TypeScript和React的实用示例：

创建React组件：

import React from "react";

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = (props) => {
  return (
    <button onClick={props.onClick}>
      {props.label}
    </button>
  );
};

export default Button;

状态管理：

import React, { useState } from "react";

interface CounterProps {
  initialCount: number;
}

const Counter: React.FC<CounterProps> = (props) => {
  const [count, setCount] = useState(props.initialCount);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>
        Increment
      </button>
    </div>
  );
};

export default Counter;

应用程序逻辑：

import React, { useState } from "react";

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

interface TodoListProps {
  todos: Todo[];
  addTodo: (title: string) => void;
  toggleTodo: (id: number) => void;
}

const TodoList: React.FC<TodoListProps> = (props) => {
  const [todos, setTodos] = useState<Todo[]>([]);

  const addTodo = (title: string) => {
    const newTodo: Todo = {
      id: Date.now(),
      title,
      completed: false,
    };

    setTodos([...todos, newTodo]);
  };

  const toggleTodo = (id: number) => {
    const updatedTodos = todos.map((todo) => {
      if (todo.id === id) {
        todo.completed = !todo.completed;
      }

      return todo;
    });

    setTodos(updatedTodos);
  };

  return (
    <div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id)} />
            <label>{todo.title}</label>
          </li>
        ))}
      </ul>
      <input type="text" placeholder="Add a new todo" onKeyPress={(e) => { if (e.key === "Enter") addTodo(e.target.value) }} />
    </div>
  );
};

export default TodoList;