useRef “指的是一个值，但在这里被用作一个类型。”答案

【问题标题】：useRef "refers to a value, but is being used as a type here."useRef “指的是一个值，但在这里被用作一个类型。”
【发布时间】：2019-08-29 19:27:48
【问题描述】：

我正在试图弄清楚如何告诉 react 哪个元素被用作参考，即在我的情况下

const circleRef = useRef<AnimatedCircle>(undefined);

AnimatedCircle 是来自第三方库的 SVG 组件，以这种方式定义会导致错误

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

【问题讨论】：

【解决方案1】：

就我而言，我将文件重命名为 .ts 而不是 .tsx。再次重命名它修复了它。

【讨论】：

【解决方案2】：

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

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

【讨论】：

构造函数通常也是类型，不是吗？
是的，但是由于 OP 声明 AnimatedCircle 是一种组件类型并且他们收到此错误，我愿意打赌它是一个函数而不是一个类。
在 React 中，所有组件类型通常都是 TitleCase。小写名称用于区分原生 DOM 元素（div、x-your-name-here 等）和自定义 React 组件（AnimatedCircle）。虽然它打破了 javascript / typescript 的约定，但它是 React 中的约定，主要是因为没有其他非笨拙的方法可以使 React 与自定义元素和/或新元素一起工作标签
哦，我对此很熟悉，我只是习惯于将它们视为构造函数。但是当然，从 TypeScript 的类型角度来看，函数式组件不是构造函数，并且使用钩子基本上所有组件都变成了函数式组件。有点痛，希望能得到解决。 :-)
| null 是干什么用的？

【解决方案3】：

我遇到了同样的错误

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

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

【讨论】：

【解决方案4】：

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

import type ResultMap form...

试着做Promise<typeof ResultMap>

但这如果不起作用，因为

重要的是要注意，类在运行时有一个值，在设计时有一个类型，并且使用是上下文相关的。当使用 import type 来导入一个类时，你不能做从它扩展之类的事情。（来源：ts docs）

【讨论】：