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)
  }

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

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLInputElementあるいはnullが入るのでしたら、そういう型にしましょう。

typescript
1const ttt=useRef<HTMLInputElement|null>(null)
2
3const changeState = (): void => {
4
5  if (ttt.current) setState(ttt.current.value)
6
7  }