Typescript Pick<> type failing: Argument of type '"foo"' is not assignable to parameter of type 'Pick<Bar, "foo">'

Question

I have a use case which I think would be perfect for Typescript's Pick types.

Here's a trimmed down example:

interface CreditCard {
  name: string;
  year: number;
  expired: boolean;
}

function setValue(key: keyof CreditCard, value: Pick<CreditCard, typeof key>) {
  // do stuff...
}

However, when I try calling this function:

setValue("name", "rick");

Typescript (2.3.4) gives the following error:

error TS2345: Argument of type '"rick"' is not assignable to parameter of type 'Pick<CreditCard, "name" | "year" | "expired">'.

Also, I do not have an instance of CreditCard available to pass in as an argument, so changing the function to take a CreditCard as a third parameter is not possible in my use case.

Answer 1

Pick<Obj, Props> creates a type that looks like Obj with only the properties specified by Props, whereas your example is trying to use it to get the type of a single property, which should instead be done like this: CreditCard[KeyType]

Your setValue function should look like this:

function setValue<K extends keyof CreditCard>(key: K, value: CreditCard[K]) {
  // do stuff...
}

You set up a generic type K which is a string literal type for one or more of the keys of CreditCard. Then you use that type to grab the type of a property off of CreditCard. When the function is invoked, the type system will narrow K as far as it can and use that to figure out a specific type for the value argument.