reactjs - react 和 typescript : Avoid context default value

Question

为了更好地学习 React、TypeScript 和 Context/Hooks，我正在制作一个简单的 Todo 应用程序。但是，使上下文所需的代码感觉很麻烦。

例如，如果我想更改 Todo 的内容，我必须在三个地方更改它(ITodo 接口(interface)、默认上下文值、默认状态值)。如果我想传递新的东西，我必须在三个地方(TodoContext、TodoContext 的默认值和 value=)。有没有更好的方法不必编写这么多代码？

import React from 'react'

export interface ITodo {
    title: string,
    body?: string,
    id: number,
    completed: boolean
}

interface TodoContext {
    todos: ITodo[],
    setTodos: React.Dispatch<React.SetStateAction<ITodo[]>>
}

export const TodoContext = React.createContext<TodoContext>({
    todos: [{title: 'loading', body: 'loading', id: 0, completed: false}],
    setTodos: () => {}
})

export const TodoContextProvider: React.FC<{}> = (props) => {
    const [todos, setTodos] = React.useState<ITodo[]>([{title: 'loading', body: 'loading', id: 0, completed: false}])

    return (
        <TodoContext.Provider value={{todos, setTodos}}>
            {props.children}
        </TodoContext.Provider>
    )
}

Answer 1

没有办法避免声明接口(interface)和运行时值，因为 TS 的类型在运行时消失，所以你只剩下运行时值。你不能从另一个生成一个。
但是，如果您知道您只会访问 TodoContextProvider 中的上下文。可以避免初始化的组件TodoContext通过作弊一点点，然后告诉 TS 你正在传递的东西很好。

const TodoContext = React.createContext<TodoContext>({} as TodoContext)

如果你总是确保只访问 TodoContextProvider 内部的上下文在哪里 todos和 setTodos使用 useState 创建那么您可以安全地跳过初始化 TodoContext createContext 内部因为该初始值永远不会被实际访问。