Zenn
👏

React,typeScript環境でuseRefを使用した際の型エラー解消

2022/03/03に公開
Next.js
React
TypeScript
tech

事象

Next(React), typeScript環境でuseRefを使ったところ下記のようなエラーが発生したので、解消法を紹介します。

Property 'value' does not exist on type 'never'.ts(2339)

今回は下記はフォームを作成していたところ上記エラーメッセージが出現しました。
動作的には正しく動いていて、画面では値を表示出来るものの、typeScript側でエラーになってしまってました。

上記とは違いますが、コードのイメージとしてはこんな感じ。
inputに入力したデータをuseRefで取得して、ボタン押下時にログに出そうとしていました。

import { useRef } from "react";

const Form = () => {
  const ref = useRef(null)

  const submitHandler = (e: React.ChangeEvent) => {
    e.preventDefault()
    console.log(ref.current?.value)
  };

  return(
    <form onSubmit={submitHandler}>
      <input type="text" ref={ref}/>
      <button type="submit">ボタン</button>
    </form>
  );
}

export default Form;

useRefに型を設定する必要があったようなので、

  const ref = useRef<HTMLElement>(null)

と定義してみました。

これではまだエラーが消えず、今度は「HTMLElementに'value'なんてないぞ」というようなエラーになりました。

Property 'value' does not exist on type 'HTMLElement'.ts(2339)

解決策

調べてみると、型の設定をする際にはざっくりと<HTMLElement>として定義するのではなく、
細かくどのElementから持って来ているのかを型として記載する必要がありました。
今回は、inputを指定する必要があったので、

  const ref = useRef<HTMLInputElement>(null)

としました。これでエラーメッセージが消えてくれました。

ここまで読んでくださり、ありがとうございました。

参考にしたサイト

https://qiita.com/Sekky0905/items/a88721f2af41050c93f2

Discussion