React & TypeScript: избегайте значения контекста по умолчанию

Question

Чтобы лучше изучить React, TypeScript и Context / Hooks, я делаю простое приложение для Todo. Однако код, необходимый для создания контекста, кажется громоздким.

Например, если я хочу изменить то, что имеет Todo, я должен изменить его в трех местах (интерфейс ITodo, значение контекста по умолчанию, значение состояния по умолчанию ). Если я хочу передать что-то новое, я должен сделать это в трех местах (TodoContext, значение по умолчанию TodoContext и значение =). Есть ли лучший способ не писать столько кода?

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

Невозможно избежать объявления интерфейса и значений времени выполнения, потому что тип TS исчезает во время выполнения, поэтому у вас остаются только значения времени выполнения. Вы не можете сгенерировать одно из другого.

Однако, если вы знаете, что когда-либо получите доступ к контексту только внутри компонента TodoContextProvider, вы можете избежать инициализации TodoContext, немного обманув и просто обманув сообщая TS, что то, что вы передаете, это нормально.

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

Если вы всегда обращаетесь только к контексту внутри TodoContextProvider, где todos и setTodos создаются с useState тогда вы можете безопасно пропустить инициализацию TodoContext внутри createContext, потому что это начальное значение никогда не будет доступно.