Typescript: conditional generic Type

Question

Is it possible to write a function with types (similar to the one at bottom) so that it can be used in the following ways. Either;

parseApiResponse(apiResponse); // returns TParsedResponse
// or
parseApiResponse<TSpecificParsedResponse>(apiResponse); // returns TSpecificParsedResponse

where

type TApiResponse = {/* some complex non-specific raw data */}
type TParsedResponse = {[key:string]: string | number}[] // array of objects with any string as a key
type TSpecificParsedResponse = {name:string, age:number}[]

Here's my shoddy first attempt

const parseApiResponse = <T extends {}>(apiResponse: TApiResponse): T => {
  //some code here
  return parsedResponse;
};

Does this approach work for you or am I missing something? If it works I will write up an answer. — jcalz
– jcalz, Commented Jun 20, 2022 at 18:04
This is so great @jcalz and I think it has got me 99% of the way there, just like the other answer below! I've upvoted your answer thanks! But... When I have tried to create in practise I get an issue with the logic - please see this shorturl.at/dstET — moroncodes
– moroncodes, Commented Jun 21, 2022 at 0:37
If the suggested solutions don't work for you, then you should edit your question to make your code a minimal reproducible example that demonstrates a situation where the proposed solutions fail. It should be plain text in the question itself (although having an additional link to an IDE is a good supplement, it's not a substitute for the plain text). — jcalz
– jcalz, Commented Jun 21, 2022 at 15:15
Oh, ok, thanks and apologies, @jcalz. I did originally try to write it in the comment, but I didn't have enough characters. I now realise the issue was more fundamental to my logic so I'll post a new question — moroncodes
– moroncodes, Commented Jun 22, 2022 at 22:31

Logan Anderson · Accepted Answer · 2022-06-20 18:06:27Z

2

This is a really good use case for extends in Typescript.

Here is the full code example

The main idea is that have a generic type that extends the base type.

function parseApiResponse<T extends TParsedResponse>(apiResponse: TApiResponse){
    // ... process
    const parsedResponce: T = [{}] as T
    return parsedResponce
}

Typescript will infer the "extended" type if it is not passed and will use the more specify one if it is passed.

Here is the full code example in case the Playground link above does not work.

type TParsedResponse = {[key:string]: string | number}[] // array of objects with any string as a key
type TSpecificParsedResponse = {name:string, age:number}[]

function parseApiResponse<T extends TParsedResponse>(apiResponse: TApiResponse){
    // ... process
    const parsedResponce: T = [{}] as T
    return parsedResponce
}

const exampleOne = parseApiResponse({complex: 'foo'}); // returns TParsedResponse
// or
const exampleTwo = parseApiResponse<TSpecificParsedResponse>({complex: 'foo'}); // returns TSpecificParsedResponse

answered Jun 20, 2022 at 18:06

Logan Anderson

5812 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

moroncodes Over a year ago

Honestly, this is so good and I think it has got me 99% of the way there! I've upvoted your answer thanks! But... When I have tried to create in practise I get an issue with the logic - please see this shorturl.at/dstET

moroncodes Over a year ago

Sorry, the above doesn't seem to work. tinyurl.com/2hd2x5bv

Logan Anderson Over a year ago

@moroncodes it seems like typescript compiler is not super sophisticated when it comes to iterating over generic types (see this issue ). That being said I was able to fix your example by adding another generic to the data type. See: tinyurl.com/5wepe8e2 for more information.

Collectives™ on Stack Overflow

Typescript: conditional generic Type

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related