TypeScript - funções

As funções são os blocos de construção de código legível, sustentável e reutilizável. Uma função é um conjunto de instruções para realizar uma tarefa específica. As funções organizam o programa em blocos lógicos de código. Uma vez definidas, as funções podem ser chamadas para acessar o código. Isso torna o código reutilizável. Além disso, as funções facilitam a leitura e a manutenção do código do programa.

Uma declaração de função informa ao compilador sobre o nome de uma função, tipo de retorno e parâmetros. Uma definição de função fornece o corpo real da função.

Sr. Não Funções e descrição
1 Definindo uma função

Uma definição de função especifica o que e como uma tarefa específica seria realizada.
2 Chamando uma função

Uma função deve ser chamada para executá-la.
3 - Funções de retorno

As funções também podem retornar valor junto com o controle, de volta para o chamador.
4 Função Parametrizada

Os parâmetros são um mecanismo para passar valores para funções.

Parâmetros Opcionais

Parâmetros opcionais podem ser usados ​​quando os argumentos não precisam ser passados ​​obrigatoriamente para a execução de uma função. Um parâmetro pode ser marcado como opcional anexando um ponto de interrogação ao seu nome. O parâmetro opcional deve ser definido como o último argumento em uma função. A sintaxe para declarar uma função com parâmetro opcional é fornecida abaixo -

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

Exemplo: parâmetros opcionais

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

  • O exemplo acima declara uma função parametrizada. Aqui, o terceiro parâmetro, ou seja, mail_id é um parâmetro opcional.

  • Se um parâmetro opcional não receber um valor durante a chamada da função, o valor do parâmetro será definido como indefinido.

  • A função imprime o valor de mail_id apenas se o argumento receber um valor.

Na compilação, ele irá gerar o seguinte 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]");

O código acima produzirá a seguinte saída -

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

Parâmetros de repouso

Os parâmetros de descanso são semelhantes aos argumentos variáveis ​​em Java. Os parâmetros de descanso não restringem o número de valores que você pode passar para uma função. No entanto, os valores passados ​​devem ser todos do mesmo tipo. Em outras palavras, os parâmetros rest atuam como marcadores de posição para vários argumentos do mesmo tipo.

Para declarar um parâmetro rest, o nome do parâmetro é prefixado com três pontos. Qualquer parâmetro nonrest deve vir antes do parâmetro rest.

Exemplo: Parâmetros de repouso

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)

  • A declaração da função addNumbers () aceita um parâmetro resto nums . O tipo de dados do parâmetro rest deve ser definido como uma matriz. Além disso, uma função pode ter no máximo um parâmetro de repouso.

  • A função é chamada duas vezes, passando três e seis valores, respectivamente.

  • O laço for itera através da lista de argumentos, passada para a função e calcula sua soma.

Na compilação, ele irá gerar o seguinte 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);

A saída do código acima é a seguinte -

sum of numbers 6 
sum of numbers 50

Parâmetros padrão

Os parâmetros de função também podem receber valores atribuídos por padrão. No entanto, esses parâmetros também podem ser valores passados ​​explicitamente.

Sintaxe

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

Note - Um parâmetro não pode ser declarado opcional e padrão ao mesmo tempo.

Exemplo: parâmetros padrão

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)

Na compilação, ele irá gerar o seguinte 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);

Seu resultado é o seguinte -

Discount amount : 500 
Discount amount : 300

  • O exemplo declara a função calcular_discount . A função possui dois parâmetros - preço e taxa.

  • O valor da taxa do parâmetro é definido como 0,50 por padrão.

  • O programa invoca a função, passando para ela apenas o valor do parâmetro preço. Aqui, o valor da taxa é 0,50 (padrão)

  • A mesma função é chamada, mas com dois argumentos. O valor padrão da taxa é sobrescrito e é definido como o valor passado explicitamente.

Função Anônima

As funções que não estão associadas a um identificador (nome da função) são chamadas como anonymous functions. Essas funções são declaradas dinamicamente em tempo de execução. As funções anônimas podem aceitar entradas e retornar saídas, assim como fazem as funções padrão. Uma função anônima geralmente não está acessível após sua criação inicial.

As variáveis ​​podem ser atribuídas a uma função anônima. Essa expressão é chamada de expressão de função.

Sintaxe

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

Exemplo ─ Uma função anônima simples

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

Na compilação, ele irá gerar o mesmo código em JavaScript.

Ele produzirá a seguinte saída -

hello world

Exemplo ─ função anônima com parâmetros

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

A função anônima retorna o produto dos valores passados ​​a ela.

Na compilação, ele irá gerar o seguinte código JavaScript -

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

A saída do código acima é a seguinte -

24

Expressão da função e declaração da função ─ são sinônimos?

Expressão de função e declaração de função não são sinônimos. Ao contrário de uma expressão de função, uma declaração de função é limitada pelo nome da função.

A diferença fundamental entre os dois é que as declarações de função são analisadas antes de sua execução. Por outro lado, as expressões de função são analisadas apenas quando o mecanismo de script as encontra durante a execução.

Quando o analisador JavaScript vê uma função no fluxo de código principal, ele assume a Declaração de Função. Quando uma função vem como parte de uma instrução, é uma Expressão de Função.

O Construtor de Função

O TypeScript também oferece suporte à definição de uma função com o construtor interno de JavaScript denominado Function ().

Sintaxe

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

Exemplo

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

O novo Function () é uma chamada ao construtor que, por sua vez, cria e retorna uma referência de função.

Na compilação, ele irá gerar o mesmo código em JavaScript.

A saída do código de exemplo acima é a seguinte -

12

Funções de recursão e TypeScript

A recursão é uma técnica para iterar uma operação fazendo com que uma função se chame repetidamente até chegar a um resultado. A recursão é melhor aplicada quando você precisa chamar a mesma função repetidamente com diferentes parâmetros de dentro de um loop.

Exemplo - Recursão

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

Na compilação, ele irá gerar o mesmo código em JavaScript.

Aqui está o resultado -

720

Exemplo: função recursiva anônima

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

Na compilação, ele irá gerar o mesmo código em JavaScript.

Seu resultado é o seguinte -

Hello!!

Funções Lambda

Lambda se refere a funções anônimas na programação. As funções lambda são um mecanismo conciso para representar funções anônimas. Essas funções também são chamadas deArrow functions.

Função Lambda - Anatomia

Existem 3 partes para uma função Lambda -

  • Parameters - Uma função pode opcionalmente ter parâmetros

  • The fat arrow notation/lambda notation (=>) - Também é chamado de operador vai para

  • Statements - representa o conjunto de instruções da função

Tip - Por convenção, o uso do parâmetro de uma letra é encorajado para uma declaração de função compacta e precisa.

Expressão Lambda

É uma expressão de função anônima que aponta para uma única linha de código. Sua sintaxe é a seguinte -

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

Exemplo: expressão lambda

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

O programa declara uma função de expressão lambda. A função retorna a soma de 10 e o argumento é aprovado.

Na compilação, ele irá gerar o seguinte código JavaScript.

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

Aqui está a saída do código acima -

110

Declaração Lambda

A instrução lambda é uma declaração de função anônima que aponta para um bloco de código. Essa sintaxe é usada quando o corpo da função abrange várias linhas. Sua sintaxe é a seguinte -

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

Exemplo: declaração Lambda

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

A referência da função é retornada e armazenada na variável foo.

Na compilação, ele irá gerar o seguinte código JavaScript -

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

O resultado do programa acima é o seguinte -

110

Variações Sintáticas

Tipo de parâmetro inferência

Não é obrigatório especificar o tipo de dados de um parâmetro. Nesse caso, o tipo de dados do parâmetro é qualquer. Vamos dar uma olhada no seguinte snippet 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")

Na compilação, ele irá gerar o seguinte 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");

Seu resultado é o seguinte -

12 is numeric 
Tom is a string

Parênteses opcionais para um único parâmetro

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

Na compilação, ele irá gerar o seguinte código JavaScript -

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

Seu resultado é o seguinte -

The function got 12

Chaves opcionais para uma única instrução, parênteses vazios para nenhum parâmetro

O exemplo a seguir mostra essas duas variações sintáticas.

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

Na compilação, ele irá gerar o seguinte código JavaScript -

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

Seu resultado é o seguinte -

Function invoked

Sobrecargas de função

As funções têm a capacidade de operar de maneira diferente com base nas informações fornecidas a elas. Em outras palavras, um programa pode ter vários métodos com o mesmo nome com implementações diferentes. Este mecanismo é denominado Sobrecarga de Função. TypeScript fornece suporte para sobrecarga de função.

Para sobrecarregar uma função no TypeScript, você precisa seguir as etapas fornecidas abaixo -

Step 1- Declarar várias funções com o mesmo nome, mas com assinatura de função diferente. A assinatura da função inclui o seguinte.

  • 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 - A assinatura da função não inclui o tipo de retorno da função.

Step 2- A declaração deve ser seguida pela definição da função. Os tipos de parâmetro devem ser definidos paraanyse os tipos de parâmetro diferem durante a sobrecarga. Além disso, paracase b explicado acima, você pode considerar marcar um ou mais parâmetros como opcionais durante a definição da função.

Step 3 - Finalmente, você deve invocar a função para torná-la funcional.

Exemplo

Vamos agora dar uma olhada no código de exemplo a seguir -

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

  • As primeiras duas linhas representam a declaração de sobrecarga de função. A função tem duas sobrecargas -

    • Função que aceita um único parâmetro de string.

    • Função que aceita dois valores de tipo number e string respectivamente.

  • A terceira linha define a função. O tipo de dados dos parâmetros são definidos paraany. Além disso, o segundo parâmetro é opcional aqui.

  • A função sobrecarregada é chamada pelas duas últimas instruções.

Na compilação, ele irá gerar o seguinte código JavaScript -

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

O código acima produzirá a seguinte saída -

abc 
1 
xyz