Typescript: Pick keys from function argument

Question

I have a function which first argument determines the keys of the result. Given only one key in the result, I can create a function like the following:

type MyType = {
    green: string;
    red: string;
    blue: string;
}

async function fetchStuff<T extends keyof MyType>(properties: T): Promise<Pick<MyType, T>> {
    const result = await fetch("http://localhost", {
        method: "POST",
        body: JSON.stringify({
            "properties": properties
        })
    });
    
    return await result.json();
}

// Works fine
console.log(fetchStuff("green").then(x => x.green))

// Syntax error - as expected
console.log(fetchStuff("green").then(x => x.red))

Now I want to modify this function, so it can take a list of properties and return a object containing only the given keys. Modifying my code with something like

async function fetchStuff<T extends Array<keyof MyType>>(properties: T): Promise<Pick<MyType, T>>

did not work, as the array is not compatible with 'keyof MyType'.

Guerric P · Accepted Answer · 2021-12-15 16:56:22Z

2

You were pretty close, just return Promise<Pick<MyType, T[number]>> instead of Promise<Pick<MyType, T>>

TypeScript playground

edited Dec 15, 2021 at 16:56

answered Dec 15, 2021 at 16:51

Guerric P

32k6 gold badges61 silver badges109 bronze badges

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

1 Comment

rudolfbyker Over a year ago

Would you care to elaborate what adding [number] does, and why it works?

Collectives™ on Stack Overflow

Typescript: Pick keys from function argument

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related