reactjs - 'CounterContext' 僅指一種類型，但在此處被用作命名空間

我正在嘗試在 TypeScript 中使用 React Context API，但我遇到了以下錯誤：

'CounterContext' only refers to a type, but is being used as a namespace here.

我正試著透過創建一個自訂 hook 來做到這件事，如下所示：

import React, { createContext, useContext, useState } from 'react';

type CounterContextProviderProps = {
    children: React.ReactNode;
};

type CounterContextType = {
    counter: number;
    setCounter: React.Dispatch<React.SetStateAction<number>>;
};

export const CounterContext = createContext<CounterContextType | null>(null);

const CounterContextProvider = (
    { children }: CounterContextProviderProps
) => {
    const [counter, setCounter] = useState(0);

    return (
        <CounterContext.Provider
            value={{
                counter,
                setCounter
            }}
        >
            {children}
        </CounterContext.Provider>
    );
}

export default CounterContextProvider;

export const useCounterContext = () => {
    const context = useContext(CounterContext);
    if (!context) {
        throw new Error('useCounterContext must be used within a CounterContextProvider');
    }
    return context;
};

我的檔案也已儲存為 .tsx 檔案，而不是 .ts。

我已經嘗試將 export const CounterContext=createContext<CounterContext | null>(null); 改成 export const CounterContext=React.createContext<CounterContext | null>(null);。我已經將檔案從 .tsx 改成 .ts。

答案＃1

在 useContext 調用中，TypeScript 將 CounterContext 解釋為一種類型而不是一個值。當存在類型衝突時，可能會發生這種情況。

type CounterContext = {
    counter: number;
    setCounter: React.Dispatch<React.SetStateAction<number>>;
};

export const CounterContext = createContext<CounterContext | null>(null);

類型和上下文都稱為 CounterContext，請確保區分它們以避免 TypeScript 誤解。

// changed the type to TCounterContext
type TCounterContext = {
    counter: number;
    setCounter: React.Dispatch<React.SetStateAction<number>>;
};

export const CounterContext = createContext<TCounterContext | null>(null);