TypeScript - funkcje

Funkcje są elementami składowymi kodu czytelnego, możliwego do utrzymania i wielokrotnego użytku. Funkcja to zestaw instrukcji służących do wykonania określonego zadania. Funkcje organizują program w logiczne bloki kodu. Po zdefiniowaniu funkcji można wywołać kod dostępu. Dzięki temu kod można ponownie wykorzystać. Ponadto funkcje ułatwiają odczytywanie i obsługę kodu programu.

Deklaracja funkcji informuje kompilator o nazwie funkcji, typie zwracanym i parametrach. Definicja funkcji zawiera rzeczywistą treść funkcji.

Sr.No Funkcje i opis
1. Definiowanie funkcji

Definicja funkcji określa, co i jak zostanie wykonane określone zadanie.
2. Wywołanie funkcji

Funkcja musi zostać wywołana, aby ją wykonać.
3. Funkcje powracające

Funkcje mogą również zwracać wartość wraz z kontrolą, z powrotem do obiektu wywołującego.
4. Funkcja sparametryzowana

Parametry to mechanizm przekazywania wartości do funkcji.

Parametry opcjonalne

Parametry opcjonalne mogą być używane, gdy argumenty nie muszą być obowiązkowo przekazywane w celu wykonania funkcji. Parametr można oznaczyć jako opcjonalny, dołączając znak zapytania do jego nazwy. Opcjonalny parametr należy ustawić jako ostatni argument funkcji. Składnia deklarowania funkcji z opcjonalnym parametrem jest taka, jak podano poniżej -

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

Przykład: parametry opcjonalne

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]");

  • Powyższy przykład deklaruje sparametryzowaną funkcję. Tutaj trzeci parametr, tj. Mail_id, jest parametrem opcjonalnym.

  • Jeśli opcjonalny parametr nie zostanie przekazany jako wartość podczas wywołania funkcji, wartość parametru jest ustawiana na niezdefiniowaną.

  • Funkcja drukuje wartość mail_id tylko wtedy, gdy do argumentu została przekazana wartość.

Podczas kompilacji wygeneruje następujący kod JavaScript -

//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]");

Powyższy kod wygeneruje następujący wynik -

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

Parametry odpoczynku

Pozostałe parametry są podobne do zmiennych argumentów w Javie. Pozostałe parametry nie ograniczają liczby wartości, które można przekazać do funkcji. Jednak wszystkie przekazywane wartości muszą być tego samego typu. Innymi słowy, parametry reszty działają jako symbole zastępcze dla wielu argumentów tego samego typu.

Aby zadeklarować parametr rest, nazwa parametru jest poprzedzona trzema kropkami. Każdy parametr nonrest powinien znajdować się przed parametrem rest.

Przykład: parametry odpoczynku

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)

  • Deklaracja funkcji addNumbers () przyjmuje resztę parametru nums . Typ danych pozostałego parametru musi być ustawiony na tablicę. Ponadto funkcja może mieć co najwyżej jeden parametr odpoczynku.

  • Funkcja jest wywoływana dwukrotnie, przekazując odpowiednio trzy i sześć wartości.

  • Pętla for wykonuje iterację po liście argumentów, przekazywanych do funkcji i oblicza ich sumę.

Podczas kompilacji wygeneruje następujący kod JavaScript -

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);

Dane wyjściowe powyższego kodu są następujące -

sum of numbers 6 
sum of numbers 50

Parametry domyślne

Domyślnie parametrom funkcji można również przypisać wartości. Jednak takie parametry mogą być również jawnie przekazywane wartości.

Składnia

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

Note - Nie można jednocześnie zadeklarować parametru jako opcjonalnego i domyślnego.

Przykład: parametry domyślne

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)

Podczas kompilacji wygeneruje następujący kod JavaScript -

//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);

Jego wynik jest następujący -

Discount amount : 500 
Discount amount : 300

  • W przykładzie zadeklarowano funkcję oblicz_dskonto . Funkcja ma dwa parametry - cenę i stawkę.

  • Wartość współczynnika parametru jest domyślnie ustawiona na 0,50 .

  • Program wywołuje funkcję, przekazując do niej jedynie wartość parametru price. Tutaj wartość stawki wynosi 0,50 (domyślnie)

  • Wywoływana jest ta sama funkcja, ale z dwoma argumentami. Domyślna wartość stawki jest nadpisywana i ustawiana na wartość jawnie przekazaną.

Funkcja anonimowa

Funkcje, które nie są powiązane z identyfikatorem (nazwą funkcji), są nazywane jako anonymous functions. Te funkcje są dynamicznie deklarowane w czasie wykonywania. Funkcje anonimowe mogą przyjmować dane wejściowe i zwracane dane wyjściowe, tak jak robią to funkcje standardowe. Funkcja anonimowa jest zwykle niedostępna po jej początkowym utworzeniu.

Zmiennym można przypisać funkcję anonimową. Takie wyrażenie nazywa się wyrażeniem funkcyjnym.

Składnia

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

Przykład ─ Prosta funkcja anonimowa

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

Podczas kompilacji wygeneruje ten sam kod w JavaScript.

Wytworzy następujący wynik -

hello world

Przykład ─ Funkcja anonimowa z parametrami

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

Funkcja anonimowa zwraca iloczyn przekazanych do niej wartości.

Podczas kompilacji wygeneruje następujący kod JavaScript -

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

Dane wyjściowe powyższego kodu są następujące -

24

Wyrażenie funkcji i deklaracja funkcji ─ Czy są synonimami?

Wyrażenie funkcji i deklaracja funkcji nie są synonimami. W przeciwieństwie do wyrażenia funkcji deklaracja funkcji jest powiązana z nazwą funkcji.

Podstawowa różnica między nimi polega na tym, że deklaracje funkcji są analizowane przed ich wykonaniem. Z drugiej strony, wyrażenia funkcyjne są analizowane tylko wtedy, gdy silnik skryptów napotka je podczas wykonywania.

Gdy parser JavaScript widzi funkcję w głównym przepływie kodu, przyjmuje deklarację funkcji. Kiedy funkcja jest częścią instrukcji, jest wyrażeniem funkcji.

Konstruktor funkcji

TypeScript obsługuje również definiowanie funkcji za pomocą wbudowanego konstruktora JavaScript o nazwie Function ().

Składnia

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

Przykład

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

Nowa funkcja () jest wywołaniem konstruktora, który z kolei tworzy i zwraca odwołanie do funkcji.

Podczas kompilacji wygeneruje ten sam kod w JavaScript.

Dane wyjściowe powyższego przykładowego kodu są następujące -

12

Funkcje rekurencyjne i TypeScript

Rekurencja to technika iterowania operacji poprzez wielokrotne wywoływanie funkcji do siebie, aż do uzyskania wyniku. Rekurencję najlepiej stosować, gdy trzeba wielokrotnie wywoływać tę samą funkcję z różnymi parametrami w obrębie pętli.

Przykład - rekurencja

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

Podczas kompilacji wygeneruje ten sam kod w JavaScript.

Oto jego wynik -

720

Przykład: anonimowa funkcja rekurencyjna

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

Podczas kompilacji wygeneruje ten sam kod w JavaScript.

Jego wynik jest następujący -

Hello!!

Funkcje lambda

Lambda odnosi się do anonimowych funkcji w programowaniu. Funkcje lambda to zwięzły mechanizm reprezentujący funkcje anonimowe. Te funkcje są również nazywane jakoArrow functions.

Funkcja lambda - anatomia

Istnieją 3 części funkcji Lambda -

  • Parameters - Funkcja może opcjonalnie mieć parametry

  • The fat arrow notation/lambda notation (=>) - Nazywa się to również jako idzie do operatora

  • Statements - reprezentują zestaw instrukcji funkcji

Tip - Zgodnie z konwencją, w przypadku zwartej i precyzyjnej deklaracji funkcji zachęca się do używania parametru jednoliterowego.

Wyrażenie lambda

Jest to anonimowe wyrażenie funkcyjne, które wskazuje na pojedynczy wiersz kodu. Jego składnia jest następująca -

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

Przykład: wyrażenie lambda

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

Program deklaruje funkcję wyrażenia lambda. Funkcja zwraca sumę 10 i przekazanego argumentu.

Podczas kompilacji wygeneruje następujący kod JavaScript.

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

Oto wynik powyższego kodu -

110

Instrukcja Lambda

Instrukcja lambda to anonimowa deklaracja funkcji, która wskazuje na blok kodu. Ta składnia jest używana, gdy treść funkcji obejmuje wiele wierszy. Jego składnia jest następująca -

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

Przykład: instrukcja Lambda

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

Odwołanie do funkcji jest zwracane i przechowywane w zmiennej foo.

Podczas kompilacji wygeneruje następujący kod JavaScript -

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

Wynik powyższego programu jest następujący -

110

Wariacje syntaktyczne

Wnioskowanie o typie parametru

Określenie typu danych parametru nie jest obowiązkowe. W takim przypadku typ danych parametru jest dowolny. Rzućmy okiem na następujący fragment kodu -

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")

Podczas kompilacji wygeneruje następujący kod JavaScript -

//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");

Jego wynik jest następujący -

12 is numeric 
Tom is a string

Opcjonalne nawiasy dla pojedynczego parametru

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

Podczas kompilacji wygeneruje następujący kod JavaScript -

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

Jego wynik jest następujący -

The function got 12

Opcjonalne nawiasy klamrowe dla pojedynczej instrukcji. Puste nawiasy bez parametru

Poniższy przykład przedstawia te dwie odmiany syntaktyczne.

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

Podczas kompilacji wygeneruje następujący kod JavaScript -

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

Jego wynik jest następujący -

Function invoked

Przeciążenia funkcji

Funkcje mogą działać w różny sposób na podstawie dostarczonych im danych wejściowych. Innymi słowy, program może mieć wiele metod o tej samej nazwie i różnej implementacji. Ten mechanizm jest określany jako przeciążanie funkcji. TypeScript zapewnia obsługę przeciążania funkcji.

Aby przeciążać funkcję w TypeScript, musisz wykonać kroki podane poniżej -

Step 1- Zadeklaruj wiele funkcji o tej samej nazwie, ale różnej sygnaturze funkcji. Podpis funkcji obejmuje następujące elementy.

  • 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 - Podpis funkcji nie zawiera zwracanego typu funkcji.

Step 2- Po deklaracji musi następować definicja funkcji. Typy parametrów powinny być ustawione naanyjeśli typy parametrów różnią się podczas przeciążenia. Dodatkowo dlacase b wyjaśniono powyżej, możesz rozważyć oznaczenie jednego lub więcej parametrów jako opcjonalnych podczas definiowania funkcji.

Step 3 - Na koniec musisz wywołać funkcję, aby działała.

Przykład

Przyjrzyjmy się teraz poniższemu przykładowemu kodowi -

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");

  • Pierwsze dwa wiersze przedstawiają deklarację przeciążenia funkcji. Funkcja ma dwa przeciążenia -

    • Funkcja, która akceptuje pojedynczy parametr ciągu.

    • Funkcja, która akceptuje dwie wartości odpowiednio typu liczba i łańcuch.

  • Trzecia linia definiuje funkcję. Ustawiono typ danych parametrówany. Ponadto drugi parametr jest tutaj opcjonalny.

  • Przeciążona funkcja jest wywoływana przez dwie ostatnie instrukcje.

Podczas kompilacji wygeneruje następujący kod JavaScript -

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

Powyższy kod wygeneruje następujący wynik -

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