TypeScript: ReadonlyArray

Dando continuidade à minha série de artigos sobre TypeScript, hoje eu irei escrever sobre um modificador de acessos adicionado na versão 3.4 para arrays e tuplas, o readonly.

Mas antes de falar sobre ele, vamos dar uma passada no type ReadonlyArray<T>.

Para quem não conhece, o readonlyArray<T> remove todos métodos de alteração de um array como: push, pop… etc.

Abaixo você tem um exemplo de como utilizar ele:

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 nas linhas 2,3,4,5 e 6 que nós não conseguimos alterar o seu valor.

Agora que estamos alinhados com ReadonlyArray<T>, vamos ao modificador readonly.

Ele funciona da mesma forma que nós vimos no exemplo anterior, a unica diferença é a sua sintaxe, nessa nova versão está mais simples e nós podemos utilizar ele também com tuplas.

Caso você não tenha visto nada sobre tuplas no TypeScript, eu recomendo a leitura do seguinte artigo: TypeScript Tuplas.

Agora vamos alterar o ReadonlyArray<T> do exemplo anterior para readonly e navegar por ele utilizando o for.

Abaixo você tem um trecho de código demonstrando essa alteração:

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
*/

Como você pode ver no exemplo acima, nós alteramos de ReadOnlyArray para readonly e ele funcionou da mesma forma.

E conforme passei acima, nessa nossa versão nós também podemos utilizar o moderador readonly com tuplas:

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));

Resultado: 15

Dai vem aquela pergunta, onde eu poderia utilizar ele ou onde encontrar um exemplo prático utilizando ele?

Pensando nisso eu dei uma pesquisa em algumas bibliotecas no portal NPM e encontrei uma biblioteca que exporta dados json para um arquivo .csv chamado json2csv.

Analisando as suas chamadas eu encontrei o método abaixo:

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

Note que ele recebe como parâmetro o readonlyArray<T>.

Bom, a ideia desse artigo era demonstrar mais uma das novidades do TypeScript 3.4 através de alguns exemplos práticos 😉

Espero que tenham gostado e até um próximo artigo pessoal 😉