TypeScript: Function parameter types to update an object by key and value

Question

I'm looking for a way to write function parameters to update an object's value given the key to update and the new value to update.

type SuperMarket = {
    isOpen: boolean;
    offers: string[];
    name: string;
};

const mySuperMarket: SuperMarket = {
    isOpen: true,
    offers: ["banana", "apple", "kiwi"],
    name: "Kwik-E-Mart",
};

// How to make this typesafe?
const updateSupermarket = (key: keyof SuperMarket, value: any) => {
    mySuperMarket[key] = value;
};

// Should work correctly
updateSupermarket("isOpen", true);

// Should throw TypeScript error
updateSupermarket("isOpen", "Aldi");

// Should throw TypeScript error
updateSupermarket("isOpen", ["melon", "milk", "sugar"]);

I don't understand, what is the deal with wrapping it within updateSupermarket. Why don't you just say mySupermarket.isOpen = true? — MoxxiManagarm
– MoxxiManagarm, Commented Aug 26, 2020 at 13:55
It is just an example. In my real application, the object is a react state and more deeply nested. Also the function is reused in multiple places. — Sir hennihau
– Sir hennihau, Commented Aug 26, 2020 at 15:37

Titian Cernicova-Dragomir · Accepted Answer · 2020-08-26 13:50:18Z

4

You need to use a type parameter to capture the key passed in and you can then use an type query to type value in relation to the passed in parameter:

const updateSupermarket = <K extends keyof SuperMarket>(key: K, value: SuperMarket[K]) => {
    mySuperMarket[key] = value;
};

Playground Link

answered Aug 26, 2020 at 13:50

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

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

Collectives™ on Stack Overflow

TypeScript: Function parameter types to update an object by key and value

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related