Comment fonctionnent les paramètres optionnels des fonctions et les propriétés optionnelles des objets en TypeScript, quelles sont les différences et quels sont les nuances à prendre en compte lors de leur utilisation ? Donnez des exemples de problèmes typiques et d'erreurs.

Réponse.

Les paramètres optionnels des fonctions sont indiqués avec un point d'interrogation (?) après le nom du paramètre. Il en va de même pour les propriétés optionnelles dans les objets (interfaces ou types).

• Pour les fonctions :

function greet(name?: string) {
  console.log(`Hello, ${name ?? 'stranger'}`);
}
greet(); // Hello, stranger
greet('John'); // Hello, John

• Pour les objets :

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

Nuances :

• Un paramètre optionnel peut ne pas être passé lors de l'appel de la fonction, et dans ce cas, la valeur sera undefined.
• Une propriété optionnelle peut être absente dans un objet.
• Ne pas confondre : si dans l'interface la propriété n'est pas spécifiée comme optionnelle, elle est obligatoire !
• Un paramètre optionnel doit être le dernier dans la liste des arguments de la fonction.

Question piège.

Si une fonction est déclarée avec un paramètre optionnel de type string (function fn(x?: string)), peut-on l'appeler explicitement avec undefined ? Quelle est la différence entre fn() et fn(undefined) ?

Réponse : Oui, on peut appeler avec undefined : fn(undefined) et fn() produisent le même résultat, mais à l'intérieur, la fonction recevra x === undefined. Mais si une valeur par défaut est définie dans la signature :

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

Et si l'argument n'est pas défini comme optionnel (pas de ? ou de valeur par défaut), l'appel de fn() sera une erreur de compilation.

Exemples d'erreurs réelles dues à une méconnaissance des nuances du sujet.

---

Histoire

Dans l'interface user, nous avons indiqué la propriété phone: string (sans ?), mais avons oublié de l'ajouter lors de la création de l'instance de l'objet. En conséquence, le compilateur TypeScript a commencé à se plaindre de l'absence d'une propriété obligatoire. Comme solution temporaire, nous avons ajouté phone: undefined, mais cela contredisait le type, car string !== undefined, et a provoqué encore plus d'erreurs de validation.

---

Histoire

Plusieurs paramètres optionnels ont été définis dans la fonction, mais ils n'ont pas été placés à la fin de la liste des arguments. TypeScript a alors généré une erreur, et en réorganisant les paramètres, l'ordre des valeurs passées aux paramètres a changé, ce qui a conduit à de la confusion et à un fonctionnement incorrect de la fonction.

---

Histoire

Les champs optionnels dans les interfaces ont été oubliés lors de la description du type de données pour l'API externe (par exemple, nom de famille du client ? string), ce qui a conduit à l'absence de ces champs lors du changement de schéma d'un côté, et de l'autre, le code a commencé à échouer lors de la tentative de lecture sans vérifier si c'était undefined.