useLoaderData<typeof loader>() not giving me types from loader

[lament anvil]

I am using json to return data from my loader but useLoaderData is not using those types. Here's the code and type hint when hovering over user in the destructured useLoaderData object. Any idea why this might be happening?

[strong quail]

If you say:

const loader: LoaderFunction = (/*...*/) => {/*...*/}

Then TS sees "Oh, loader is a general LoaderFunction. That's its type. Don't bother inferring a more specific types from its implementation".

If you want type inference you have a couple options:

1. Use satisfies LoaderFunction instead. that tells TS to make sure loader is a LoaderFunction but to still infer a more specific type. But getting satisfies to work sometimes involves some ugly () wrapping your function, so I don't often use this solution even though its pretty much exactly the semantics I'd want.

2. Type the loader args directly:

const loader = ({request}: LoaderFunctionArgs) => {/*...*/}

^that tells TS to just use LoaderFunctionArgs for the args, but to still infer the return type for loader

I usually just use (2) since its a smaller change

[true storm]

@strong quail and @lament anvil
I face same issue but in i am not use typescript i use Javascript
below is my code picture.

[mellow hull]

@true storm do const { translations } = useLoaderData<typeof loader>(); to have inference on loader data type.

[true storm]

@mellow hull i use Javascript and your solution is reliable with Typescript.

my error :- Property 'filterData' does not exist on type 'unknown'

[strong quail]

That's a TS error. See ts(2339) in the error message? You probably have a tsconfig.json file with allowJs turned on

but in the end that means you are using TypeScript's type checking

[true storm]

Hi, I see my tsconfig.json file there is "allowJs": true. So what I do next to resolve this error.

[south hedge]

Three options

• set allowJs to false so you stop type checking
• or use a jsdoc annotation to either type the loader data or set it to any
• or manually guard against the types with a series of conditions

[true storm]

Thanks for the answer.👍

[south hedge]

Option 2 looks like this, it would be my recommendation if you want to stick to JS

#1146431537672368299 message

[craggy compass]

removing ":LoaderFunction" is the cure

not sure what its point is

It also threw me at start

[dusky spindle]

It's basically a legacy type export at this point. I'm not sure why the Remix Team didn't get rid of it with the v2 release since it oft creates confusion for learning Remix.

[strong quail]

its still useful if you use satisfies

that's nice because it also makes sure you are returning something meaningful. just too bad satisfies for functions is kinda ugly to write