TypeScript - Funktionen

Funktionen sind die Bausteine ​​für lesbaren, wartbaren und wiederverwendbaren Code. Eine Funktion ist eine Reihe von Anweisungen zum Ausführen einer bestimmten Aufgabe. Funktionen organisieren das Programm in logischen Codeblöcken. Einmal definiert, können Funktionen aufgerufen werden, um auf Code zuzugreifen. Dies macht den Code wiederverwendbar. Darüber hinaus erleichtern Funktionen das Lesen und Verwalten des Programmcodes.

Eine Funktionsdeklaration informiert den Compiler über den Namen, den Rückgabetyp und die Parameter einer Funktion. Eine Funktionsdefinition liefert den tatsächlichen Hauptteil der Funktion.

Sr.Nr. Funktionen & Beschreibung
1. Funktion definieren

Eine Funktionsdefinition gibt an, was und wie eine bestimmte Aufgabe ausgeführt werden soll.
2. Eine Funktion aufrufen

Eine Funktion muss aufgerufen werden, um sie auszuführen.
3. Rückgabe von Funktionen

Funktionen können zusammen mit der Steuerung auch einen Wert an den Anrufer zurückgeben.
4. Parametrierte Funktion

Parameter sind ein Mechanismus zum Übergeben von Werten an Funktionen.

Optionale Parameter

Optionale Parameter können verwendet werden, wenn Argumente für die Ausführung einer Funktion nicht zwangsweise übergeben werden müssen. Ein Parameter kann optional markiert werden, indem ein Fragezeichen an seinen Namen angehängt wird. Der optionale Parameter sollte als letztes Argument in einer Funktion festgelegt werden. Die Syntax zum Deklarieren einer Funktion mit optionalem Parameter lautet wie folgt:

function function_name (param1[:type], param2[:type], param3[:type])

Beispiel: Optionale Parameter

function disp_details(id:number,name:string,mail_id?:string) { 
   console.log("ID:", id); 
   console.log("Name",name); 
   
   if(mail_id!=undefined)  
   console.log("Email Id",mail_id); 
}
disp_details(123,"John");
disp_details(111,"mary","[email protected]");

  • Das obige Beispiel deklariert eine parametrisierte Funktion. Hier ist der dritte Parameter, dh mail_id, ein optionaler Parameter.

  • Wenn einem optionalen Parameter während des Funktionsaufrufs kein Wert übergeben wird, wird der Wert des Parameters auf undefiniert gesetzt.

  • Die Funktion gibt den Wert von mail_id nur aus, wenn dem Argument ein Wert übergeben wird.

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
function disp_details(id, name, mail_id) {
   console.log("ID:", id);
   console.log("Name", name);
	
   if (mail_id != undefined)
      console.log("Email Id", mail_id);
}
disp_details(123, "John");
disp_details(111, "mary", "[email protected]");

Der obige Code erzeugt die folgende Ausgabe -

ID:123 
Name John 
ID: 111 
Name  mary 
Email Id [email protected]

Ruheparameter

Restparameter ähneln variablen Argumenten in Java. Ruheparameter beschränken nicht die Anzahl der Werte, die Sie an eine Funktion übergeben können. Die übergebenen Werte müssen jedoch alle vom gleichen Typ sein. Mit anderen Worten, Restparameter dienen als Platzhalter für mehrere Argumente desselben Typs.

Um einen Ruheparameter zu deklarieren, werden dem Parameternamen drei Punkte vorangestellt. Alle Nicht-Rest-Parameter sollten vor dem Rest-Parameter stehen.

Beispiel: Ruheparameter

function addNumbers(...nums:number[]) {  
   var i;   
   var sum:number = 0; 
   
   for(i = 0;i<nums.length;i++) { 
      sum = sum + nums[i]; 
   } 
   console.log("sum of the numbers",sum) 
} 
addNumbers(1,2,3) 
addNumbers(10,10,10,10,10)

  • Die Deklaration der Funktion addNumbers () akzeptiert einen Restparameter nums . Der Datentyp des Rest-Parameters muss auf ein Array festgelegt werden. Darüber hinaus kann eine Funktion höchstens einen Ruheparameter haben.

  • Die Funktion wird zweimal aufgerufen, indem drei bzw. sechs Werte übergeben werden.

  • Die for-Schleife durchläuft die Argumentliste, wird an die Funktion übergeben und berechnet deren Summe.

Beim Kompilieren wird folgender JavaScript-Code generiert:

function addNumbers() {
   var nums = [];
   for (var _i = 0; _i < arguments.length; _i++) {
      nums[_i - 0] = arguments[_i];
   }
	var i;
   var sum = 0;
	
   for (i = 0; i < nums.length; i++) {
      sum = sum + nums[i];
   }
   console.log("sum of the numbers", sum);
}
addNumbers(1, 2, 3);
addNumbers(10, 10, 10, 10, 10);

Die Ausgabe des obigen Codes ist wie folgt:

sum of numbers 6 
sum of numbers 50

Standardparameter

Funktionsparametern können standardmäßig auch Werte zugewiesen werden. Solche Parameter können jedoch auch explizit übergeben werden.

Syntax

function function_name(param1[:type],param2[:type] = default_value) { 
}

Note - Ein Parameter kann nicht gleichzeitig als optional und standardmäßig deklariert werden.

Beispiel: Standardparameter

function calculate_discount(price:number,rate:number = 0.50) { 
   var discount = price * rate; 
   console.log("Discount Amount: ",discount); 
} 
calculate_discount(1000) 
calculate_discount(1000,0.30)

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
function calculate_discount(price, rate) {
   if (rate === void 0) { rate = 0.50; }
   var discount = price * rate;
   console.log("Discount Amount: ", discount);
}
calculate_discount(1000);
calculate_discount(1000, 0.30);

Seine Ausgabe ist wie folgt -

Discount amount : 500 
Discount amount : 300

  • Das Beispiel deklariert die Funktion berechne_Diskont . Die Funktion hat zwei Parameter - Preis und Rate.

  • Der Wert des Parameters Rate wird eingestellt 0,50 voreingestellt.

  • Das Programm ruft die Funktion auf und übergibt ihr nur den Wert des Parameterpreises. Hier ist der Wert der Rate ist 0,50 (default)

  • Dieselbe Funktion wird aufgerufen, jedoch mit zwei Argumenten. Der Standardwert der Rate wird überschrieben und auf den explizit übergebenen Wert gesetzt.

Anonyme Funktion

Funktionen, die nicht an einen Bezeichner (Funktionsname) gebunden sind, werden als aufgerufen anonymous functions. Diese Funktionen werden zur Laufzeit dynamisch deklariert. Anonyme Funktionen können wie Standardfunktionen Ein- und Ausgänge akzeptieren. Auf eine anonyme Funktion kann nach ihrer erstmaligen Erstellung normalerweise nicht zugegriffen werden.

Variablen kann eine anonyme Funktion zugewiesen werden. Ein solcher Ausdruck wird Funktionsausdruck genannt.

Syntax

var res = function( [arguments] ) { ... }

Beispiel ─ Eine einfache anonyme Funktion

var msg = function() { 
   return "hello world";  
} 
console.log(msg())

Beim Kompilieren wird derselbe Code in JavaScript generiert.

Es wird die folgende Ausgabe erzeugt -

hello world

Beispiel ─ Anonyme Funktion mit Parametern

var res = function(a:number,b:number) { 
   return a*b;  
}; 
console.log(res(12,2))

Die anonyme Funktion gibt das Produkt der an sie übergebenen Werte zurück.

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
var res = function (a, b) {
   return a * b;
};
console.log(res(12, 2));

Die Ausgabe des obigen Codes ist wie folgt:

24

Funktionsausdruck und Funktionsdeklaration ─ Sind sie synonym?

Funktionsausdruck und Funktionsdeklaration sind nicht gleichbedeutend. Im Gegensatz zu einem Funktionsausdruck ist eine Funktionsdeklaration an den Funktionsnamen gebunden.

Der grundlegende Unterschied zwischen beiden besteht darin, dass Funktionsdeklarationen vor ihrer Ausführung analysiert werden. Andererseits werden Funktionsausdrücke nur analysiert, wenn die Skript-Engine während der Ausführung darauf stößt.

Wenn der JavaScript-Parser eine Funktion im Hauptcodefluss sieht, geht er von einer Funktionsdeklaration aus. Wenn eine Funktion Teil einer Anweisung ist, handelt es sich um einen Funktionsausdruck.

Der Funktionskonstruktor

TypeScript unterstützt auch das Definieren einer Funktion mit dem integrierten JavaScript-Konstruktor Function ().

Syntax

var res = new Function( [arguments] ) { ... }.

Beispiel

var myFunction = new Function("a", "b", "return a * b"); 
var x = myFunction(4, 3); 
console.log(x);

Die neue Funktion () ist ein Aufruf des Konstruktors, der wiederum eine Funktionsreferenz erstellt und zurückgibt.

Beim Kompilieren wird derselbe Code in JavaScript generiert.

Die Ausgabe des obigen Beispielcodes lautet wie folgt:

12

Rekursions- und TypeScript-Funktionen

Rekursion ist eine Technik zum Durchlaufen einer Operation, indem ein Funktionsaufruf wiederholt ausgeführt wird, bis ein Ergebnis erzielt wird. Die Rekursion wird am besten angewendet, wenn Sie dieselbe Funktion wiederholt mit unterschiedlichen Parametern innerhalb einer Schleife aufrufen müssen.

Beispiel - Rekursion

function factorial(number) {
   if (number <= 0) {         // termination case
      return 1; 
   } else {     
      return (number * factorial(number - 1));     // function invokes itself
   } 
}; 
console.log(factorial(6));      // outputs 720

Beim Kompilieren wird derselbe Code in JavaScript generiert.

Hier ist seine Ausgabe -

720

Beispiel: Anonyme rekursive Funktion

(function () { 
   var x = "Hello!!";   
   console.log(x)     
})()      // the function invokes itself using a pair of parentheses ()

Beim Kompilieren wird derselbe Code in JavaScript generiert.

Seine Ausgabe ist wie folgt -

Hello!!

Lambda-Funktionen

Lambda bezieht sich auf anonyme Funktionen in der Programmierung. Lambda-Funktionen sind ein prägnanter Mechanismus zur Darstellung anonymer Funktionen. Diese Funktionen werden auch als bezeichnetArrow functions.

Lambda-Funktion - Anatomie

Eine Lambda-Funktion besteht aus 3 Teilen -

  • Parameters - Eine Funktion kann optional Parameter haben

  • The fat arrow notation/lambda notation (=>) - Es wird auch als "Going to Operator" bezeichnet

  • Statements - den Befehlssatz der Funktion darstellen

Tip - Konventionell wird die Verwendung von Einzelbuchstabenparametern für eine kompakte und präzise Funktionsdeklaration empfohlen.

Lambda-Ausdruck

Es ist ein anonymer Funktionsausdruck, der auf eine einzelne Codezeile verweist. Die Syntax lautet wie folgt:

( [param1, parma2,…param n] )=>statement;

Beispiel: Lambda-Ausdruck

var foo = (x:number)=>10 + x 
console.log(foo(100))      //outputs 110

Das Programm deklariert eine Lambda-Ausdrucksfunktion. Die Funktion gibt die Summe von 10 und das übergebene Argument zurück.

Beim Kompilieren wird folgender JavaScript-Code generiert.

//Generated by typescript 1.8.10
var foo = function (x) { return 10 + x; };
console.log(foo(100));      //outputs 110

Hier ist die Ausgabe des obigen Codes -

110

Lambda-Erklärung

Die Lambda-Anweisung ist eine anonyme Funktionsdeklaration, die auf einen Codeblock verweist. Diese Syntax wird verwendet, wenn der Funktionskörper mehrere Zeilen umfasst. Die Syntax lautet wie folgt:

( [param1, parma2,…param n] )=> {
 
   //code block
}

Beispiel: Lambda-Anweisung

var foo = (x:number)=> {    
   x = 10 + x 
   console.log(x)  
} 
foo(100)

Die Referenz der Funktion wird zurückgegeben und in der Variablen gespeichert foo.

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
var foo = function (x) {
   x = 10 + x;
   console.log(x);
};
foo(100);

Die Ausgabe des obigen Programms ist wie folgt:

110

Syntaktische Variationen

Parametertyp Inferenz

Es ist nicht zwingend erforderlich, den Datentyp eines Parameters anzugeben. In diesem Fall ist der Datentyp des Parameters beliebig. Schauen wir uns das folgende Code-Snippet an:

var func = (x)=> { 
   if(typeof x=="number") { 
      console.log(x+" is numeric") 
   } else if(typeof x=="string") { 
      console.log(x+" is a string") 
   }  
} 
func(12) 
func("Tom")

Beim Kompilieren wird der folgende JavaScript-Code generiert:

//Generated by typescript 1.8.10
var func = function (x) {
   if (typeof x == "number") {
      console.log(x + " is numeric");
   } else if (typeof x == "string") {
      console.log(x + " is a string");
   }
};
func(12);
func("Tom");

Seine Ausgabe ist wie folgt -

12 is numeric 
Tom is a string

Optionale Klammern für einen einzelnen Parameter

var display = x=> { 
   console.log("The function got "+x) 
} 
display(12)

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
var display = function (x) {
   console.log("The function got " + x);
};
display(12);

Seine Ausgabe ist wie folgt -

The function got 12

Optionale Klammern für eine einzelne Anweisung, leere Klammern für keinen Parameter

Das folgende Beispiel zeigt diese beiden syntaktischen Variationen.

var disp =()=> { 
   console.log("Function invoked"); 
} 
disp();

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
var disp = function () {
   console.log("Function invoked");
};
disp();

Seine Ausgabe ist wie folgt -

Function invoked

Funktionsüberladungen

Funktionen können auf der Grundlage der ihnen zur Verfügung gestellten Eingaben unterschiedlich arbeiten. Mit anderen Worten, ein Programm kann mehrere Methoden mit demselben Namen und unterschiedlicher Implementierung haben. Dieser Mechanismus wird als Funktionsüberladung bezeichnet. TypeScript bietet Unterstützung für das Überladen von Funktionen.

Um eine Funktion in TypeScript zu überladen, müssen Sie die folgenden Schritte ausführen:

Step 1- Deklarieren Sie mehrere Funktionen mit demselben Namen, aber unterschiedlicher Funktionssignatur. Die Funktionssignatur umfasst Folgendes.

  • The data type of the parameter

function disp(string):void; 
function disp(number):void;

  • The number of parameters

function disp(n1:number):void; 
function disp(x:number,y:number):void;

  • The sequence of parameters

function disp(n1:number,s1:string):void; 
function disp(s:string,n:number):void;

Note - Die Funktionssignatur enthält nicht den Rückgabetyp der Funktion.

Step 2- Auf die Deklaration muss die Funktionsdefinition folgen. Die Parametertypen sollten auf eingestellt seinanywenn sich die Parametertypen bei Überlastung unterscheiden. Zusätzlich fürcase b Wenn Sie oben erläutert haben, können Sie einen oder mehrere Parameter während der Funktionsdefinition als optional markieren.

Step 3 - Schließlich müssen Sie die Funktion aufrufen, um sie funktionsfähig zu machen.

Beispiel

Schauen wir uns nun den folgenden Beispielcode an:

function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 

function disp(x:any,y?:any):void { 
   console.log(x); 
   console.log(y); 
} 
disp("abc") 
disp(1,"xyz");

  • Die ersten beiden Zeilen zeigen die Funktionsüberlastungsdeklaration. Die Funktion hat zwei Überladungen -

    • Funktion, die einen einzelnen Zeichenfolgenparameter akzeptiert.

    • Funktion, die zwei Werte vom Typ Nummer bzw. Zeichenfolge akzeptiert.

  • Die dritte Zeile definiert die Funktion. Der Datentyp der Parameter wird auf gesetztany. Darüber hinaus ist der zweite Parameter hier optional.

  • Die überladene Funktion wird von den letzten beiden Anweisungen aufgerufen.

Beim Kompilieren wird folgender JavaScript-Code generiert:

//Generated by typescript 1.8.10
function disp(x, y) {
   console.log(x);
   console.log(y);
}
disp("abc");
disp(1, "xyz");

Der obige Code erzeugt die folgende Ausgabe -

abc 
1 
xyz
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved