使用引用 "refers to a value, but is being used as a type here."

Question

我正在尝试弄清楚如何告诉 React 哪个元素被用作引用，即在我的例子中

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle是第三方库的SVG组件，这样定义会报错

是否有一些通用的方法来定义引用的元素？

Answer 1

AnimatedCircle 是一个函数，不是一个类型。这意味着它不能在 TypeScript 中用来代替类型，就像在 useRef 的通用约束中一样。相反，您需要使用 typeof operator 转换为类型：

const circleRef = useRef<typeof AnimatedCircle | null>(null);

Answer 2

在我的例子中，我将文件重命名为 .ts 而不是 .tsx。再次重命名修复它。

Answer 3

我在

中遇到了同样的错误

ReactDOM.render(
<App store={store} persistor={persistor} basename={PUBLIC_URL} />,
document.getElementById("root");

然后我将文件重命名为 .tsx 并解决了问题。原因是，当您使用 React 或 ReactDOM 时，您必须将文件重命名为 .tsx 而不是 ts。对于 JavaScript，.js 有效，但对于 TypeScript，.ts 无效。

Answer 4

对我来说，问题是我试图导入一个类型并用它来扩展一个类型：

import type ResultMap form...

尝试过Promise<typeof ResultMap>

但这如果不起作用，因为

It’s important to note that classes have a value at runtime and a type at design-time, and the use is context-sensitive. When using import type to import a class, you can’t do things like extend from it. (Source: ts docs)

使用引用 "refers to a value, but is being used as a type here."

useRef "refers to a value, but is being used as a type here."

typescript

reactjs

react-hooks