reactでContextを作成する際にCannot find namespace 'ctx' error - typescript

質問

私は、プロジェクトで react を使用しています。 typescript を使っているのですが、なぜこのエラーが起きるのかがわからず、困っています。 createContext の例は、このためにインターネット上で見つけることができません。 これは特にここから得たものです。 https://github.com/typescript-cheatsheets/react-typescript-cheatsheet 私はContextセクションで表示されている同じを使用しようとしています。

import * as React from "react";

export function createCtx<A>(defaultValue: A) {
type UpdateType = React.Dispatch<React.SetStateAction<typeof defaultValue>>;
const defaultUpdate: UpdateType = () => defaultValue;
const ctx = React.createContext({
    state: defaultValue,
    update: defaultUpdate
});
function Provider(props: React.PropsWithChildren<{}>) {
    const [state, update] = React.useState(defaultValue);
    return <ctx.Provider value={{ state, update }} {...props} />;
}
return [ctx, Provider] as [typeof ctx, typeof Provider];
}

問題は、毎回このようなエラーが発生することです。 名前空間が見つかりません ctx というエラーが出ます。

        return <ctx.Provider value={{ state, update }} {...props} />;

私はまだ理由を理解することはできません、誰か私がここで何か間違ったことをしている場合は、参照してください？これは私のtsconfig.jsonです。

{
"compilerOptions": {
"target": "es5",
"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"noImplicitAny": false,
"strictNullChecks": false
},
"include": [
"src"
]
}

どんな助けでも感謝します!

どのように解決するのですか？

あなたのファイルの拡張子は、おそらく .ts ではなく .tsx .

したがって、TypeScriptは <ctx.Provider をキャストと解釈し、型 Provider を名前空間 ctx .