ReactJS和Typescript：引用一个值，但在这里用作类型（TS2749）

我正在用Typescript和materialui在一个.tsx文件中编写一个ReactJS类。在我的一个自定义组件中，我想创建对我在自定义组件中使用的一个组件的引用

export class MyTextField extends React.Component<MyProps, MyState> {
  private refTextField: React.RefObject<TextField>;
  constructor(props: MyProps) {
    super(props);
    this.refTextField = React.createRef();
  }

  render(): JSX.Element {
    const { id, label, value: defaultValue } = this.props;
    const { value } = this.state;
    const element = (
      <TextField ref={this.refTextField} id={id} label={label} defaultValue={defaultValue} value={value} />
    );

    return element;
  }
}

导出类MyTextField扩展React.Component{
private refTextField:React.reobject；
构造器（道具：MyProps）{
超级（道具）；
this.refTextField=React.createRef（）；
}
render（）：JSX.Element{
const{id，label，value:defaultValue}=this.props；
const{value}=this.state；
常量元素=(
);
返回元素；
}
}

在编译过程中，我的引用声明出现错误：

“TextField”指的是一个值，但在此处用作类型。TS2749

我试图在我的声明中加入“typeof TextField”，但在对渲染中的ref属性进行赋值时，我收到了另一条消息：

类型“ReObject Element>”不可赋值 键入“（（实例：htmldevelment | null）=>void）| 重新对象|空|未定义'。类型 “重新对象元素>”不可分配给 键入“重新对象”。 类型“（props:TextFieldProps）=>Element”缺少类型“htmldevelement”中的以下属性：align、addEventListener、， 删除EventListener、accessKey和238更多。TS2322

有什么想法吗？

---

非常感谢

尝试向

createRef

函数添加一个类型，如下所示：

 private refTextField: React.RefObject<TextField>;
  constructor(props: MyProps) {
    super(props);
    this.refTextField = React.createRef<React.RefObject<TextField>>(null);
  }

private refTextField:React.reobject；
构造器（道具：MyProps）{
超级（道具）；
this.refTextField=React.createRef（null）；
}

所以我以前在我的代码中多次遇到这个问题，但直到今天才找到原因

TL；DR在最后询问问题的实际答案

在TypeScript中创建类时，该类的名称同时引用实例类型和Javascript类值。如果将该类作为类型引用，TypeScript会自动将其检测为该类的实例类型。如果您在运行时引用该类，它将按照Javascript的含义使用它。到现在为止一切都很好

class MyClass {}
let abc: MyClass; // ts recognizes as instance type
abc = new MyClass(); // completely fine, used here as the javascript value

然而，真正的问题是当您从模块动态导出类时。以某种方式导出类时，TypeScript只能导出类的Javascript值，而不能导出类型。因此，如果您将其导入另一个模块并尝试将其作为类型引用，您将得到TS2749

let intervariable = class MyClass{}
export const MyClass = intervariable; // TypeScript does not export type here.

发生这种情况时，尤其是在您无法控制的情况下，我获取实例类型的解决方案只是使用InstanceType和typeof：

import {MyClass} from './myclass';

let abc: InstanceType<typeof MyClass>; // no error
// the rest...

从“/MyClass”导入{MyClass}；
让abc:InstanceType；//无误
//其余的。。。

typeof运算符获取类值的类构造函数类型，InstanceType generic获取所需的实例类型

TL；博士：

---

在您的情况下，只需编写

InstanceType

而不是

TextField

确保您使用的是.tsx文件而不是.ts文件

将*.ts文件更改为*.tsx

---

在我的情况下，当我使用您的解决方案时，我总是会在声明（private refTextField…）期间收到错误消息（'TextField'指的是一个值，但在这里被用作一个类型。ts（2749））。此外，在我的构造函数中评估期间，我也收到了这条消息，并且createRef没有参数（null可删除）。这是人们应该检查的第一件事。接受的答案可能对OP问题有好处，但这是smtg，每个人都会不时忘记rom。如果我愿意，我会打2分could@jonyB你，先生，我花了太多的时间调查这个。。。非常感谢。另一个见解是Jest管道与生产/开发管道完全不同……是的，由于某些原因，TS文档中没有正确解释这一点。我的团队在使用一些非TS库处理TS React项目时多次遇到此问题。我花了一段时间才弄明白。我真不敢相信这是我的问题。谢谢你，我投了反对票，因为这和上面的答案完全一样。

import {MyClass} from './myclass';

let abc: InstanceType<typeof MyClass>; // no error
// the rest...