Remixのloaderで(T | undefined) 型を返すとT に潰れる

Remixのloaderで(T | undefined)[]型を返すとT[]に潰れる

バージョンは2.8.1

code:typescript

import { json } from "@remix-run/node"

import { useLoaderData } from "@remix-run/react"

import { Fragment } from "react"

export const loader = () => {

return json({ data: 'foo', undefined as (string | undefined)[] })

}

export default function Route() {

const { data } = useLoaderData<typeof loader>()

return data.map(d => {

<Fragment key={d}>{d.toLowerCase()}</Fragment>

})

}

コンポーネント側ではdataがstring[]型になっているので、d.toLowerCase()が型検査でエラーにならない。ちなみにloaderから返したundefinedはクラアイントではnullになってるので(string | null)[]が正しい。

今後デフォルトになるSingle Fetchだとデータのエンコーディングと型付けが変わるので、ここも改善されるかもしれない

-> 検証の結果、single fetchを有効にしてdefer関数をreturnすると、きちんとundefinedが返ってくることがわかった