使用 React 创建上下文时找不到名称空间 'ctx' 错误 - 打字稿

Question

我正在使用 typescript 与 react 一起开发一个项目，但我很难弄清楚为什么会发生此错误，基本上，我不能使用任何 createContext 我因此在互联网上找到的示例。这是我从这里专门得到的：https://github.com/typescript-cheatsheets/react-typescript-cheatsheet 我正在尝试使用上下文部分中显示的相同内容。

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"
]
}

如有任何帮助，我们将不胜感激！

Answer 1

您的文件扩展名很可能是 .ts 而不是 .tsx。

因此 TypeScript 将 <ctx.Provider 解释为强制转换并尝试在命名空间 ctx.

中查找类型 Provider

Answer 2

请使用 tsx 而不是 ts 它有一些细微的差别。 tsx 显然允许在 typescript 中使用 jsx 标签。

使用 React 创建上下文时找不到名称空间 'ctx' 错误 - 打字稿

Cannot find namespace 'ctx' error when creating Context with react - typescript

typescript

reactjs

ionic4