TypeScript and Restricting String to Interface Members

Posted on: October 17, 2017

Imagine the scenario where you have an interface with many members. Each of them is a boolean and your React component allows you to toggle with a checkbox the value of them. You have a single method that will dispatch the action to your Redux/Flux cycle. How can you make your code strong enough and still be flexible to not having 1 function per member?

The solution resides that we do not one to allow every string but just a finite set of string which is the members' name of a specific interface.

1public render(): JSX.Element { 
2  // ... 
3  <input type="checkbox" 
4    checked={this.props.myModel.member1} 
5    onClick={(e) => { this.onToggle("member1"); }} 
6  /> 
7  // ... 
8}

The click method won't ask for a string, but for a key of the model.

1private onToggle(filterName: keyof MyModel) { 
2  this.props.onToggle(filterName); 
3}

This little difference makes the whole system being flexible since it allows to type string, but strict in a way that we have a defined set of potential value. The set is also dynamic. If you rename a member, add or remove a member from the interface, TypeScript will come in play and warn if something is invalid.

In this article, we saw a way to use string to indicate which value to change. Since interfaces are stripped out at transpilation time, there is some case like the one presented that providing a string is the only solution. TypeScript allows the use of keyof to extract a set of string from an interface which allows having a finite set of accepted results and hence reinforce your code by eliminate wrong inputs.