Immutability with Typescript

The next step to learn how to use Functional Programming with Typescript is to understand the concept of Immutability.

If we go by the dictionary description we can simply say that Immutability means “not capable of or susceptible to change”.

Sometimes when we start learning how to code or we start with Javascript coming from other languages we start by looking at examples that show how to create variables (var/let) and constants, the difference in scope, and such.

We see examples like:

var a: number = 1;
var b: number = 2;
var result: number | undefined = undefined;
let sum = (): void => {
  result = a + b;
};
sum();
console.log(result); // 3

With this small example, we can showcase how some of the rules for functional programming are broken like the concept of a Pure Function.

We can also see how variables have changing values which produces uncertainty at the time to make use of them. A quick way of implementing a functional approach with Immutability would be the following.

// we can skip adding the type as a constant will never change
const a = 1;
const b = 2;
// we remove the side effect and convert it to a pure function
const sum = (a: number, b: numb): number => a + b;
const result = sum();
// We remove the usage of var and let to use constants only
console.log(result); // 3

When executing asynchronous processes in Javascript which update values from variables this can get really complicated really fast. As if we use those variables to feed other functions we might have different results depending on how the event loop executes each of the functions.

Object Immutability

There are two main ways of protecting an object from mutating, these are:

1. Javascript util functions. Which determines the access level the application code can have over the object.

Breaking one of the Javascript rules during the run time would throw an Error.

2. And the second one is by using Typescript, where you can define types and interfaces which can have read-only fields. These can be achieved by either going field by field specifying which ones are read-only or by using the ReadOnlyutility type.

type TUser = {
  readonly name: string;
  readonly email: string;
  readonly password: string;
};
type TUser = Readonly<{
  name: string;
  email: string;
  password: string;
}>;

Breaking the Typescript ReadOnly rule would prompt an error in the console during development.

React Example

React components can be defined as pure functions, and an anti-pattern is to modify the props that are passed as parameters to the component.

To ensure that this doesn’t happen, we can apply both of the solutions we discussed above.

If we decide to update any of the values for the user object we’ll get an error like this:

By applying the freeze Javascript Object function to the object (without assigning it a type) we get the same error.

Conclusion

1. Immutability is one of the key features of the Functional Programming paradigm as it’s at the core of pure functions.
2. Applying immutability to your code base will increase the predictability and reduce the race conditions issues you might encounter when executing asynchronous processes.
3. There are two ways to enforce object immutability, one is by using Typescript and the other is with Javascript which protects you during run time.

This blog post is part of the Functional Programming with Typescript series on how to integrate functional programming principles for your application while keeping it type-safe with Typescript.

Introduction | Pev < | Next >