Fonctions et Fonctions Fléchées en Typescript

Salut à tous ! Après avoir exploré les classes et les objets, il est temps de s'intéresser aux fonctions et aux fonctions fléchées en Typescript.

Les fonctions sont le cœur de toute application en JavaScript et Typescript, bien comprendre leur fonctionnement est essentiel.

Fonctions en Typescript

En Typescript, les fonctions peuvent être typées pour garantir la sécurité des types.

Cela permet d'éviter de nombreux bugs en s'assurant que les fonctions reçoivent et renvoient les bons types de données.

Déclaration de Fonctions

Voici comment déclarer une fonction typée en Typescript :

function add(x: number, y: number): number {
  return x + y
}

let result = add(2, 3)
console.log(result) // 5

Dans cet exemple, la fonction add prend deux arguments de type number et retourne un number. Cela garantit que nous ne pouvons pas appeler add avec des arguments non numériques.

Paramètres Optionnels et Valeurs par Défaut

Les fonctions en Typescript peuvent avoir des paramètres optionnels et des valeurs par défaut :

function greet(name: string, greeting: string = 'Hello'): string {
  return `${greeting}, ${name}!`
}

console.log(greet('Alice')) // Hello, Alice!
console.log(greet('Bob', 'Hi')) // Hi, Bob!

Dans cet exemple, greeting est un paramètre optionnel avec une valeur par défaut de "Hello". Si aucune valeur n'est fournie pour greeting, la valeur par défaut est utilisée.

Fonctions Anonymes et Expressions de Fonctions

Les fonctions anonymes et les expressions de fonctions sont des manières courantes de définir des fonctions sans nom :

let multiply = function (x: number, y: number): number {
  return x * y
}

console.log(multiply(3, 4)) // 12

Fonctions Fléchées

Les fonctions fléchées, introduites dans ECMAScript 6, offrent une syntaxe concise pour écrire des fonctions. Elles ne lient pas leur propre this, ce qui les rend particulièrement utiles pour les callbacks et les méthodes d'instance.

Syntaxe de Base

Voici un exemple de fonction fléchée simple :

let subtract = (x: number, y: number): number => {
  return x - y
}

console.log(subtract(10, 4)) // 6

Syntaxe Concise

Pour les fonctions à une seule expression, on peut omettre les accolades et le mot-clé return :

let divide = (x: number, y: number): number => x / y

console.log(divide(10, 2)) // 5

Contexte this

Une des principales différences entre les fonctions traditionnelles et les fonctions fléchées est la gestion du contexte this. Les fonctions fléchées n'ont pas leur propre this et héritent du this environnant.

class Player {
  name: string

  constructor(name: string) {
    this.name = name
  }

  announce = () => {
    console.log(`${this.name} is ready to play!`)
  }
}

let player1 = new Player('Link')
player1.announce() // Link is ready to play!

Dans cet exemple, la méthode announce utilise une fonction fléchée, garantissant que this fait toujours référence à l'instance de Player.

Fonctions comme Citoyens de Première Classe

En Typescript, comme en JavaScript, les fonctions sont des citoyens de première classe (first-class citizens). Cela signifie qu'elles peuvent être :

• Assignées à des variables.
• Passées en argument à d'autres fonctions.
• Retournées par d'autres fonctions.

Fonctions Passées en Argument

Tu peux passer des fonctions comme arguments à d'autres fonctions, ce qui est très utile pour les callbacks et les événements :

function execute(action: (message: string) => void): void {
  action('Hello from execute function!')
}

execute((msg: string) => console.log(msg)) // Hello from execute function!

Fonctions Retournées par d'Autres Fonctions

Les fonctions peuvent également être retournées par d'autres fonctions, permettant la création de fonctions plus complexes et de fermetures (closures) :

function createMultiplier(multiplier: number): (value: number) => number {
  return (value: number) => value * multiplier
}

let double = createMultiplier(2)
console.log(double(5)) // 10

let triple = createMultiplier(3)
console.log(triple(5)) // 15

Fonctions fléchée dans une classe

Imaginons une fonction pour gérer les attaques des personnages :

class Character {
  name: string
  health: number

  constructor(name: string, health: number) {
    this.name = name
    this.health = health
  }

  attack = (target: Character, damage: number): void => {
    console.log(`${this.name} attacks ${target.name} for ${damage} damage!`)
    target.health -= damage
    console.log(`${target.name} has ${target.health} health left.`)
  }
}

let hero = new Character('Mario', 100)
let villain = new Character('Bowser', 150)

hero.attack(villain, 20) // Mario attacks Bowser for 20 damage! Bowser has 130 health left.

Dans cet exemple, la méthode attack utilise une fonction fléchée pour s'assurer que this fait toujours référence à l'instance de Character, même lorsqu'elle est appelée comme callback.

Conclusion

Les fonctions et les fonctions fléchées sont des éléments essentiels en Typescript, offrant une grande flexibilité et des capacités avancées pour écrire du code clair et performant.

En comprenant comment utiliser les fonctions comme citoyens de première classe, on peut créer des applications plus dynamiques et puissantes.

Dans notre prochain article, nous explorerons les modules et les importations pour organiser encore mieux notre code.