Comment implémenter la surcharge de fonctions dans TypeScript

La surcharge de fonctions est une fonctionnalité TypeScript qui nous permet de définir une fonction qui accepte différents types d’arguments.

TypeScript ajoute principalement des fonctionnalités de vérification du type de données qui manquent dans JavaScript. Cela facilite la programmation puisque nous n’avons pas besoin de vérifier nous-mêmes le type de données des variables et autres valeurs.

Nous pouvons écrire nos programmes JavaScript en TypeScript. Ensuite, nous pouvons compiler le code TypeScript en JavaScript afin qu’il puisse être exécuté par des environnements d’exécution JavaScript tels que le navigateur et Node.js.

Une fonctionnalité utile disponible dans TypeScript est la surcharge de fonctions. La surcharge de fonctions est une fonctionnalité qui nous permet de définir une fonction qui accepte différents types d’arguments.

Dans cet article, nous verrons comment implémenter la surcharge de fonctions dans notre code TypeScript.

Surcharge de fonctions dans TypeScript

Avec TypeScript, nous pouvons définir une fonction qui accepte différents types d’arguments avec surcharge de fonctions.

Pour l’utiliser, il suffit d’ajouter toutes les signatures possibles pour une fonction pour les combinaisons d’arguments que nous voulons que la fonction accepte.

Par exemple, pour implémenter la surcharge de fonctions dans TypeScript, nous pouvons écrire quelque chose comme ce qui suit :

function add(a: number, b: number): number;
function add(a: string, b: string): number;

function add(a: unknown, b: unknown): number {
  if (typeof a === "string" && typeof b === "string") {
    return Number(a) + Number(b);
  } else if (typeof a === "number" && typeof b === "number") {
    return a + b;
  }
  return 0;
}

Nous avons deux signatures différentes pour le add fonction et ils ont tous deux un type de retour défini sur number.

La première signature s’attend à ce que les deux paramètres a et b sont des nombres. Et la deuxième signature s’attend à ce que les deux paramètres a et b sont des chaînes.

Pour implémenter la fonction, nous faisons a et b accepte le unknown type, ce qui nous permet de transmettre n’importe quoi pour a et b.

Dans le corps de la fonction, nous vérifions les types de données de a et b avec le typeof opérateur. Si a et b sont les deux chaînes, nous convertissons a et b aux nombres avec le Number fonction, puis obtenez la somme des nombres. S’il s’agit de deux nombres, nous renvoyons simplement leur somme. Sinon, nous renvoyons 0.

Le unknown type est une contrepartie de type sécurisé de any. Nous ne pouvons pas attribuer de valeurs avec unknown tapez dans n’importe quelle variable. Mais nous pouvons convertir unknown tapez les valeurs sur quelque chose d’autre qui correspond au type de la variable.

Avec le typeof chèques, nous avons restreint les types de a et b à un type de données afin que TypeScript puisse déduire le type et effectuer les opérations pour les variables avec le type déduit.

Ensuite, nous pourrons appeler add en écrivant:

const sum1 = add(1, 2);
const sum2 = add("1", "2");

Nous appelons add avec les valeurs attendues par au moins une des signatures, il réussit donc les vérifications de type effectuées par le compilateur TypeScript.

Si nous appelons add avec des valeurs qui ne sont attendues par aucune des signatures comme :

const sum3 = add(1, "2");

Ensuite, le compilateur TypeScript générera une erreur de vérification de type.

La signature de l’implémentation de la fonction doit être plus générale que les signatures de surcharge. De cette façon, la fonction avec surcharges peut accepter différents types de valeurs attendues par au moins une des signatures.

Surcharge de méthode

Nous pouvons également surcharger les méthodes de constructeur ou de classe.

Par exemple, nous pouvons écrire quelque chose comme :

class Greeter {
  message: string;

  constructor(message: string) {
    this.message = message;
  }

  greet(person: string): string;
  greet(persons: string[]): string;
  greet(person: unknown) {
    if (typeof person === "string") {
      return `${this.message}, ${person}!`;
    } else if (Array.isArray(person)) {
      return person.map((name) => `${this.message}, ${name}!`).join("\n");
    }
    return "";
  }
}

Nous définissons le Greeter classe avec le greet méthode dedans. Le greet La méthode est surchargée avec deux signatures différentes. Le premier prend un string et renvoie un string. La seconde prend un string tableau et renvoie également un string.

Dans la mise en œuvre, nous faisons le person fonction a un unknown taper. Nous pouvons ajouter un type de retour ou l’omettre puisque le compilateur TypeScript peut déduire le type de retour de l’implémentation. Nous pouvons vérifier la valeur de person dans la mise en œuvre avec nos propres contrôles de type.

Nous vérifions d’abord si person est une chaîne avec typeof person === "string". Ensuite, nous vérifions si person est un tableau avec Array.isArray.

Ensuite, nous pouvons créer un Greeter exemple et appelez le greet méthode en écrivant :

const greeter = new Greeter("Hello");
const message1 = greeter.greet("Jane");
const message2 = greeter.greet(["Alex", "Jane"]);

Nous créons un Greeter exemple avec new. Et puis nous appelons greet sur l’instance soit avec une chaîne ou un tableau de chaînes que nous avons spécifié avec les signatures.

Quand utiliser la surcharge de fonctions ?

Idéalement, nous utilisons la surcharge de fonctions uniquement lorsque nous attendons des arguments obligatoires de types différents.

Les exemples ci-dessus n’ont tous que des paramètres obligatoires, mais ils peuvent avoir des types différents. Si nous attendons des arguments facultatifs, nous pouvons utiliser la syntaxe des paramètres facultatifs à la place.

Par exemple, au lieu d’écrire quelque chose comme :

function foo(): string;
function foo(param1: string): string;
function foo(param1: string, param2: string): string;

function foo(...args: string[]) {
  return args.join("\n");
}

Nous pouvons remplacer les surcharges par des paramètres facultatifs en écrivant quelque chose comme :

function foo(param1?: string, param2?: string) {
  return [param1 ?? "", param2 ?? ""].join("\n");
}

Puisque nous acceptons param1 et param2 comme paramètres facultatifs, nous pouvons utiliser ? pour les désigner comme tels.

Conclusion

La surcharge de fonctions est une fonctionnalité de TypeScript qui nous permet de définir une fonction qui accepte différents types d’arguments.

Nous pouvons utiliser la surcharge de fonctions pour spécifier tout type de paramètres de fonction. Mais idéalement, nous les utilisons uniquement pour les paramètres requis puisque TypeScript a déjà une syntaxe simple de paramètres de fonction facultative.

Nous pouvons avoir des surcharges de fonctions pour les fonctions régulières et les méthodes de classe.