tslint-immutable

TSLint rules to disable mutation in TypeScript.

:warning: TSLint will be deprecated some time in 2019. See this issue for more details: Roadmap: TSLint → ESLint.

:rocket: Work has started to port these rules to a new eslint plugin over at the eslint-plugin-functional repo. Please head over there and give it a :star: :-).

Background

In some applications it is important to not mutate any data, for example when using Redux to store state in a React application. Moreover immutable data structures has a lot of advantages in general so I want to use them everywhere in my applications.

I originally used immutablejs for this purpose. It is a really nice library but I found it had some drawbacks. Specifically when debugging it was hard to see the structure, creating JSON was not straightforward, and passing parameters to other libraries required converting to regular mutable arrays and objects. The seamless-immutable project seems to have the same conclusions and they use regular objects and arrays and check for immutability at run-time. This solves all the aformentioned drawbacks but introduces a new drawback of only being enforced at run-time. (Altough you loose the structural sharing feature of immutablejs with this solution so you would have to consider if that is something you need).

Then typescript 2.0 came along and introduced readonly options for properties, indexers and arrays. This enables us to use regular object and arrays and have the immutability enfored at compile time instead of run-time. Now the only drawback is that there is nothing enforcing the use of readonly in typescript.

This can be solved by using linting rules. So the aim of this project is to leverage the type system in typescript to enforce immutability at compile-time while still using regular objects and arrays.

Installing

npm install tslint-immutable --save-dev

See the example tslint.json file for configuration.

Compability

• tslint-immutable 5.x.x requires typescript >=2.8, node >=6, and tslint 5.x.x.
• tslint-immutable 3.x.x requires tslint 5.x.x.
• tslint-immutable 2.x.x requires tslint 4.x.x.
• tslint-immutable 1.x.x requires tslint 3.x.x.

TSLint Rules

In addition to immutable rules this project also contains a few rules for enforcing a functional style of programming. The following rules are available:

• Immutability rules
  • readonly-keyword
  • readonly-array
  • no-let
  • no-array-mutation
  • no-object-mutation
  • no-method-signature
  • no-delete
• Functional style rules
  • no-this
  • no-class
  • no-mixed-interface
  • no-expression-statement
  • no-if-statement
  • no-loop-statement
  • no-throw
  • no-try
  • no-reject
• Recommended built-in rules

Immutability rules

readonly-keyword

This rule enforces use of the

readonly

readonly

Below is some information about the

readonly

You might think that using

const

const

interface Point {
  x: number;
  y: number;
}
const point: Point = { x: 23, y: 44 };
point.x = 99; // This is legal

This is why the

readonly

interface Point {
  readonly x: number;
  readonly y: number;
}
const point: Point = { x: 23, y: 44 };
point.x = 99; // 
This is just as effective as using Object.freeze() to prevent mutations in your Redux reducers. However the 
readonly
 modifier has no run-time cost, and is enforced at compile time. A good alternative to object mutation is to use the ES2016 object spread syntax that was added in typescript 2.1:
interface Point {
  readonly x: number;
  readonly y: number;
}
const point: Point = { x: 23, y: 44 };
const transformedPoint = { ...point, x: 99 };

Note that you can also use object spread when destructuring to delete keys in an object:
let { [action.id]: deletedItem, ...rest } = state;

The 
readonly
 modifier also works on indexers:
const foo: { readonly [key: string]: number } = { a: 1, b: 2 };
foo["a"] = 3; // Error: Index signature only permits reading

Has Fixer

Yes

Options

• ignore-local
• ignore-class
• ignore-interface
• ignore-prefix
• ignore-suffix
• ignore-pattern

Example config

"readonly-keyword": true

"readonly-keyword": [true, "ignore-local"]

"readonly-keyword": [true, "ignore-local", {"ignore-prefix": "mutable"}]

readonly-array

This rule enforces use of

ReadonlyArray

readonly T[]

Array

T[]

Below is some information about the

ReadonlyArray

Even if an array is declared with

const

interface Point {
  readonly x: number;
  readonly y: number;
}
const points: Array = [{ x: 23, y: 44 }];
points.push({ x: 1, y: 2 }); // This is legal

Using the

ReadonlyArray

readonly T[]

interface Point {
  readonly x: number;
  readonly y: number;
}

const points: ReadonlyArray = [{ x: 23, y: 44 }];
// const points: readonly Point[] = [{ x: 23, y: 44 }]; // This is the alternative syntax for the line above
points.push({ x: 1, y: 2 }); // Unresolved method push()

Has Fixer

Yes

Options

• ignore-local
• ignore-prefix
• ignore-suffix
• ignore-pattern
• ignore-return-type
• ignore-rest-parameters

Example config

"readonly-array": true

"readonly-array": [true, "ignore-local"]

"readonly-array": [true, "ignore-local", {"ignore-prefix": "mutable"}]

no-let

This rule should be combined with tslint's built-in

no-var-keyword

const

There's no reason to use

let

const

let x = 5; // 
What about 
for
 loops? Loops can be replaced with the Array methods like 
map
, 
filter
, and so on. If you find the built-in JS Array methods lacking, use ramda, or lodash-fp.
const SearchResults = ({ results }) => (
  

{results.map(result => (
• result
)) // );

Has Fixer

Yes

Options

• ignore-local
• ignore-prefix
• ignore-suffix
• ignore-pattern

Example config

"no-let": true

"no-let": [true, "ignore-local"]

"no-let": [true, "ignore-local", {"ignore-prefix": "mutable"}]

no-array-mutation

This rule prohibits mutating an array via assignment to or deletion of their elements/properties. This rule enforces array immutability without the use of

ReadonlyArray

const x = [0, 1, 2];

x[0] = 4; // 
Has Fixer

No

Options

• ignore-prefix
• ignore-suffix
• ignore-pattern
• ignore-new-array
• ~~ignore-mutation-following-accessor~~ - deprecated in favor of ignore-new-array

Example config

"no-array-mutation": true

"no-array-mutation": [true, {"ignore-prefix": "mutable"}]

"no-array-mutation": [true, "ignore-new-array"]

no-object-mutation

This rule prohibits syntax that mutates existing objects via assignment to or deletion of their properties. While requiring the

readonly

a.b = 'c'

const x = { a: 1 };

x.foo = "bar"; // 
Has Fixer

No

Options

• ignore-prefix
• ignore-suffix
• ignore-pattern

Example config

"no-object-mutation": true

"no-object-mutation": [true, {"ignore-prefix": "mutable"}]

no-method-signature

There are two ways function members can be declared in an interface or type alias:

interface Zoo {
  foo(): string; // MethodSignature, cannot have readonly modifier
  readonly bar: () => string; // PropertySignature
}

The

MethodSignature

PropertySignature

PropertySignature

readonly

MethodSignature

no-method-signature

PropertySignature

readonly

PropertySignature

no-delete

The delete operator allows for mutating objects by deleting keys. This rule disallows any delete expressions.

delete object.property; // Unexpected delete, objects should be considered immutable.

As an alternative the spread operator can be used to delete a key in an object (as noted here):

const { [action.id]: deletedItem, ...rest } = state;

Functional style rules

no-this, no-class

Thanks to libraries like recompose and Redux's React Container components, there's not much reason to build Components using

React.createClass

no-this

const Message = React.createClass({
  render: function() {
    return 
{this.props.message}
; // 
Instead of creating classes, you should use React 0.14's Stateless Functional Components and save yourself some keystrokes:
const Message = ({ message }) => 
{message}
;

What about lifecycle methods like 
shouldComponentUpdate
? We can use the recompose library to apply these optimizations to your Stateless Functional Components. The recompose library relies on the fact that your Redux state is immutable to efficiently implement shouldComponentUpdate for you.
import { pure, onlyUpdateForKeys } from "recompose";

const Message = ({ message }) => 
{message}
;

// Optimized version of same component, using shallow comparison of props
// Same effect as React's PureRenderMixin
const OptimizedMessage = pure(Message);
// Even more optimized: only updates if specific prop keys have changed
const HyperOptimizedMessage = onlyUpdateForKeys(["message"], Message);

no-mixed-interface

Mixing functions and data properties in the same interface is a sign of object-orientation style. This rule enforces that an inteface only has one type of members, eg. only data properties or only functions.

no-expression-statement

When you call a function and don’t use it’s return value, chances are high that it is being called for its side effect. e.g.
array.push(1);
alert("Hello world!");

This rule checks that the value of an expression is assigned to a variable and thus helps promote side-effect free (pure) functions.

Options

• ignore-prefix

Example config

"no-expression-statement": true

"no-expression-statement": [true, {"ignore-prefix": "console."}]

"no-expression-statement": [true, {"ignore-prefix": ["console.log", "console.error"]}]

no-if-statement

If statements is not a good fit for functional style programming as they are not expresssions and do not return a value. This rule disallows if statements.

let x;
if (i === 1) {
  x = 2;
} else {
  x = 3;
}

Instead consider using the tenary operator which is an expression that returns a value:

const x = i === 1 ? 2 : 3;

For more background see this blog post and discussion in #54.

no-loop-statement

In functional programming we want everthing to be an expression that returns a value. Loops in typescript are statements so they are not a good fit for a functional programming style. This rule disallows for loop statements, including

for

for...of

for...in

while

do...while

const numbers = [1, 2, 3];
const double = [];
for (let i = 0; i < numbers.length; i++) {
  double[i] = numbers[i] * 2;
}

Instead consider using

map

reduce

const numbers = [1, 2, 3];
const double = numbers.map(n => n * 2);

For more background see this blog post and discussion in #54.

no-throw

Exceptions are not part of functional programming.

throw new Error("Something went wrong."); // Unexpected throw, throwing exceptions is not functional.

As an alternative a function should return an error:

function divide(x: number, y: number): number | Error {
  return y === 0 ? new Error("Cannot divide by zero.") : x / y;
}

Or in the case of an async function, a rejected promise should be returned.

async function divide(x: Promise, y: Promise): Promise {
  const [xv, yv] = await Promise.all([x, y]);

  return yv === 0
    ? Promise.reject(new Error("Cannot divide by zero."))
    : xv / yv;
}

no-try

Try statements are not part of functional programming. See no-throw for more information.

no-reject

You can view a

Promise

{ value: number } | { error: Error }

Promise

no-reject

async function divide(
  x: Promise,
  y: Promise
): Promise {
  const [xv, yv] = await Promise.all([x, y]);

  // Rejecting the promise is not allowed so resolve to an Error instead
  // return yv === 0
  //   ? Promise.reject(new Error("Cannot divide by zero."))
  //   : xv / yv;
  return yv === 0 ? new Error("Cannot divide by zero.") : xv / yv;
}

Options

Using the

ignore-local

option

If a tree falls in the woods, does it make a sound? If a pure function mutates some local data in order to produce an immutable return value, is that ok?

The quote above is from the clojure docs. In general, it is more important to enforce immutability for state that is passed in and out of functions than for local state used for internal calculations within a function. For example in Redux, the state going in and out of reducers needs to be immutable while the reducer may be allowed to mutate local state in its calculations in order to achieve higher performance. This is what the

ignore-local

Note that using this option can lead to more imperative code in functions so use with care!

Using the

ignore-class

option

Doesn't check for

readonly

Using the

ignore-interface

option

Doesn't check for

readonly

Using the

ignore-rest-parameters

option

Doesn't check for

ReadonlyArray

Using the

ignore-return-type

option

Doesn't check the return type of functions.

Using the

ignore-prefix

option

Some languages are immutable by default but allows you to explicitly declare mutable variables. For example in reason you can declare mutable record fields like this:

type person = {
  name: string,
  mutable age: int
};

Typescript is not immutable by default but it can be if you use this package. So in order to create an escape hatch similar to how it is done in reason the

ignore-prefix

type person = {
  readonly name: string;
  mutableAge: number; // This is OK with ignore-prefix = "mutable"
};

Yes, variable names like

mutableAge

Using the

ignore-suffix

option

Like ignore-prefix but with suffix matching instead of prefix matching.

Using the

ignore-pattern

option

Like ignore-prefix and ignore-suffix but with more control.

This option allows you to specify dot seperated paths what should be ignored.

For example, the following config would ignore all object mutations for all properties that start with "mutable".

{
  "no-object-mutation": [true, { "ignore-pattern": "**.mutable*" }]
}

The following wildcards can be used when specifing a pattern:

• **

  - Match any depth (including zero). Can only be used as a full accessor.

• *

  - When used as a full accessor, match the next accessor. When used as part of an accessor, match any characters.

Using the

ignore-prefix

option with

no-expression-statement

Expression statements typically cause side effects, however not all side effects are undesirable. One example of a helpful side effect is logging. To not get warning of every log statement, we can configure the linter to ignore well known expression statement prefixes.

One such prefix could be

console.

const doSomething(arg:string) => {
  if (arg) {
    console.log("Argument is", arg);
  } else {
    console.warn("Argument is empty!");
  }
  return `Hello ${arg}`;
}

Using the

ignore-new-array

option with

no-array-mutation

This option allows for the use of array mutator methods to be chained to newly created arrays.

For example, an array can be immutably sorted like so:

const original = ["foo", "bar", "baz"];
const sorted = original.slice().sort((a, b) => a.localeCompare(b)); // This is OK with ignore-new-array - note the use of the `slice` method which returns a copy of the original array.

Recommended built-in rules

no-var-keyword

Without this rule, it is still possible to create

var

no-parameter-reassignment

Without this rule, function parameters are mutable.

typedef with call-signature option

For performance reasons, tslint-immutable does not check implicit return types. So for example this function will return an mutable array but will not be detected (see #18 for more info):

function foo() {
  return [1, 2, 3];
}

To avoid this situation you can enable the built in typedef rule like this:

"typedef": [true, "call-signature"]

Now the above function is forced to declare the return type becomes this and will be detected.

Sample Configuration File

Here's a sample TSLint configuration file (tslint.json) that activates all the rules:

{
  "extends": ["tslint-immutable"],
  "rules": {

// Recommended built-in rules
"no-var-keyword": true,
"no-parameter-reassignment": true,
"typedef": [true, "call-signature"],

// Immutability rules
"readonly-keyword": true,
"readonly-array": true,
"no-let": true,
"no-object-mutation": true,
"no-delete": true,
"no-method-signature": true,

// Functional style rules
"no-this": true,
"no-class": true,
"no-mixed-interface": true,
"no-expression-statement": true,
"no-if-statement": true
  }
}

It is also possible to enable all the rules in tslint-immutable by extending

tslint-immutable/all

{
  "extends": ["tslint-immutable/all"]
}

How to contribute

For new features file an issue. For bugs, file an issue and optionally file a PR with a failing test. Tests are really easy to do, you just have to edit the

*.ts.lint

How to develop

To execute the tests first run

yarn build

yarn test

While working on the code you can run

yarn test:work

yarn test:work

package.json

Please review the tslint performance tips in order to write rules that run efficiently at run-time. For example, note that using

SyntaxWalker

RuleWalker

class

AbstractRule

this.applyWithFunction

In order to know which AST nodes are created for a snippet of typescript code you can use ast explorer.

How to publish

yarn version --patch
yarn version --minor
yarn version --major

Prior work

This work was originally inspired by eslint-plugin-immutable.