Как переделать этот код под TypeScript?

Question

[Тест Тестов]

Как оптимизировать данный код под TypeScript, чтобы он не ругался? Все работает, но хочется сделать все правильно..

import React, { FC, createContext, useState } from 'react'

interface ContextProviderInterface {
	children: JSX.Element
}

export const Context = createContext(null)

export const ContextProvider: FC<ContextProviderInterface> = ({ children }) => {
	const [sidebarIsOpen, setSidebarIsOpen] = useState(true)

	const toggleSidebar = () => {
		setSidebarIsOpen(sidebarIsOpen => !sidebarIsOpen)
	}

	return (
		<Context.Provider value={{ sidebarIsOpen, toggleSidebar }}>
			{children}
		</Context.Provider>
	)
}

Comments

[Farkl]

так ты посмотри на что ругается

[webjun]

А какую ошибку выдает ?

Answer 1

[Aetae]

TS тебе предельно понятно написал в чём проблема. Учись читать ошибки.

Конкретнее же: у тебя не задан тип значения которое может принимать контекст, а выведено самим TS - null(потому что именно такое значение по умолчанию ты передал).

export const Context = createContext<{
  sidebarIsOpen: boolean;
  toggleSidebar: (value: boolean) => void;
} | null>(null)

или лучше

export const Context = createContext({
  sidebarIsOpen: false,
  toggleSidebar: () => {}
});