Déstructuration d'objet en TypeScript : Extraire des valeurs d'un objet simplement

La déstructuration d'objet est une technique en TypeScript (et JavaScript) qui permet d'extraire facilement les valeurs d'un objet et de les stocker dans des variables séparées.

Dans cet article, nous allons expliquer la syntaxe de la déstructuration d'objet en TypeScript, comment extraire des valeurs à partir d'objets imbriqués, utiliser des alias pour les variables extraites et l'utiliser dans les fonctions.

Nous aborderons également les erreurs courantes à éviter lors de l'utilisation de la déstructuration d'objet.

Syntaxe de la déstructuration d'objet en TypeScript

La syntaxe de la déstructuration d'objet est simple. Elle implique l'utilisation de crochets pour entourer les noms des variables et d'un objet à extraire les valeurs.

Voici un exemple :

const person: { firstName: string; firstName: string } = {
  firstName: 'John',
  lastName: 'Doe'
};
const { firstName, lastName } = person;
console.log(firstName); // John
console.log(lastName); // Doe

Dans cet exemple, nous avons un objet person avec deux propriétés firstName et lastName. Nous utilisons la déstructuration d'objet pour extraire ces propriétés dans les variables firstName et lastName.
Nous pouvons alors utiliser ces variables pour afficher les valeurs correspondantes.

Extraction de valeurs d'objets imbriqués

La déstructuration d'objet peut également être utilisée pour extraire des valeurs à partir d'objets imbriqués.

const person: {
  firstName: string;
  firstName: string;
  adress: { city: string; state: string };
} = {
  firstName: 'John',
  lastName: 'Doe',
  address: {
    city: 'New York',
    state: 'NY'
  }
};
const {
  address: { city, state }
} = person;
console.log(city); // New York
console.log(state); // NY

Dans cet exemple, nous utilisons la déstructuration d'objet pour extraire les propriétés city et state de l'objet address qui est lui-même une propriété de l'objet person.
Nous stockons ces valeurs dans les variables city et state.

Utilisation d'alias pour les variables extraites

Il est possible d'utiliser un alias pour la variable extraite en utilisant la déstructuration d'objet. Cela peut aider à clarifier le code et à le rendre plus lisible.

const person: { firstName: string; firstName: string } = {
  firstName: 'John',
  lastName: 'Doe'
};
const { firstName: first, lastName: last } = person;
console.log(first); // John
console.log(last); // Doe

Dans cet exemple, nous utilisons un alias pour les variables extraites. Nous stockons la propriété firstName de l'objet person dans la variable first et la propriété lastName dans la variable last.

Utilisation de la déstructuration d'objet dans les fonctions

La déstructuration d'objet peut également être utilisée dans les fonctions pour extraire les valeurs des paramètres. Cela peut aider à rendre les fonctions plus expressives et plus faciles à comprendre.

function printPerson({
  firstName,
  lastName
}: {
  firstName: string;
  lastName: string;
}): void {
  console.log(`${firstName} ${lastName}`);
}

const person: { firstName: string; lastName: string } = {
  firstName: 'John',
  lastName: 'Doe'
};
printPerson(person);

Dans cet exemple, nous avons une fonction printPerson qui prend un objet avec deux propriétés firstName et lastName comme paramètre. Nous utilisons la déstructuration d'objet pour extraire ces propriétés dans les variables firstName et lastName.
Nous pouvons alors utiliser ces variables pour afficher le nom de la personne.

Erreurs courantes à éviter

Lors de l'utilisation de la déstructuration d'objet, il y a quelques erreurs courantes que les développeurs peuvent rencontrer. Voici quelques-unes des erreurs les plus courantes et comment les éviter :

Objet indéfini ou null : Si l'objet que vous essayez de destructurer est indéfini ou null, cela entraînera une erreur. Pour éviter cela, vous pouvez utiliser une valeur par défaut en cas d'objet indéfini ou null.

const person = undefined;
const { firstName = 'John', lastName = 'Doe' } = person || {};
console.log(firstName); // John
console.log(lastName); // Doe

Propriété manquante : Si la propriété que vous essayez de destructurer n'existe pas dans l'objet, cela entraînera une erreur. Pour éviter cela, vous pouvez utiliser une valeur par défaut pour la propriété manquante.

const person = { firstName: 'John' };
const { firstName, lastName = 'Doe' } = person;
console.log(firstName); // John
console.log(lastName); // Doe

Conclusion

En utilisant la déstructuration d'objet en TypeScript, vous pouvez extraire facilement les valeurs d'un objet et les stocker dans des variables séparées. Cela peut aider à simplifier la syntaxe du code et à rendre les variables plus faciles à utiliser.
Vous pouvez également utiliser la déstructuration d'objet dans les fonctions pour rendre votre code plus expressif et plus facile à comprendre.
En évitant les erreurs courantes, vous pouvez utiliser la déstructuration d'objet en toute confiance pour écrire un code robuste et maintenable.
Typescript étant un sur-ensemble à JavaScript, la déstructuration est également disponible en JavaScript (à partir d'ES6 aka ES2015)