TypeScript: ReadonlyArray

Continuing my series of articles about TypeScript, today I'll write about an access modifier added in version 3.4 for arrays and tuples, readonly.

But before talking about it, let's take a look at the type ReadonlyArray<T>.

For those who don't know it, readonlyArray<T> removes all mutation methods from an array, such as: push, pop… etc.

Below you have an example of how to use it:

let arrNumber: number[] = [1, 2, 3, 4];
let readOnlyArr: ReadonlyArray<number> = arrNumber;
readOnlyArr[0] = 12; // error!
readOnlyArr.push(5); // error!
readOnlyArr.length = 100; // error!
a = readOnlyArr; // error!

Note that on lines 2, 3, 4, 5 and 6 we can't change its value.

Now that we're aligned on ReadonlyArray<T>, let's move to the readonly. modifier.

It works the same way as we saw in the previous example, the only difference is its syntax, which in this new version is simpler, and we can also use it with tuples.

In case you haven't seen anything about tuples in TypeScript, I recommend reading the following article: TypeScript Tuplas.

Now let's change the ReadonlyArray<T> from the previous example to readonly and iterate through it using for.

Below you have a code snippet demonstrating this change:

let arrNumber: number[] = [1, 2, 3, 4];
let readOnlyArr: Readonly<number[]> = arrNumber;


for (let index = 0; index < readOnlyArr.length; index++) {
    const element = readOnlyArr[index];
    console.log(element);
}

/*
Resultado:
1
2
3
4
*/

As you can see in the example above, we changed from ReadOnlyArray to readonly and it worked the same way.

And as I mentioned above, in this version we can also use the readonly modifier with tuples:

class Calc {
    somaComTuplas(numbs: readonly[number, number]) {
    const x = numbs[0] + numbs[1];
    return x;
 }
}


const readonlyTuple: readonly[number, number] =[10, 5];
let c = new Calc();
console.log(c.somaComTuplas(readonlyTuple));

Result: 15

Then comes that question, where could I use it, or where could I find a practical example using it?

Thinking about that, I did some research on a few libraries on the NPM portal and found a library that exports json data to a .csv file called json2csv.

Looking at its calls I found the method below:

export function parseAsync<T>(
    data: Readonly<T> | ReadonlyArray<T> | Readable,
    opts?: json2csv.Options<T>,
    transformOpts?: TransformOptions
): Promise<string>;

Note that it takes readonlyArray<T>. as a parameter.

Well, the idea of this article was to demonstrate one more of the new features in TypeScript 3.4 through a few practical examples 😉

I hope you enjoyed it, and see you in a next article, folks 😉