TypeScript Arrays : comment créer et manipuler des tableaux TypeScript ?
Le typage statique permet au compilateur TypeScript de surveiller le type de données des éléments d’un tableau. Les TypeScript Arrays réduisent ainsi le risque d’erreurs dans votre code, ce qui vous permet de développer des applications plus sûres et plus fiables.
TypeScript Arrays : définition et explication
En TypeScript, les tableaux sont appelés Arrays. Il s’agit en fait de listes ordonnées de valeurs permettant, comme en JavaScript, de stocker une collection d’éléments. Ces éléments peuvent avoir différents types de données, y compris des nombres, des chaînes de caractères, des objets ou même d’autres tableaux. TypeScript présente l’avantage de supporter le typage statique, ce qui signifie que vous pouvez définir le type de données des éléments dans un tableau. Cela améliore notamment la détection des erreurs lors du développement.
Une caractéristique décisive des tableaux est leur taille dynamique. Cela vous permet d’ajouter ou de supprimer des éléments sans avoir à déterminer leur taille à l’avance. Les TypeScript Arrays sont modifiables par défaut, mais vous pouvez également créer des tableaux immuables en utilisant des méthodes comme map
et filter
.
Les tableaux facilitent le filtrage, le tri et l’itération sur les éléments et fournissent une structure cohérente pour l’organisation des données. De plus, ils peuvent servir de base à l’implémentation de structures de données telles que les piles (LIFO, Last-In-First-Out) et les files d’attente (FIFO, First-In-First-Out). Ils conviennent aussi à la représentation de listes, de tableaux et de collections dans une multitude d’applications. En facilitant la gestion d’éléments du même type, les tableaux sont particulièrement utiles pour traiter des données provenant de sources externes, qu’il s’agisse d’API ou de bases de données.
TypeScript Arrays : quelle syntaxe ?
En TypeScript, les tableaux sont déclarés avec les mots-clés let
, const
ou var
suivis d’un nom de variable et d’une indication de type de données. La déclaration du type de données se fait par deux points et indique le type de données que les éléments du tableau doivent avoir. Ces éléments sont placés entre crochets et séparés par des virgules dans un bloc d’initialisation du tableau.
La syntaxe générale pour déclarer un tableau TypeScript se présente comme suit :
const variableName: datatype[] = [element1, element2, ...];
typescript- variableName : le nom que vous avez choisi pour le tableau
- datatype : le type de données que les éléments du tableau doivent avoir
- [element1, element2, …] : les éléments ou valeurs réels qui doivent être stockés dans le tableau. Ces éléments doivent avoir le type de données défini précédemment
Voici plusieurs exemples pour illustrer la syntaxe :
// Data type: Number
const numbers: number[] = [1, 2, 3, 4, 5];
// Data type: String
const numbers: string[] = ["Alice", "Bob", "Charlie"];
// Data type: Boolean
const booleans: boolean[] = [true, false];
typescriptTypeScript Arrays : les méthodes de tableaux à connaître
Les méthodes de tableau TypeScript sont extrêmement utiles et puissantes, car elles vous permettent de traiter, de transformer et d’organiser efficacement des données dans des tableaux. Le tableau suivant vous donne un aperçu des méthodes courantes dans TypeScript et de leurs domaines d’application.
Méthode | Explication |
---|---|
push()
|
Ajoute un ou plusieurs éléments à la fin du tableau et retourne la nouvelle longueur du tableau. |
pop()
|
Supprime le dernier élément du tableau et le retourne. |
unshift()
|
Ajoute un ou plusieurs éléments au début du tableau et retourne la nouvelle longueur du tableau. |
shift()
|
Supprime le premier élément du tableau et le retourne. |
concat()
|
Combine le tableau courant avec un ou plusieurs autres tableaux et retourne un nouveau tableau. Le tableau original reste inchangé. |
join(separator)
|
Convertit les éléments du tableau en une chaîne de caractères et la retourne, en choisissant un séparateur pour les éléments. |
slice(start, end)
|
Crée une copie plate du tableau, composée des éléments compris entre les indices start (inclus) et end (exclus) indiqués. Le tableau original reste inchangé.
|
splice(start, deleteCount, element1, element2, ...)
|
Insère de nouveaux éléments à la position indiquée et/ou supprime des éléments du tableau. |
forEach(callback)
|
Exécute une fonction fournie pour chaque élément du tableau. |
map(callback)
|
Crée un nouveau tableau en appliquant une fonction à chaque élément du tableau. |
filter(callback)
|
Crée un nouveau tableau contenant tous les éléments pour lesquels la fonction fournie renvoie true .
|
TypeScript Arrays : exemples d’utilisation
Les tableaux TypeScript sont des outils indispensables lorsqu’il s’agit d’organiser et de traiter des données dans des applications. Nous vous présentons quelques-unes des principales opérations.
Accès aux éléments d’un tableau
L’accès aux éléments d’un tableau dans TypeScript est une opération de base qui vous permet de récupérer des éléments spécifiques dans un tableau. Vous pouvez accéder aux éléments d’un tableau à l’aide de leur index, qui représente leur position dans le tableau. En TypeScript, l’indexation des tableaux est basée sur le zéro. Le premier élément a donc l’index 0 et le deuxième l’index 1.
let myArray: number[] = [10, 20, 30, 40, 50];
// Accessing elements using index
let firstElement: number = myArray[0]; // Output: 10
let secondElement: number = myArray[1]; // Output: 20
let thirdElement: number = myArray[2]; // Output: 30
// Assigning a new value to an array element
myArray[3] = 99; // 4th element in myArray = 99
typescriptDéstructuration d’un tableau
La déstructuration de tableau en TypeScript permet d’extraire rapidement et facilement des valeurs d’un tableau et de les affecter à des variables.
let numberArray: number[] = [1, 2, 3];
// Array destructuring
let [firstNumber, secondNumber, thirdNumber] = numberArray;
// Access values
console.log(firstNumber); // Outputs 1
console.log(secondNumber); // Outputs 2
console.log(thirdNumber); // Outputs 3
typescriptItération sur les éléments dans les tableaux TypeScript
Voici un exemple d’itération sur un tableau en TypeScript à l’aide d’une boucle for :
let numbers: number[] = [1, 2, 3, 4, 5];
for (let i = 0; i < numbers.length; i++) {
console.log(numbers[i]);
}
typescriptDans cet exemple, nous avons un tableau numbers
contenant des nombres. Nous utilisons une boucle for pour itérer dans le tableau. La boucle commence à i = 0
et nous augmentons i
à chaque passage de la boucle. Avec numbers[i]
, nous accédons à l’élément respectif du tableau et le retournons.
Nous obtenons alors la sortie :
1
2
3
4
5
typescript- Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
- 1 certificat SSL Wildcard par contrat
- Boîte email de 2 Go
![](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/IAS/CTAs/SEO_Digital_Guide_Mobile_nur-Nlement_900x750.png)