How to type function parameters in TypeScript to map object properties?

Question

I am trying to understand how to correctly set the types to the prop and value function parameters (see the ??) so that prop and value must match the ones defined in the MyStorage interface. Setting keyof MyStorage should be sufficient to correctly type prop, but then I'm completely lost on how to type value.

interface MyStorage {
  prop1?: string;
  prop2?: number;
  prop3?: boolean;
  prop4?: Array<string>;
  prop5?: 'value1' | 'value2';
}

const myStorage: MyStorage = {};

const setProp = (prop: ??, value: ??) => {
  myStorage[prop] = value;
}

setProp('prop1', 'Ok');
setProp('prop1', 5); // Not Ok
setProp('prop5', 'value1'); // Ok
setProp('prop5', 'value5'); // Not Ok

The ultimate goal is to transform this function to a generic version like this:

const genericSetProp = <T>(prop: ??, value: ??, storage: T) => {
  storage[prop] = value;
}

genericSetProp('prop1', 'Ok', myStorage);
genericSetProp('prop1', 5, myStorage); // Not Ok
genericSetProp('prop5', 'value1', myStorage); // Ok
genericSetProp('prop5', 'value5', myStorage); // Not Ok

How can I set those types to make TypeScript correctly check those parameters?

T.J. Crowder · Accepted Answer · 2021-07-09 12:10:22Z

2

You can use the type of a member of a structure by doing MyStorage["prop1"] etc. To get the "prop1" part, you can require that key be keyof MyStorage. So the first version looks like this:

const setProp = <K extends keyof MyStorage>(prop: K, value: MyStorage[K]) => {
    myStorage[prop] = value;
};

And you can indeed make that generic by having the type MyStorage inferred from a third argument, using a second generic type parameter:

const genericSetProp = <T, K extends keyof T>(prop: K, value: T[K], storage: T) => {
    storage[prop] = value;
};

Playground link

answered Jul 9, 2021 at 12:10

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

Comments

captain-yossarian from Ukraine · Accepted Answer · 2021-07-09 12:13:01Z

1

Just use extra generic:

interface MyStorage {
  prop1?: string;
  prop2?: number;
  prop3?: boolean;
  prop4?: Array<string>;
  prop5?: 'value1' | 'value2';
}

const myStorage: MyStorage = {};

const setProp = <Prop extends keyof MyStorage,>(prop: Prop, value: MyStorage[Prop]) => {
  myStorage[prop] = value;
}

setProp('prop1', 'Ok');
setProp('prop1', 5); // Not Ok
setProp('prop5', 'value1'); // Ok
setProp('prop5', 'value5'); // Not Ok

FP approach:

const withObject = <Obj,>(obj: Obj) => <Prop extends keyof MyStorage>(
  prop: Prop, value: MyStorage[Prop]
) => ({
  ...obj,
  [prop]: value
})

const setProp = withObject(myStorage)

setProp('prop1', 'Ok');
setProp('prop1', 5); // Not Ok
setProp('prop5', 'value1'); // Ok
setProp('prop5', 'value5'); // Not Ok

Playground

edited Jul 9, 2021 at 12:13

answered Jul 9, 2021 at 12:09

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

1 Comment

T.J. Crowder Over a year ago

You may not have seen the second part of the question asking how to do this generically. :-)

Collectives™ on Stack Overflow

How to type function parameters in TypeScript to map object properties?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related