web-dev-qa-db-fra.com

TypeScript renvoie un tableau immuable / const / readonly

Je veux avoir une fonction qui retourne un tableau, mais je veux que le tableau retourné soit en lecture seule, donc je devrais recevoir un avertissement/erreur lorsque j'essaie de changer son contenu.

function getList(): readonly number[] {
   return [1,2,3];
}


const list = getList();
list[2] = 5; // This should result in a compile error, the returned list should never be changed

Cela peut-il être réalisé dans TypeScript?

javascripttypescriptimmutabilityreadonly
14
XCS

Cela semble fonctionner ...

function getList(): ReadonlyArray<number> {
    return [1, 2, 3];
}

const list = getList();

list[0] = 3; // Index signature in type 'ReadonlyArray<number>' only permits reading.

Essayez-le dans le Playground

ReadonlyArray<T> est implémenté comme ceci:

interface ReadonlyArray<T> {
    readonly [n: number]: T;
    // Rest of the interface removed for brevity.
}
10
Matthew Layton

Le code même d'OP fonctionne maintenant depuis TypeScript 3.4 a introduit une nouvelle syntaxe pour ReadonlyArray :

Bien qu'il soit recommandé d'utiliser ReadonlyArray sur Array lorsqu'aucune mutation n'est prévue, cela a souvent été un problème étant donné que les tableaux ont une syntaxe plus agréable. Plus précisément, number[] est une version abrégée de Array<number>, tout comme Date[] est un raccourci pour Array<Date>.

TypeScript 3.4 introduit une nouvelle syntaxe pour ReadonlyArray en utilisant un nouveau modificateur readonly pour les types de tableau.

Ce code fonctionne désormais comme prévu:

function getList(): readonly number[] {
   return [1,2,3];
}

const list = getList();
list[2] = 5; // <-- error

Aire de jeux .

4
Borek Bernard

Ce qui suit rendra la liste en lecture seule mais pas les éléments qu'elle contient:

function getList(): Readonly<number[]> {
   return [1,2,3];
}

let list = getList();
list = 10; // error
list[1] = 5 // that is fine

Et celui-ci rendra la liste et les éléments de celle-ci en lecture seule:

function getList(): ReadonlyArray<number> {
   return [1,2,3];
}

let list = getList();
list = 10; // error
list[1] = 5 // error as well
3
Avraam Mavridis

TypeScript a un ReadonlyArray<T> type qui fait ceci:

TypeScript est livré avec un type ReadonlyArray identique à Array, toutes les méthodes de mutation étant supprimées, vous pouvez donc vous assurer de ne pas modifier vos tableaux après leur création.

function getList(): ReadonlyArray<number> {
   return [1,2,3];
}

const list = getList();
list[2] = 5; // error

for (const n of list) {
    console.log(n);
}
1
millimoose