以下の内容はhttps://tech-1natsu.hatenablog.com/entry/2018/08/15/213540より取得しました。


TypeScriptでReact.createRef()に型定義をわたす

React Refsとは

https://reactjs.org/docs/refs-and-the-dom.html

ReactでDOMを参照するアレ.

この記事ではv16.3から実装されたReact.createRef()を使うrefsのことを指している。

そんなプロパティないとか怒られる

Image from Gyazo

型がない

例えばこういう風にinputタグにrefを張りたいときにTSにプロパティ型がないと怒られる。

結論

型定義をわたす

React.createRef()はこうジェネリクスを受け付けているので

function React.createRef<{}>(): React.RefObject<{}>
class InputComponent extends React.Component {
  private textInput = React.createRef<HTMLInputElement>()

  public render() {
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
      </div>
    )
  }
}

こうHTMLInputElementをわたすといい感じになれる。

Image from Gyazo

わたしてからvscodeの注釈みるとこういう感じ


よかったですね




以上の内容はhttps://tech-1natsu.hatenablog.com/entry/2018/08/15/213540より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14