Manipulation des Tableaux et des Objets en Typescript

Salut à tous ! Après notre voyage intergalactique avec les types avancés, revenons sur Terre (ou presque) pour explorer comment manipuler les tableaux et les objets en Typescript.

Pour rendre ça plus amusant, on va utiliser des exemples inspirés des animaux fantastiques. Prépare-toi pour une aventure dans un monde peuplé de créatures incroyables ! 🐉🦄

Typage des Tableaux

Les tableaux sont un type de donnée essentiel en Typescript, nous permettant de regrouper plusieurs valeurs sous un même nom.

Tableaux de Types Primitifs

Imaginons que nous avons une liste de créatures magiques :

let magicalCreatures: string[] = ['Dragon', 'Unicorn', 'Phoenix']
console.log(magicalCreatures)

Ici, magicalCreatures est un tableau de chaînes de caractères (string[]). Chaque élément du tableau doit être une chaîne.

Tableaux d'Objets

Pour gérer des créatures avec plus de détails, nous pouvons utiliser un tableau d'objets. Créons une interface pour définir la structure d'une créature :

interface Creature {
  name: string
  habitat: string
  magicalPower: number
}

let creatures: Creature[] = [
  { name: 'Dragon', habitat: 'Mountains', magicalPower: 100 },
  { name: 'Unicorn', habitat: 'Forests', magicalPower: 80 },
  { name: 'Phoenix', habitat: 'Deserts', magicalPower: 90 },
]

console.log(creatures)

Utilisation des Méthodes de Tableau

Les tableaux en Typescript bénéficient de toutes les méthodes standard de JavaScript, mais avec la sécurité de type ajoutée. Voici quelques exemples pratiques :

Méthode map

La méthode map est utilisée pour transformer chaque élément d'un tableau. Transformons nos créatures pour leur donner une nouvelle puissance magique :

let boostedCreatures = creatures.map((creature) => {
  return { ...creature, magicalPower: creature.magicalPower + 20 }
})

console.log(boostedCreatures)

Méthode filter

La méthode filter permet de créer un nouveau tableau avec tous les éléments qui passent un test. Filtrons les créatures avec une puissance magique supérieure à 85 :

let powerfulCreatures = creatures.filter(
  (creature) => creature.magicalPower > 85,
)
console.log(powerfulCreatures)

Méthode reduce

La méthode reduce réduit un tableau à une seule valeur en appliquant une fonction à chaque élément du tableau. Calculons la puissance magique totale de toutes les créatures :

let totalMagicalPower = creatures.reduce(
  (total, creature) => total + creature.magicalPower,
  0,
)
console.log(`Total Magical Power: ${totalMagicalPower}`)

Manipulation des Objets

Les objets sont des collections de paires clé-valeur. Typescript nous permet de définir des types et des interfaces pour décrire la forme de ces objets.

Accès et Modification des Propriétés

Accédons et modifions les propriétés d'un objet représentant un dragon :

let dragon: Creature = {
  name: 'Dragon',
  habitat: 'Mountains',
  magicalPower: 100,
}

console.log(dragon.name) // Dragon
dragon.magicalPower = 120
console.log(dragon.magicalPower) // 120

Boucler sur les Propriétés d'un Objet

Utilisons une boucle pour itérer sur les propriétés d'un objet. Cela peut être utile pour des opérations dynamiques :

let unicorn: Creature = {
  name: 'Unicorn',
  habitat: 'Forests',
  magicalPower: 80,
}

for (let key in unicorn) {
  if (unicorn.hasOwnProperty(key)) {
    console.log(`${key}: ${unicorn[key as keyof Creature]}`)
  }
}

Fusionner des Objets

Pour fusionner des objets, nous pouvons utiliser l'opérateur de décomposition (spread operator). Ajoutons une capacité spéciale à notre phoenix :

let phoenix: Creature = {
  name: 'Phoenix',
  habitat: 'Deserts',
  magicalPower: 90,
}
let specialAbility = { ability: 'Rebirth' }

let phoenixWithAbility = { ...phoenix, ...specialAbility }
console.log(phoenixWithAbility)

Les Types Indexables

Les types indexables permettent de définir des types pour des objets qui ont des propriétés supplémentaires inconnues à l'avance. Imaginons un registre magique :

interface MagicalRegistry {
  [index: string]: Creature
}

let registry: MagicalRegistry = {}
registry['ElderDragon'] = {
  name: 'Elder Dragon',
  habitat: 'Ancient Forests',
  magicalPower: 150,
}

console.log(registry['ElderDragon'])

Conclusion

Nous avons exploré diverses techniques pour manipuler les tableaux et les objets en Typescript. Ces outils sont essentiels pour structurer et manipuler les données de manière efficace et sûre.