TypeScript - validate that value associated with a key is correct when using keyof

Question

Assuming I have an interface like:

interface Foo {
  description: string;
  amount: number;
}

And a function to update Foo like:

public updateFoo(key: keyof Foo, val: string | number): void {
  this.foo = { ...foo, [key]: val }
}

When I call this function in TypeScript, this is obviously considered valid:

this.updateFoo('description', 10)

Is there a way for TypeScript to use the keys that it already knows belong to the target interface and validate the type of the second argument being passed?

jcalz · Accepted Answer · 2019-01-30 20:07:34Z

2

Yes, you want to use a generic function:

 public updateFoo<K extends keyof Foo>(key: K, val: Foo[K]): void {        
    this.foo = { ...this.foo, [key]: val };
    // or just this.foo[key] = val;
  }

The key parameter is a generic type K constrained to keyof Foo, and the val parameter is the lookup type Foo[K], meaning "the type of the property of Foo whose key is of type K". This allows you to do the sort of type-safe property getting and setting that you're looking for.

Now if you try the offending code you get an error:

this.updateFoo('description', 10) // error, 10 not assignable to string

Hope that helps. Good luck!

answered Jan 30, 2019 at 20:07

jcalz

339k29 gold badges452 silver badges450 bronze badges

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

1 Comment

Robbie Milejczak Over a year ago

The reason I don't say this.foo[key] = val is to avoid mutations, I don't actually access the foo property directly it was just for the sake of brevity. I never knew Foo[K] was valid syntax, this is awesome.

Collectives™ on Stack Overflow

TypeScript - validate that value associated with a key is correct when using keyof

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