Zero effort type-safety

[predragnikolic]

As of React Router v7,
React Router uses TypeScript virtual files to accomplish typed routes.

We have a generated file +types.* where we import types from.

import type * as Route from "./+types.city";

export const loader = ({params}: Route.LoaderArgs) => {
    return {
        hello: `asdf:${params.cityId}`
    }
}
export default function City({params, loaderData}: Route.ComponentProps) {
    params.cityId
    loaderData.hello
}

While it is better that it was before, it can be even better!

What if we strip the types and still have full type safety?

- import type * as Route from "./+types.city";

- export const loader = ({params}: Route.LoaderArgs) => {
+ export const loader = ({params}) => {
    return {
        hello: `asdf:${params.cityId}`
    }
}
- export default function City({params, loaderData}: Route.ComponentProps) {
+ export default function City({params, loaderData}) { 
    params.cityId // still type-safe
    loaderData.hello // still type-safe
}

If you are interested in how to achieve that,
please take inspiration from https://svelte.dev/blog/zero-config-type-safety (Svelte took inspiration From Next)

[predragnikolic]

Disclaimer:
I can imagine that much effort was put into improving type safety, and it is much better in v7.
I have a huge amount of respect to the guy working on that.

This proposal here is a next step improvement.
I hope that we could see this proposal in some future version on RR... Maybe in some minor version of RR v7, as this feature change will not be a breaking change (but a nice DX improvement)

[gustavopch]

I believe your proposal qualify as the kind of magical code Remix team doesn't like. That's one reason for the new routes.ts. It's also why they ended up with their current implementation of type-safety. Everything is explicit. You know where the types are coming from. There's nothing hidden.

[predragnikolic]

Svelte said something in the blog post and I agree with that:
Make it easier to do the right thing than to do the wrong thing.

I do like explicitness over implicitness. I don't like boilerplate code. My eyes see the type import as boilerplate code.

I like to write less types, but have more type-safety and I really enjoy that DX.
Notice the bellow code, 0 types, but everything is type safe. So easy to read.

Kapture.2024-10-24.at.18.21.54.mp4

[leumasic]

Also, it would eliminate the risk of importing wrong types. Not a strong argument but I don't like to leave that door open.

[mlntr]

I would also prefer this. Curious if the React Router team previously discussed this decision anywhere, so we can see?

[pawelblaszczyk5]

They have reasons against that written up in decision doc - https://github.com/remix-run/react-router/blob/main/decisions/0012-type-inference.md#zero-effort-typesafety

It was implemented this way at first and changed later on due to concerns listed in the decision doc