TS2339：类型“{}”上不存在属性“焦点”。使用 React 打字稿

Question

我有一个 JSX 类的打字稿代码

export class SearchForm extends React.PureComponent<Props, State> {

  public inputRef: React.RefObject<{}>;

  constructor(props: any) {
    super(props)
    this.inputRef = React.createRef()
  }

  public componentDidMount(): void {
      this.inputRef.current.focus()
      this.inputRef.current.select()
  ...

现在当我尝试编译这段代码时，我遇到了一堆错误：

ERROR in ...
TS2339: Property 'className' does not exist on type '{}'.

ERROR in ...
TS2339: Property 'focus' does not exist on type '{}'.

什么是问题？

Answer 1

错误出现在inputRef: React.RefObject<{}>; 的类型定义中，这是自动修复类型问题的默认建议。 类型 RefObject<{}> 不可分配给类型 RefObject<HTMLInputElement>。 {} 类型缺少 HTMLInputElement 类型的以下属性：accept、align、alt、autocomplete 等。

public inputRef: React.RefObject<{}>; 的正确行应该是：

  public inputRef: React.RefObject<HTMLInputElement>;

这段代码看起来像：

export class SearchForm extends React.PureComponent<Props, State> {

  public inputRef: React.RefObject<HTMLInputElement>;

  constructor(props: any) {
    super(props)
    this.inputRef = React.createRef()
  }

  public componentDidMount(): void {
      this.inputRef.current.focus()
      this.inputRef.current.select()
  ...