React + Typescript 上下文 - 如何定义接口并使用它？

Question

我正在尝试使用反应上下文，但我不确定如何正确使用 typescript。

interface ITodoContext {
  todos: Todo[] | null;
  currentlyEditingTodoID: number|null;

  editTodo(todo: Todo): () => void
}

export const TodoContext = React.createContext<ITodoContext>({
  todos: null,
  // how do put the editTodo() ? 
});

editTodo方法将 currentEditingTodoID 设置为currentlyEditingTodoID ，如果不是 null，它可能会显示一个模态或其他内容。

但是，我不确定如何正确定义该方法。

Answer 1

定义方法的正确方法是：

  editTodo: (todo: Todo) => void

Answer 2

以下是您应该如何定义您的类型，然后是您的实现：

interface ITodoContext {
  todos: Todo[] | null;
  currentlyEditingTodoID: number | null;
  editTodo: (todo: Todo) => void;
}

export const TodoContext = React.createContext<ITodoContext>({
  todos: null,
  currentlyEditingTodoID: null,
  editTodo(todo) {
    // your implementation of the function
  },
});

您还可以对 function 使用箭头符号：

export const TodoContext = React.createContext<ITodoContext>({
  todos: null,
  currentlyEditingTodoID: null,
  editTodo: (todo) => {
    // your implementation of the function
  },
});