Communardo Software GmbH, Kleiststraße 10 a, D-01129 Dresden
0800 1 255 255

TypeScript-Tipps: Funktionen überladen

Heute soll es um das Überladen von Funktionen gehen, das in JavaScript nativ nicht unterstützt wird. Der Beitrag geht kurz auf das Konzept des Überladens ein und zeigt anschließend, wie es in TypeScript funktioniert.

TypeScript bie­tet enor­mes Potential, Programmierfehler bereits wäh­rend der Entwicklung zu ent­de­cken. Es ist damit klar das bes­sere JavaScript. In der Reihe TypeScript-Tipps sol­len ein­zelne Features der Sprache in den Fokus gesetzt werden.

Heute soll es um das Überladen von Funktionen gehen, das in JavaScript nativ nicht unter­stützt wird. Der Beitrag geht kurz auf das Konzept des Überladens ein und zeigt anschlie­ßend, wie es in TypeScript funktioniert.

Überladen von Funktionen am Beispiel erklärt

Das Konzept des Überladens lässt sich am bes­ten an einem Beispiel zeigen.

Der fol­gende Code ist in C# geschrie­ben und dekla­riert eine Methode, die "eins addiert". Je nach­dem, ob eine Zahl oder Text über­ge­ben wird, wird "eins addie­ren" anders ausgelegt:

Die Methode AddOne ist oben zwei­mal mit dem­sel­ben Namen defi­niert, unter­schei­det sich aber jeweils durch ihre Signatur. Der Compiler kann durch Analyse der über­ge­be­nen Parameter beim Aufruf der Methode ent­schei­den, wel­che Variante gemeint ist:

Im ers­ten Fall wird eine Zahl über­ge­ben, daher wird AddOne(int value) auf­ge­ru­fen. Im zwei­ten Fall wird Text über­ge­ben, daher wird AddOne(string value) aufgerufen.

Darauf auf­bau­end kön­nen Entwicklungsumgebungen (IDEs) außer­dem Autovervollständigung anbie­ten, hier am Beispiel Visual Studio:

Sehr bequem für den Entwickler.

Das Beispiel mit Fehlerpotential in JavaScript implementiert

In JavaScript gibt es kein Überladen von Funktionen. Meist wer­den die Datentypen der Parameter oder deren Anzahl zur Laufzeit ana­ly­siert und abhän­gig vom Ergebnis verzweigt.

Das Fehlerpotential ent­steht durch die erst zur Laufzeit durch­ge­führte Analyse. Während der Entwicklung sieht alles gut aus, aber abhän­gig von bspw. Nutzereingaben machen sich Fehler erst bei der Ausführung bemerkbar.

Folgender Code ist zur Entwicklungszeit abso­lut valide, führt aber bei der Ausführung sicher­lich zu uner­wünsch­ten Folgefehlern:

In AddOne gibt es ein­fach kei­nen Codepfad, der den Datentyp object behandelt.

Die Möglichkeit zur Autovervollständigung von JavaScript ist stark davon abhän­gig, wie gut die IDE den Code ana­ly­sie­ren und Rückschlüsse auf mög­li­che Datentypen zie­hen kann.

Visual Studio Code erkennt immer­hin, dass nur Rückgaben vom Typ string und num­ber mög­lich sind. Als Eingabewert wird hin­ge­gen alles akzeptiert:

Wie TypeScript das Überladen sicherer macht

Den feh­ler­an­fäl­li­gen JavaScript-Code kön­nen wir mit nur zwei zusätz­li­chen Zeilen in TypeScript absichern:

Das Konzept nennt sich Function Types.

Es wer­den ein­fach die über­la­de­nen – und damit "erlaub­ten" – Signaturen der Funktion mit auf­ge­lis­tet. Der TypeScript Transpiler prüft auf die­ser Basis, ob die für den Aufruf ver­wen­de­ten Parameter kor­rekt typi­siert sind. Weiterhin kann Visual Studio Code Autovervollständigung anbieten:

Damit sind Fehler wie im JavaScript-Beispiel nicht mehr möglich.

Die Typisierung sorgt hier wäh­rend der Entwicklung dafür, dass sol­che Fehler nicht pas­sie­ren können.

Zusammenfassung

Wir haben gelernt, wie sich in TypeScript über­la­dene Funktionen dekla­rie­ren las­sen. Dazu haben wir das TypeScript-Feature Function Types ver­wen­det, wel­ches dem Überladen von Methoden in typi­sier­ten Sprachen nahe kommt.
Die Vorteile von Function Types sind:
  • es kön­nen Signaturen von Funktionen fest­ge­legt wer­den, die für eine Funktion unter­stützt werden
  • wäh­rend der Entwicklung wird eine Typprüfung für über­ge­bene Werte und die Verarbeitung der Rückgabewerte durchgeführt
  • die Autovervollständigung zeigt die Liste aller erlaub­ten Signaturen einer Funktion an

Damit lässt sich zahl­rei­chen Laufzeitfehlern vor­beu­gen. Wir haben außer­dem gese­hen, dass die Syntax denk­bar ein­fach ist und damit nichts gegen einen Einsatz im nächs­ten Projekt spricht.

Happy Coding!

Related Posts

Pin It on Pinterest