Comment créer un tableau d'objets dans TypeScript

Tableau d'objets TypeScript :

Tableau d'objets peut être défini en TypeScript pour stocker des données d'un type spécifique de manière séquentielle. Similaire à string, int ou tout autre tableau, on peut aussi avoir un tableau d'objets . C'est en fait utile si vous stockez des données de manière orientée objet .

Nous pouvons créer un tableau d'objets en différentes manières. Laissez-moi vous montrer tous un par un.

Méthode 1 :Initialisation en ligne d'un tableau d'objets :

Examinons l'exemple ci-dessous :

let students = [{
    name: 'Alex',
    age: 20
},
{
    name: 'Bob',
    age: 21
}, 
{
    name: 'Charlie',
    age: 20
}];

étudiants est un tableau d'objets. Nous n'avons défini aucun type ici, mais il prendra le type implicitement.

Ceci est similaire à :

let students: {name: string, age: number}[] = [{
    name: 'Alex',
    age: 20
},
{
    name: 'Bob',
    age: 21
}, 
{
    name: 'Charlie',
    age: 20
}];

console.log(students);

Nous imprimons le contenu des étudiants sur console. Il imprimera la sortie ci-dessous :

[
  { name: 'Alex', age: 20 },
  { name: 'Bob', age: 21 },
  { name: 'Charlie', age: 20 }
]

Méthode 2 :Initialisation d'un tableau d'objets avec des propriétés facultatives :

Dans l'exemple ci-dessus, nom et âge sont nécessaires pour chaque objet. Si nous n'en avons aucun dans un objet, il lancera une erreur .

Nous pouvons marquer n'importe quelle propriété comme facultatif pour supprimer cette erreur.

let students: {name: string, age?: number}[] = [{
    name: 'Alex',
    age: 20
},
{
    name: 'Bob',
    age: 21
}, 
{
    name: 'Charlie',
}];

console.log(students);

Dans cet exemple, le troisième objet n'a pas age . Il n'affichera aucune erreur car nous avons marqué âge en option.

Méthode 3 :Créer un tableau d'objets avec une interface :

En tapuscrit, on peut aussi créer un tableau d'objets avec le type défini par une interface . L'interface contiendra la structure de chaque objet et dans le tableau, nous pouvons l'initialiser comme ce type.

interface Student{
    name: string;
    age?: number;
}

let students: Student[] = [{
    name: 'Alex',
    age: 20
},
{
    name: 'Bob',
    age: 21
}, 
{
    name: 'Charlie',
}];

console.log(students);

Dans cet exemple, Étudiant l'interface contient un nom de type chaîne et âge facultatif de type nombre . Nous utilisons l'interface au lieu du type d'objet défini dans les exemples précédents.

Méthode 4 :Création d'un tableau d'objets de type alias :

C'est presque similaire aux interfaces . Nous pouvons utiliser un alias de type au lieu d'une interface.

type Student = {
    name: string;
    age?: number;
}

let students: Student[] = [{
    name: 'Alex',
    age: 20
},
{
    name: 'Bob',
    age: 21
}, 
{
    name: 'Charlie',
}];

console.log(students);

Cela donnera un résultat similaire.

Méthode 5 :Avec une classe :

Au lieu d'interfaces , nous pouvons également utiliser une classe pour définir des objets de ce type de classe.

class Student{
    name: string;
    age?: number;

    constructor(n: string, a?: number){
        this.name = n;
        this.age = a;
    }
}

let students: Student[] = [new Student('Alex', 20), new Student('Bob', 21), new Student('Charlie')];

console.log(students);

Étudiant est une classe avec deux propriétés similaires à l'interface précédente. Nous créons de nouveaux étudiants objets et en les insérant dans le tableau.

Il imprimera :

[
  Student { name: 'Alex', age: 20 },
  Student { name: 'Bob', age: 21 },
  Student { name: 'Charlie', age: undefined }
]

Puisque tous sont étudiants objets de classe, la sortie d'impression est un peu différente de l'exemple précédent.

Opérations sur les tableaux :

Nous pouvons utiliser toutes les opérations de tableau dans un tableau d'objets . Par exemple, l'exemple ci-dessous utilise map pour itérer sur les éléments et imprimer le nom pour chacun :

class Student{
    name: string;
    age?: number;

    constructor(n: string, a?: number){
        this.name = n;
        this.age = a;
    }
}

let students: Student[] = [new Student('Alex', 20), new Student('Bob', 21), new Student('Charlie')];

students.map(s => {
    console.log(s.name);
})

C'est un tableau , afin que toutes les opérations prises en charge par le tableau dactylographié puissent être effectuées.

Vous pourriez également aimer :

• Introduction aux modules en tapuscrit
• Comment convertir une chaîne en un tableau de caractères dans TypeScript à l'aide de split
• Taper toute explication avec exemple
• Comment créer une classe en tapuscrit avec exemple
• Comment convertir n'importe quelle chaîne en texte dactylographié
• Méthode de recherche de chaînes TypeScript