next.js型推論エラーの見るべきポイント

最近のフロントエンドのトレンドはnext.jsを採用する傾向にある。next.jsでは型推論が行えて開発が便利である。ただビルド前で型エラー解決に時間がかかるのも事実。
プロジェクト参画直前、直後でエラーパターンを見慣れておくのは有用で、さっと見るべきポイントを紹介する。

画面の成功例

入れるべきものの型違い

state管理の際に指定するサンプルコードを例とする。
フックとして使用可能なstateだが、よくあるものとしては型の入れ違い。

これは簡単な例で初期値に”おはようございます”（文字列型）が指定されているのに対して型はnumber（数値型）が指定されている。これはNG、正しくは<string>（文字列型）である。（プリミティブ（よくつかわれる型）では指定する必要がないといわれそうだが、ここではサンプルとして紹介をしておく。）

オブジェクト型の型違い

過去参加したプロジェクトではバックエンドからの値渡しにはオブジェクト型を採用していた（まとめていろんな型の値を渡せるから管理が楽という観点）のでオブジェクトに対してのよくあるエラーを紹介。以下はオブジェクト型で型が指定されているため、エラーが出ている。

型 'string' の引数を型 'StrObject | (() => StrObject)' のパラメーターに割り当てることはできません。ts(2345)

エラーを読みとく方法として「上から1行ずつ読む」という方法が確実である。

interface StrObject{
 sampleStrProperty:string
}

useStateの型推論ではStrObjectとオブジェクト型を指定している。
ここではinterfaceにstrObject型{ }　←これが採用されており、この中身の{ sampleStrProperty : string} 
このプロパティに合わせるように引数のかたちを合わせる必要がある。

以下の形で代入を行う。
({sampStrProperty:"おはようございます"})

ReactNodeに割り当てることができないエラー

さきほどのエラーを解消した後に、htmlに出力するときの
useStateのgetter要素、sampleStrを指定すると、

型 'StrObject' を型 'ReactNode' に割り当てることはできません。ts(2322)
const sampleStr: StrObject

これはオブジェクトを直接指定しているためで、アクセスするためには
sampleStrPropertyにアクセスしないと値を取り出すことができない。

オブジェクトにアクセスするにはキーを指定してプロパティにアクセスすることを、オブジェクトで用意したインターフェースを頭に入れておく。