使用反应创建上下文时找不到命名空间“ctx”错误 - 打字稿

Posted 2023-02-22

【中文标题】使用反应创建上下文时找不到命名空间“ctx”错误 - 打字稿

【英文标题】：Cannot find namespace 'ctx' error when creating Context with react - typescript

【发布时间】：2019-12-06 02:39:14

【问题描述】：

我正在使用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"
]

任何帮助将不胜感激！

【问题讨论】：

看来问题出在配置文件中。我能够在打字稿操场上编译它。我无法在此处添加链接，因为它太长了。您的 tsconfig.json 在哪里？

【参考方案1】：

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

因此，TypeScript 将 <ctx.Provider 解释为强制类型转换，并尝试在命名空间 ctx 中查找类型 Provider。

【讨论】：

这已经咬了我很多次了。感谢您记下它，这是一个很容易犯的错误。

花了太多时间试图弄清楚这一点。不敢相信就这么简单。

每一次......我开始一个新项目并撞到这堵墙，花了太长时间试图自己修复它......谢谢你好心的先生。再次...

太棒了！！如此简单！

【参考方案2】：

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