Response types matches ALL keys in interface

[subtle plover]

Hey guys, I'm struggling a bit to make a dynamic interface work correctly.
I've added a TS Playground link to show the issue.

But to explain, i define the ResponseTypes interface, do define the output response, based on which endpoints being used. But it matches all of them, and creates like a merge value of all of the key values defined the the interface, and there makes the returnvalue incorrectly, as it should always only match the EXACT key.

In the playground example, it should only return the type from "/api/data/athletes" entry.

https://www.typescriptlang.org/play/?module=1&pretty=true&ts=5.5.4#code/FAFwngDgpgBAogOwCYQPYEsEgEIEMDOsAvDAEQD0uE65SuIupA3KJLIihlvjCR2phwFYAHxgADACQBvflyGEAvpRAALADZQQUfOJhips5AKx4l5AEYAnXMl0tggqFYBmuAMawASjrQJCACpsPNLAMGSU1LT0jABcMKHh4e4ArvggqAC28elWmADmLOGKRRFUNHQMljZ2pPHSJWFlUZW4KhpaOnUJTeGtOSB5CIW9MO6oKVjxCCmZFs6ljYrArNAwPvh+gWwAPAEwUAAe2nbwxvL4AHy8MPtHJ0g8ANZQYKgu676o-lBB0PhNAD8n02322-wA2gEALpNaZQABuCxWTlcHlgAEEAAoASR64T2B2OUFOckEVwAFKMSZxBPEydwADSjVAQEDoMGA+I+ACOKR0IBxCHQIGZ4QAlPEsVYsuhCDsNltfrsApdLixlsAjmgrCAxmC9S4tO5VNicfEzTcCGAEO4YFTwjSTCB6edyWKYKz2ZzuVA+QKhSLmeLeNdEjBBmB8Ulxv49VYvj8rQB3XAimBGkAmilO+SMz1sjn+cUOJIwdAfCkAQgToJ+IfDZbUMuTMAQUFbcCsMqsFNrSpLo01Zdj6RgrRTafjicIADoAFb4b4UwejBMgFJWBDjmKLMb0E325w9+K2MAN0bN1Ct9ud7uoXvHh+D4rARorCnW232kNEMNNUc9WkHcGBgRRJ3TTMTTNCkKHKaIqnoDptHwUgXzLJJyHIGAAD1ATfcUgA

[dense crypt]

@subtle plover Here's a shortened URL of your playground link! You can remove the full link from your message.

madsenmm#0

Playground Link

Preview:```ts
type EndpointBase = "/api/data"
type Endpoints =
| EndpointBase
| ${EndpointBase}/athletes
| ${EndpointBase}/brands

interface ResponseTypes {
"/api/data": {
custom: string
}
"/api/data/brands": {}
"/api/data/athletes": {
data: stri
...```

You can choose specific lines to embed by selecting them before copying the link.

sandiford#0

Playground Link

Preview:```ts
type EndpointBase = "/api/data"
type Endpoints =
| EndpointBase
| ${EndpointBase}/athletes
| ${EndpointBase}/brands

interface ResponseTypes {
"/api/data": {
custom: string
}
"/api/data/brands": {}
"/api/data/athletes": {
data: stri
...```

You can choose specific lines to embed by selecting them before copying the link.

[sonic root]

Is that it?

[subtle plover]

Jeeesus a brainfart, yes that was it 😄
Many thanks!

[sonic root]

T defaults to the constraint if there is nothing to infer it from, even with no default. It's a bit of a footgun.

[subtle plover]

!resolved

[shut agate]

You are not authorized to use this command.

[subtle plover]

Wait, not sure I understand what you mean by that Bert?
Should it be written otherwise?

[sonic root]

I mean that because you didn't have endpoint: T, it couldn't infer T

So defaulted T to Endpoints

Would be nice if it errored instead

[subtle plover]

Ah yes, thank you for the clarification 🙏
A follow up question, if i have a dynamic api route on /api/data/athletes/:this-part-is-dynamic how does one define a route to match that part?

@sonic root 🙏 Sorry for interrupting you again 😄

[sonic root]

${EndpointBase}/athletes/:${string} ?

[subtle plover]

It won't accept non-static values in the interface keys

Getting this error:

Got it working. Could write it like the following:

[key: `${EndpointBase}/athletes/${string}`]: {};

[sonic root]

Well yeah, I mean that's not really correct to think

When I've implemented things like this there is a concrete route

'/athletes/:id' or whatever

This will be converted into a regex, and you test the regex against the real route to see if it hits that route

Your current approach might work, unless you turn off noUncheckedIndexAccess, which reveals that your tsconfig is hidden an error, and actually the type is T | undefined

[sonic root]

[key: x] strictly means any key in x might exist, but with noUncheckedIndexAccess it just assumes that you only access existing entries.

[subtle plover]

So you wouldn't let typescript handle this, but more setup typeguards to ensure correct types?

[sonic root]

There's no way to represent that there is an object property for every string or every x/${string}

So there's not really a good way to do it. You couldn't actually satisfy this type, you'd need infinite properties. Unless using a Proxy which TS doesn't have a way to represent.

So my description is just how it works on my framework - that wasn't a solution from starting in your position, I just came at it from a different angle where my routes object had /foo/:bar and my type was just typeof routes

I mention it because it might be an option, or might give some ideas

I guess with what you're doing it technically works fine. You could always Exclude<T, undefined> if you turned on NUIA. So eh, maybe it's fine.

Like it's a bit of a hack, but it's convenient haha