Funciones de TypeScript

Una función es un conjunto de declaraciones que juntas realizan una tarea.

Puede dividir su código en diferentes funciones. Cómo dividir el código en diferentes funciones depende de usted, pero lógicamente, la división generalmente se realiza según que cada función ejecute una tarea específica.

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

Definición de funciones

Una función es un bloque de código encerrado entre llaves, precedido por la palabra clave function:

El formato de sintaxis es el siguiente:

function function_name()
{
    // 执行代码
}

Ejemplo

TypeScript

function () { //Definición de la función console.log("Llamada a la función") }

Llamar a una función

Una función solo puede ejecutar el código que contiene cuando es llamada.

El formato de sintaxis es el siguiente:

function_name()

Ejemplo

TypeScript

function test() { //Definición de la función console.log("Llamada a la función") } test() //Llamada a la función

Valor de retorno de una función

A veces, queremos que la función devuelva el resultado de la ejecución al lugar donde se la llama.

Esto se puede lograr mediante el uso de la declaración return.

Al usar la declaración return, la función deja de ejecutarse y devuelve el valor especificado.

El formato de sintaxis es el siguiente:

function function_name():return_type { 
    // 语句
    return value; 
}

  • return_type es el tipo del valor de retorno.

  • La palabra clave return va seguida del resultado a devolver.

  • En general, una función solo tiene una declaración return.

  • El tipo del valor de retorno debe coincidir con el tipo de retorno (return_type) definido en la función.

Ejemplo

TypeScript

//Definición de la función function greet():string { //Devuelve una cadena return "Hello World" } function caller() { var msg = greet() //Llamar a la función greet() console.log(msg) } //Llamar a la función caller()

  • En el ejemplo se define una funcióngreet(), el tipo del valor de retorno es string.

  • greet()La función devuelve mediante la declaración return al lugar donde se la llama, es decir, a la variable msg, y luego se muestra ese valor de retorno.

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

//Definición de la función function greet() { return "Hello World"; } function caller() { var msg = greet(); //Llamar a la función greet() console.log(msg); } //Llamar a la función caller();

Funciones con parámetros

Al llamar a una función, puede pasarle valores, estos valores se denominan parámetros.

Estos parámetros se pueden usar dentro de la función.

Puede enviar varios parámetros a la función, cada parámetro separado por coma,:

El formato de sintaxis es el siguiente:

function func_name( param1 [:datatype], param2 [:datatype]) {   
}

  • param1, param2 son los nombres de los parámetros.

  • datatype es el tipo del parámetro.

Ejemplo

TypeScript

function add(x: number, y: number): number { return x + y; } console.log(add(1,2))

  • En el ejemplo se define una funciónadd(), el tipo del valor de retorno es number.

  • add()En la función se definen dos parámetros de tipo number, y dentro de la función se suman los dos parámetros y se devuelve el resultado.

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

function add(x, y) { return x + y; } console.log(add(1, 2));

El resultado de salida es:

3

Parámetros opcionales y parámetros por defecto

Parámetros opcionales

En las funciones de TypeScript, si definimos parámetros, debemos pasarlos a menos que estos parámetros se establezcan como opcionales. Los parámetros opcionales se identifican con un signo de interrogación ?.

Ejemplo

TypeScript

function buildName(firstName: string, lastName: string) { return firstName + " " + lastName; } let result1 = buildName("Bob"); //Error, faltan parámetros let result2 = buildName("Bob", "Adams", "Sr."); //Error, hay demasiados parámetros let result3 = buildName("Bob", "Adams"); //Correcto

En el siguiente ejemplo, configuramos lastName como un parámetro opcional:

TypeScript

function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName; } let result1 = buildName("Bob"); //Correcto let result2 = buildName("Bob", "Adams", "Sr."); //Error, hay demasiados parámetros let result3 = buildName("Bob", "Adams"); //Correcto

Los parámetros opcionales deben ir después de los parámetros requeridos. Si en el ejemplo anterior queremos que firstName sea opcional y lastName sea obligatorio, entonces debemos ajustar sus posiciones y poner firstName al final.

Si todos son parámetros opcionales, no hay problema.

Parámetros por defecto

También podemos establecer valores por defecto para los parámetros, de modo que al llamar a la función, si no se pasa el valor de ese parámetro, se usa el parámetro por defecto. El formato de sintaxis es:

function function_name(param1[:type],param2[:type] = default_value) { 
}
Nota: Un parámetro no se puede establecer como opcional y por defecto al mismo tiempo.

Ejemplo

En el siguiente ejemplo, el parámetro rate de la función tiene un valor por defecto de 0.50. Al llamar a esta función, si no se pasa el parámetro, se usa ese valor por defecto:

TypeScript

function calculate_discount(price:number,rate:number = 0.50) { var discount = price * rate; console.log("Resultado del cálculo:",discount); } calculate_discount(1000) calculate_discount(1000,0.30)

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

function calculate_discount(price, rate) { if (rate === void 0) { rate = 0.50; } var discount = price * rate; console.log("Resultado del cálculo:", discount); } calculate_discount(1000); calculate_discount(1000, 0.30);

El resultado de salida es:

计算结果:  500
计算结果:  300

Parámetros rest

Hay un caso en el que no sabemos cuántos parámetros se pasarán a la función; en ese momento podemos usar los parámetros rest para definirlos.

La sintaxis de los parámetros rest nos permite pasar un número indeterminado de parámetros como un array.

TypeScript

function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" "); } let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

El último parámetro nombrado de la función, restOfName, tiene el prefijo ..., y se convierte en un array compuesto por los parámetros restantes, con índices desde 0 (incluido) hasta restOfName.length (excluido).

TypeScript

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

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

function addNumbers() { var nums = []; for (var _i = 0; _i < arguments.length; _i++) { nums[_i] = arguments[_i]; } var i; var sum = 0; for (i = 0; i < nums.length; i++) { sum = sum + nums[i]; } console.log("La suma es:", sum); } addNumbers(1, 2, 3); addNumbers(10, 10, 10, 10, 10);

El resultado de salida es:

和为： 6
和为： 50

Funciones anónimas

Una función anónima es una función sin nombre de función.

Las funciones anónimas se declaran dinámicamente durante la ejecución del programa; salvo que no tienen nombre de función, todo lo demás es igual que en las funciones estándar.

Podemos asignar una función anónima a una variable, y esta expresión se convierte en una expresión de función.

El formato de sintaxis es el siguiente:

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

Ejemplo

Función anónima sin parámetros:

TypeScript

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

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

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

El resultado de salida es:

hello world

Función anónima con parámetros:

TypeScript

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

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

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

El resultado de salida es:

24

Autoinvocación de funciones anónimas

Para la autoinvocación de una función anónima, basta con usar () después de la función:

TypeScript

(function () { var x = "Hello!!"; console.log(x) })()

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

(function () { var x = "Hello!!"; console.log(x) })()

El resultado de salida es:

Hello!!

Funciones constructoras

TypeScript también admite el uso del constructor incorporado de JavaScript Function() para definir funciones:

El formato de sintaxis es el siguiente:

var res = new Function ([arg1[, arg2[, ...argN]],] functionBody)

Descripción de parámetros:

  • arg1, arg2, ... argN: Lista de parámetros.
  • functionBody: Una cadena que contiene declaraciones de JavaScript, incluida la definición de la función.

Ejemplo

TypeScript

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

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

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

El resultado de salida es:

12

Funciones recursivas

Una función recursiva es aquella que se llama a sí misma dentro de la función.

Por ejemplo:
Había una vez una montaña, en la montaña había un templo, en el templo había un monje anciano que estaba contando una historia a un monje joven. ¿Cuál era la historia? "Había una vez una montaña, en la montaña había un templo, en el templo había un monje anciano que estaba contando una historia a un monje joven. ¿Cuál era la historia? 'Había una vez una montaña, en la montaña había un templo, en el templo había un monje anciano que estaba contando una historia a un monje joven. ¿Cuál era la historia? ...'"

Ejemplo

TypeScript

function factorial(number) { if (number <= 0) { //Detener la ejecución return 1; } else { return (number * factorial(number - 1)); //Llamarse a sí misma } }; console.log(factorial(6)); //Imprime 720

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

function factorial(number) { if (number <= 0) { //Detener la ejecución return 1; } else { return (number * factorial(number - 1)); //Llamarse a sí misma } } ; console.log(factorial(6)); //Imprime 720

El resultado de salida es:

720

Funciones Lambda

Las funciones Lambda también se denominan funciones de flecha.

La sintaxis de la expresión de función de flecha es más corta que la de la expresión de función normal.

La función tiene solo una declaración:

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

Ejemplo

El siguiente ejemplo declara una función de expresión lambda que devuelve la suma de dos números:

TypeScript

var foo = (x:number)=>10 + x console.log(foo(100)) //El resultado de salida es 110

Compile el código anterior para obtener el siguiente código JavaScript:

JavaScript

var foo = function (x) { return 10 + x; }; console.log(foo(100)); //El resultado de salida es 110

El resultado de salida es:

110

La función es un bloque de declaraciones:

( [param1, param2,…param n] )=> {
 
    // 代码块
}

Ejemplo

El siguiente ejemplo declara una función de expresión lambda que devuelve la suma de dos números:

TypeScript

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

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var foo = function (x) { x = 10 + x; console.log(x); }; foo(100);

El resultado de salida es:

110
Podemos no especificar los tipos de parámetros de la función, y estos se infieren dentro de la función:

TypeScript

var func = (x)=> { if(typeof x=="number") { console.log(x+"es un número") } else if(typeof x=="string") { console.log(x+"es una cadena") } } func(12) func("Tom")

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var func = function (x) { if (typeof x == "number") { console.log(x + "es un número"); } else if (typeof x == "string") { console.log(x + "es una cadena"); } }; func(12); func("Tom");

El resultado de salida es:

12 是一个数字
Tom 是一个字符串

Parámetro único()es opcional:

TypeScript

var display = x => { console.log("La salida es"+x) } display(12)

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var display = function (x) { console.log("La salida es" + x); }; display(12);

El resultado de salida es:

输出为 12

Cuando no hay parámetros, se pueden usar paréntesis vacíos:

TypeScript

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

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

var disp = function () { console.log("Llamar a la función"); }; disp();

El resultado de salida es:

Llamar a la función

Sobrecarga de funciones

La sobrecarga consiste en que los métodos tienen el mismo nombre, pero parámetros diferentes; el tipo de retorno puede ser igual o diferente.

Cada método sobrecargado (o constructor) debe tener una lista única de tipos de parámetros.

Tipos de parámetros diferentes:

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

Número de parámetros diferente:

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

Orden de los tipos de parámetros diferente:

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

Si los tipos de parámetros son diferentes, el tipo de parámetro debe establecerse comoany。

Si el número de parámetros es diferente, puedes establecer los diferentes parámetros como opcionales.

Ejemplo

El siguiente ejemplo define tipos de parámetros y números de parámetros diferentes:

TypeScript

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

Al compilar el código anterior, se obtiene el siguiente código JavaScript:

JavaScript

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

El resultado de salida es:

abc
undefined
1
xyz
Otras extensiones