Как создать createContext в ReacJS TypeScript

Question

Создаю провайдер в котором хочу подключить Апи сервис и потом в любом месте я мог вызвать нужный метод через useContext. В чистом EcmaScript все работает отлично, но в TypeScript не работает.

import { createContext } from 'react'
import { ApiService, IService } from '../services/ApiService'

export const ApiSerivceContext = createContext()

export const ApiServiceProvider: React.FC = ({ children }) => {

    const api = new ApiService()

    return (
        <ApiSerivceContext.Provider value={api}>
            {children}
        </ApiSerivceContext.Provider>
    )
}

Вот так я создаю контекст, но когда вызываю его в файле App.js контекст пустой. C reducer понятно как делать. Нужно сделать type, потом initialState. но как быть с сервисом, где методы и параметры будут увеличиваться?

Answer 1

import { createContext } from 'react'
import { ApiService, IService } from '../services/ApiService'

export const ApiSerivceContext = createContext<ApiService | null>(null)

export const ApiServiceProvider: React.FC = ({ children }) => {

    const api = new ApiService()

    return (
        <ApiSerivceContext.Provider value={api}>
            {children}
        </ApiSerivceContext.Provider>
    )
}

Answer 2

если правильно понял возможно динамически указать например как интерфейс и этот интерфейс можно применить к обекту с бесконечным количеством ключей естественно если тип совпадает

interface IAp {
[key:type]:type
}

Answer 3

Оказывается нужно было вот таким образом передать класс.

import { createContext } from 'react'
import { ApiService, IService } from '../services/ApiService'

export const ApiSerivceContext = createContext<IService>(new ApiService() )

export const ApiServiceProvider: React.FC = ({ children }) => {

    const api = new ApiService()

    return (
        <ApiSerivceContext.Provider value={api}>
            {children}
        </ApiSerivceContext.Provider>
    )
}

БЛОГ НА HUSL

Как создать createContext в ReacJS TypeScript

Ответы (3 шт):