Type safe updates using type inference

February 19, 2020

A common problem we see when creating forms in React is the need for a generalised method that will update the form values when an input changes.

For example, we might need to change the following object:

FormObject.ts

export class FormObject {
    public Name: string;
    public DateOfBirth: Date;
    public Age: number;
    // depending on ts strictness, we may need to specify an array accessor
    // property for this to work in the first method
    [key: string]: string | Date | number;
}

When using input fields or components in react, we can pass the value of the input to an update method and specify the property to update:

index.tsx

// method that updates our object by accepting the name of the property to update
// and the value of a type of the property
function updateObject(name: string, value: string | Date | number) {
    formObject[name] = value;
    setObject(formObject);
}
// input that calls that update method on change
<GenericTextInput
	value={formObject.Name}
    onChange={(value: string) => updateObject("Name", value)}
/>

This works but it isn't type safe. This means that we could pass a value that is not appropriate for the property, or even try to update a property that does not exist on the object (spelling mistake or otherwise):

index.tsx

<GenericTextInput
	value={formObject.Name}
    // the Nam property does not exist but the method will happily accept it
    onChange={(value: string) => updateObject("Nam", value)}
/>
<GenericTextInput
	value={formObject.Name}
    // the Age property is expecting a number but will receive a string, 
    // which may cause errors down the line
    onChange={(value: string) => updateObject("Age", value)}
/>

Index Typing

To help with this problem we can leverage some advanced typescript features that allow us to construct a generic method that will require us to specify only values of properties that exist for a type, as well as the correct types of values to assign to those properties:

helpers.ts

/**
 * Update an object with type safety for both keys and values 
 * @param source any object T
 * @param key any key of object T to update
 * @param value value to update the property K to
 * @return updated object T
 */
export function ChangeObjectValue<T, K extends keyof T>(source: T, key: K, value: T[K]) {
    source[key] = value;
    return { ...source };
}

In the above method we are using a generic type T as the source object, a key of this type K and the value to assign it which is then required to be of index type T[K]. The method is then used like this:

index.tsx

let updatedObj = ChangeObjectValue(formObject, "DateOfBirth", new Date());

T becomes type FormObject. The key parameter will then only accept valid properties of T, such as DateOfBirth in this case. The value parameter will only accept the correct type for the key, which in this case is a Date. Our method returns a 'spread' of the object which creates a new instance, this helps play nice with set hooks.

We can then use this generic method in our input components and can wrap it in a set function if needed:

index.tsx

<GenericTextInput
	value={formObject.Name}
    onChange={(value: string) => setObject(ChangeObjectValue(formObject, "Name", value))}
/>
<GenericDatePicker
	value={formObject.DateOfBirth}
    onChange={(value: Date) => setObject(ChangeObjectValue(formObject, "DateOfBirth", value))}
/>
<GenericNumberField
	value={formObject.Age}
    onChange={(value: number) => setObject(ChangeObjectValue(formObject, "Age", value))}
/>

Mapped and Conditional Typing

We can expend this concept to make our method only allow us to update fields of a certain type. For example, if we had a user picker that returned a string Id and multiple user fields on an object, we only want to be able to update those user fields from this component.

To do this we leverage mapped and conditional types in typescript:

helpers.ts

/**
 * @param T Type to ensure keys on
 * @param V Value of type to ensure
 * @return New generic type
 */
export type KeysMatching<T, V> = { [K in keyof T]: T[K] extends V ? K : never }[keyof T];

Here we have created a new type that requires an object T and a second parameter as the type that we want to specify, V. This returns a set of properties that use K in T.

The type definition takes the generic objects keys K and then looks for types that match the type V , from which it conditionally returns either the property of the specified type or never. It then filters this list to only return valid properties (i.e. removes all never entries).

We can then use this type in a generic method to only allow mutation of the specified properties:

MyObject.ts

export class MyObject {
    public Name: string;
    public Age: number;
    public Mother: User;
    public Father: User;
}

index.tsx

// we consume the new type definition by using it as our key type and 
// specifying our generic object, and the type we wish to filter to
// the value parameter in this case can be any type (in this case string) to
// be used to get the correct type for the key
function changeUserValue(key: KeysMatching<MyObject, User>, value: string) {
	let user = users.filter(item => item.id === value)[0];
    // once we have our correct value we can use our type inference method from above
    // to safely update our User property
	ChangeObjectValue(myObj, key, user);
}

Using the method

The above method only allows changes to properties that are of type User and only accepts string values. In our user picker example the usage might be something like:

index.tsx

// available key values on this method would be ["Mother", "Father"]
<UserPicker
	selectedId={myObj.Mother.Id}
	onChange={(value: string) => changeUserValue("Mother", value)}
/>

The fact that our type safe method only allows us to update specific User fields on an object means we end up with fewer mistakes, that in some cases, can be quite difficult to debug.

In Prod

← Back to Posts

Type safe updates using type inference

Index Typing

Mapped and Conditional Typing

Using the method