React useRef TypeScriptの型定義について

実現したいこと

ReactでuseRefを使用 型定義でTSのエラーが解決できない
初期値をstringにしたいが指定する型を知りたい

!非nullアサーションは使いたくない

発生している問題・エラーメッセージ

2つの型エラーが発生

プロパティ 'value' は型 'string' に存在していません。
型 'MutableRefObject<string>' を型 'LegacyRef<HTMLInputElement> | undefined' に割り当てることはできません。 型 'MutableRefObject<string>' を型 'RefObject<HTMLInputElement>' に割り当てることはできません。ts(2322)

該当のソースコード

const ttt=useRef<string>('') const [state,setState]=useState('') const changeState = (): void => { // ここのvalueでエラー setState(ttt.current.value) {/* ここのrefでエラー */} <input type="text" ref={ttt} /> }

試したこと

const ttt=useRef<HTMLInputElement>(null!)

useRefの初期値をnullにするとrefエラーは解決できしたが「!」をつけないと
下記の部分で「オブジェクトは 'null' である可能性があります」というエラーになります

const changeState = (): void => { // ここのttt.currentでエラー setState(ttt.current.value) }

解決策を教えていただきたいです。
よろしくお願い致します

コメントを投稿

0 コメント