Parse params in TypeScript

[kddnewton]

Hi! 👋

I saw #8019 go out, which is great! useMatch should definitely be generic to make the types better. One thing that's nice though is that modern TypeScript supports template strings, so these types can actually be parsed statically if they're string literals. This commit makes it attempt to parse the type statically and if not, it falls back to just string. You can play around with the parsing here.

Now when you use useMatch("foo/:bar") the type returned is actually PathMatch<"bar"> and useMatch("foo/:bar/:baz") is PathMatch<"bar" | "baz">.

Totally get it if you don't want to maintain this, but I think it's really nice on the consumer side because you don't have to duplicate that key.

Tagging @chaance since you made that original PR that inspired this one.

[mjackson]

WHAT MAGIC IS THIS?! Haha, I've never seen anything like this. Very cool, @kddnewton. Thanks for bringing this to our attention.

I could go either way with this. I think I understand what's going on in the code (thanks for the comments!) so I'd be fine maintaining it if people really want it. What do you think @chaance?

I think we may also need to do a bit more work here to augment the return value of matchPath the same way as useMatch, right?

[smashercosmo]

Would be also nice to have exported Params type, that could look like

type Params<Path extends string> = Record<ParseParamKey<Path>, string>

so that we can use it with useParams() hook, like

import { useParams } from 'react-router-dom'
import type { Params } from 'react-router-dom'

function UserPost() {
  const { userId, postId } = useParams() as Params<'/users/:userId/posts/:postId'>
}

[smashercosmo]

Oh, I've just realized, that it's not needed, because of the latest changes to useParams hook. So, just exported ParseParamKey type will be enough.

import { useParams } from 'react-router-dom'
import type { ParseParamKey } from 'react-router-dom'

function UserPost() {
  const { userId, postId } = useParams<ParseParamKey<'/users/:userId/posts/:postId'>>()
}

[chaance]

@mjackson love this, I actually wanted to do something similar but didn't spend the time on trying to figure out the patterns, but I'm very glad @kddnewton did. I say we do it!

[kddnewton]

@mjackson I updated matchPath to work the same way.

Yeah, template strings are ridiculous. I'm gonna leave some links here in case people find this issue and get curious:

• https://github.com/jamiebuilds/json-parser-in-typescript-very-bad-idea-please-dont-use (the original one that got me interested in this kind of thing)
• https://github.com/kddnewton/typescript-parse-math
• https://github.com/ronami/meta-typing
• TypeScripts Type System is Turing Complete microsoft/TypeScript#14833

[chaance]

@kddnewton Meant to echo Michael on this, but thanks so much for the inline comments. This kind of stuff is very helpful for us and anyone who contributes after us 🙏

[kddnewton]

@mjackson let me know if there's anything else you'd like me to do for this to go out, and thanks for being open to it!

[smashercosmo]

could you please consider exporting ParamParseKey type

[kddnewton]

Sure @smashercosmo I've added it as exported. I wasn't sure if maintenance of that public type was preferable, but I suppose you could derive it anyway.

[smashercosmo]

Thank you) though we should've probably waited for @mjackson response. There is chance that he might not want to make it public. But as I said before it will be very convenient to use it with useParams hook

import { useParams } from 'react-router-dom'
import type { ParseParamKey } from 'react-router-dom'

function UserPost() {
  const { userId, postId } = useParams<ParseParamKey<'/users/:userId/posts/:postId'>>()
}

[kddnewton]

Just rebased in case y'all get a minute to check this out. <3

[chaance]

Pinging @mjackson on this but I'd prefer we didn't export that type. It's more of an internal utility and I could easily see us needing to change or remove it before v7 if TypeScript releases a new feature we can leverage to optimize it further.

[kddnewton]

No problem @chaance, I've unexported it now and rebased.

[ryanflorence]

@kddnewton I fixed the merge conflicts, you wanna put your username in contributors.yaml to sign the CLA and I'll merge this puppy?

[remix-cla-bot]

Thank you for signing the Contributor License Agreement. Let's get this merged! 🥳

[kddnewton]

@ryanflorence absolutely!

[ryanflorence]

When there are bugs, I'm pinging you cause I have no clue what's going on in there 😝 but the typescript sandbox was awesome! Too bad we can't do that for useParams().

[kddnewton]

Hit me up anytime, happy to help! :)

[timdorr]

Formatting is fixed up for you too 👍

[ryanflorence]

Thansk @timdorr, I've been over here trying to get github.dev to use the project prettier config but it won't!

[timdorr]

Yeah, Prettier doesn't work for me on github.dev either :/

[kddnewton]

Woohoo! Thanks for the merge! Excited about this.