TS2339 : La propriété 'focus' n'existe pas sur le type '{}'. avec React typescript

Question

J'ai un code typographique pour une classe 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()
  ...

Maintenant, quand j'essaie de compiler ce code, j'ai un tas d'erreurs :

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

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

Qu'est-ce qu'un problème ?

Answer 1

L'erreur se situe au niveau de la définition du type du inputRef: React.RefObject<{}>; qui est la suggestion par défaut pour la correction automatique du problème de type. Type RefObject<{}> n'est pas assignable au type RefObject<HTMLInputElement> . Type {} est dépourvu des propriétés suivantes du type HTMLInputElement : accepter, aligner, alt, autocomplétion, et plus encore.

La ligne correcte pour public inputRef: React.RefObject<{}>; devrait être :

  public inputRef: React.RefObject<HTMLInputElement>;

Et le morceau de code ressemblera à ceci :

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()
  ...