TypeScript - Funciones

Las funciones son los componentes básicos del código legible, mantenible y reutilizable. Una función es un conjunto de declaraciones para realizar una tarea específica. Las funciones organizan el programa en bloques lógicos de código. Una vez definidas, las funciones se pueden llamar para acceder al código. Esto hace que el código sea reutilizable. Además, las funciones facilitan la lectura y el mantenimiento del código del programa.

Una declaración de función le dice al compilador sobre el nombre, el tipo de retorno y los parámetros de una función. Una definición de función proporciona el cuerpo real de la función.

No Señor Funciones y descripción
1. Definición de una función

Una definición de función especifica qué y cómo se haría una tarea específica.
2. Llamar a una función

Se debe llamar a una función para ejecutarla.
3. Funciones de retorno

Las funciones también pueden devolver valor junto con el control, de vuelta a la persona que llama.
4. Función parametrizada

Los parámetros son un mecanismo para pasar valores a funciones.

Parámetros opcionales

Los parámetros opcionales se pueden usar cuando los argumentos no necesitan pasarse obligatoriamente para la ejecución de una función. Un parámetro se puede marcar como opcional agregando un signo de interrogación a su nombre. El parámetro opcional debe establecerse como el último argumento de una función. La sintaxis para declarar una función con parámetro opcional es la siguiente:

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

Ejemplo: parámetros opcionales

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

  • El ejemplo anterior declara una función parametrizada. Aquí, el tercer parámetro, es decir, mail_id es un parámetro opcional.

  • Si no se le pasa un valor a un parámetro opcional durante la llamada a la función, el valor del parámetro se establece en indefinido.

  • La función imprime el valor de mail_id solo si al argumento se le pasa un valor.

Al compilar, generará el siguiente código 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]");

El código anterior producirá el siguiente resultado:

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

Parámetros de descanso

Los parámetros de descanso son similares a los argumentos variables en Java. Los parámetros de descanso no restringen el número de valores que puede pasar a una función. Sin embargo, los valores pasados ​​deben ser todos del mismo tipo. En otras palabras, los parámetros rest actúan como marcadores de posición para múltiples argumentos del mismo tipo.

Para declarar un parámetro de descanso, el nombre del parámetro tiene como prefijo tres puntos. Cualquier parámetro de descanso debe ir antes que el parámetro de descanso.

Ejemplo: Parámetros de descanso

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)

  • La declaración de función addNumbers (), acepta un parámetro de descanso nums . El tipo de datos del parámetro rest debe establecerse en una matriz. Además, una función puede tener como máximo un parámetro de reposo.

  • La función se invoca dos veces, pasando tres y seis valores, respectivamente.

  • El ciclo for itera a través de la lista de argumentos, se pasa a la función y calcula su suma.

Al compilar, generará el siguiente código 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);

La salida del código anterior es la siguiente:

sum of numbers 6 
sum of numbers 50

Parámetros predeterminados

A los parámetros de función también se les pueden asignar valores por defecto. Sin embargo, dichos parámetros también pueden ser valores pasados ​​explícitamente.

Sintaxis

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

Note - Un parámetro no puede declararse opcional y predeterminado al mismo tiempo.

Ejemplo: parámetros predeterminados

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)

Al compilar, generará el siguiente código 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);

Su salida es la siguiente:

Discount amount : 500 
Discount amount : 300

  • El ejemplo declara la función, calculate_discount . La función tiene dos parámetros: precio y tarifa.

  • El valor de la tasa del parámetro se establece en 0,50 por defecto.

  • El programa invoca la función, pasándole solo el valor del parámetro precio. Aquí, el valor de la tasa es 0.50 (predeterminado)

  • Se invoca la misma función, pero con dos argumentos. El valor predeterminado de la tasa se sobrescribe y se establece en el valor pasado explícitamente.

Función anónima

Las funciones que no están vinculadas a un identificador (nombre de función) se llaman como anonymous functions. Estas funciones se declaran dinámicamente en tiempo de ejecución. Las funciones anónimas pueden aceptar entradas y devolver salidas, al igual que las funciones estándar. Una función anónima generalmente no es accesible después de su creación inicial.

A las variables se les puede asignar una función anónima. Esta expresión se llama expresión de función.

Sintaxis

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

Ejemplo: una función anónima simple

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

Al compilar, generará el mismo código en JavaScript.

Producirá la siguiente salida:

hello world

Ejemplo ─ Función anónima con parámetros

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

La función anónima devuelve el producto de los valores que se le pasan.

Al compilar, generará el siguiente código JavaScript:

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

La salida del código anterior es la siguiente:

24

Expresión de función y declaración de función ─ ¿Son sinónimos?

La expresión de función y la declaración de función no son sinónimos. A diferencia de una expresión de función, una declaración de función está vinculada por el nombre de la función.

La diferencia fundamental entre los dos es que las declaraciones de función se analizan antes de su ejecución. Por otro lado, las expresiones de función se analizan solo cuando el motor de secuencia de comandos las encuentra durante la ejecución.

Cuando el analizador de JavaScript ve una función en el flujo de código principal, asume Declaración de función. Cuando una función forma parte de una declaración, es una expresión de función.

El constructor de funciones

TypeScript también admite la definición de una función con el constructor de JavaScript incorporado llamado Function ().

Sintaxis

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

Ejemplo

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

La nueva función () es una llamada al constructor que a su vez crea y devuelve una referencia de función.

Al compilar, generará el mismo código en JavaScript.

La salida del código de ejemplo anterior es la siguiente:

12

Funciones de recursividad y TypeScript

La recursividad es una técnica para iterar sobre una operación haciendo que una función se llame a sí misma repetidamente hasta que llegue a un resultado. La recursividad se aplica mejor cuando necesita llamar a la misma función repetidamente con diferentes parámetros dentro de un bucle.

Ejemplo: recursividad

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

Al compilar, generará el mismo código en JavaScript.

Aquí está su salida:

720

Ejemplo: función recursiva anónima

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

Al compilar, generará el mismo código en JavaScript.

Su salida es la siguiente:

Hello!!

Funciones lambda

Lambda se refiere a funciones anónimas en programación. Las funciones Lambda son un mecanismo conciso para representar funciones anónimas. Estas funciones también se denominanArrow functions.

Función Lambda - Anatomía

Hay 3 partes en una función Lambda:

  • Parameters - Una función puede tener opcionalmente parámetros

  • The fat arrow notation/lambda notation (=>) - También se llama como el operador va al

  • Statements - representar el conjunto de instrucciones de la función

Tip - Por convención, se recomienda el uso de parámetros de una sola letra para una declaración de función compacta y precisa.

Expresión Lambda

Es una expresión de función anónima que apunta a una sola línea de código. Su sintaxis es la siguiente:

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

Ejemplo: expresión lambda

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

El programa declara una función de expresión lambda. La función devuelve la suma de 10 y el argumento pasado.

Al compilar, generará el siguiente código JavaScript.

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

Aquí está la salida del código anterior:

110

Declaración Lambda

La declaración Lambda es una declaración de función anónima que apunta a un bloque de código. Esta sintaxis se utiliza cuando el cuerpo de la función abarca varias líneas. Su sintaxis es la siguiente:

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

Ejemplo: declaración Lambda

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

La referencia de la función se devuelve y se almacena en la variable. foo.

Al compilar, generará el siguiente código JavaScript:

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

El resultado del programa anterior es el siguiente:

110

Variaciones sintácticas

Tipo de parámetro Inferencia

No es obligatorio especificar el tipo de datos de un parámetro. En tal caso, el tipo de datos del parámetro es cualquiera. Echemos un vistazo al siguiente fragmento de código:

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

Al compilar, generará el siguiente código 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");

Su salida es la siguiente:

12 is numeric 
Tom is a string

Paréntesis opcionales para un solo parámetro

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

Al compilar, generará el siguiente código JavaScript:

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

Su salida es la siguiente:

The function got 12

Corchetes opcionales para una sola declaración, paréntesis vacíos para ningún parámetro

El siguiente ejemplo muestra estas dos variaciones sintácticas.

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

Al compilar, generará el siguiente código JavaScript:

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

Su salida es la siguiente:

Function invoked

Sobrecargas de funciones

Las funciones tienen la capacidad de operar de manera diferente en función de la información que se les proporciona. En otras palabras, un programa puede tener varios métodos con el mismo nombre con diferente implementación. Este mecanismo se denomina sobrecarga de funciones. TypeScript proporciona soporte para la sobrecarga de funciones.

Para sobrecargar una función en TypeScript, debe seguir los pasos que se indican a continuación:

Step 1- Declarar múltiples funciones con el mismo nombre pero diferente firma de función. La firma de función incluye lo siguiente.

  • 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 - La firma de la función no incluye el tipo de retorno de la función.

Step 2- La declaración debe ir seguida de la definición de la función. Los tipos de parámetros deben establecerse enanysi los tipos de parámetros difieren durante la sobrecarga. Además, paracase b explicado anteriormente, puede considerar marcar uno o más parámetros como opcionales durante la definición de la función.

Step 3 - Finalmente, debes invocar la función para que sea funcional.

Ejemplo

Echemos ahora un vistazo al siguiente código de ejemplo:

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

  • Las dos primeras líneas representan la declaración de sobrecarga de la función. La función tiene dos sobrecargas:

    • Función que acepta un solo parámetro de cadena.

    • Función que acepta dos valores de tipo número y cadena respectivamente.

  • La tercera línea define la función. El tipo de datos de los parámetros se establece enany. Además, el segundo parámetro es opcional aquí.

  • La función sobrecargada es invocada por las dos últimas declaraciones.

Al compilar, generará el siguiente código JavaScript:

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

El código anterior producirá el siguiente resultado:

abc 
1 
xyz