Funciones en TypeScript

Este artículo explica las funciones en TypeScript.

YouTube Video

Funciones en TypeScript

Las funciones en TypeScript son funciones de JavaScript con anotaciones de tipo adicionales. En TypeScript, puedes escribir un código más robusto definiendo claramente los tipos de entradas (parámetros) y salidas (valores de retorno) para las funciones. A continuación, presentamos los métodos básicos para definir funciones y algunas características de las funciones en TypeScript.

Definición Básica de Funciones

1function add(x: number, y: number): number {
2    return x + y;
3}
4
5console.log(add(5, 10));  // 15

• La función add toma dos argumentos de tipo number y devuelve un valor de tipo number.
• Toma dos argumentos, x y y, ambos de tipo number, con sus tipos especificados explícitamente.
• El tipo de valor devuelto también está especificado como : number.

Funciones Anónimas (Expresiones de Función)

Las funciones anónimas y las expresiones de función también pueden usarse en TypeScript. Los tipos pueden ser anotados de la misma manera.

1const multiply = function (x: number, y: number): number {
2    return x * y;
3};
4
5console.log(multiply(3, 4));  // 12

• Puedes asignar una función anónima a una variable y llamarla después.

1const factorial = function fact(n: number): number {
2  if (n <= 1) return 1;
3  return n * fact(n - 1); // Can call itself recursively
4};
5
6console.log(factorial(5)); // 120

• Puedes usar una expresión de función nombrada para habilitar llamadas recursivas.

Funciones de Flecha

Las anotaciones de tipo también pueden usarse con funciones de flecha.

1const subtract = (x: number, y: number): number => {
2    return x - y;
3};
4
5console.log(subtract(10, 4));  // 6

Este código define una función flecha subtract con anotaciones de tipo que toma dos números como argumentos y devuelve su diferencia.

Parámetros Opcionales y Predeterminados

Los parámetros pueden hacerse opcionales o asignarles valores predeterminados.

Parámetros Opcionales

Agregar ? después del nombre del parámetro lo hace opcional.

1function greet(name?: string): string {
2    return name ? `Hello, ${name}` : "Hello!";
3}
4
5console.log(greet());        // Hello!
6console.log(greet("Alice"));  // Hello, Alice

Este código acepta un argumento opcional; si se proporciona el argumento, saluda usando el nombre, de lo contrario devuelve un saludo genérico.

Parámetros Predeterminados

También puedes asignar valores predeterminados a los parámetros.

1function greetWithDefault(name: string = "Guest"): string {
2    return `Hello, ${name}`;
3}
4
5console.log(greetWithDefault());         // Hello, Guest
6console.log(greetWithDefault("Bob"));    // Hello, Bob

Esta función usa "Guest" como valor predeterminado si no se pasa ningún argumento, y saluda usando el nombre especificado o el predeterminado.

Definición del Tipo de Función

También es posible definir el tipo de la función en sí misma. Por ejemplo, esto se utiliza al pasar una función como argumento.

1type Operation = (x: number, y: number) => number;
2
3const addOperation: Operation = (x, y) => x + y;
4const multiplyOperation: Operation = (x, y) => x * y;
5
6console.log(addOperation(2, 3));      // 5
7console.log(multiplyOperation(2, 3)); // 6

Este código define un tipo de función Operation que toma dos números y devuelve un número, luego lo usa para crear y ejecutar funciones de suma y multiplicación.

Cuando No Hay Valor de Retorno (tipo void)

Para las funciones sin valor de retorno, especifique el tipo void.

1function logMessage(message: string): void {
2    console.log(message);
3}
4
5logMessage("This is a message.");  // This is a message.

Este código define una función void llamada logMessage que toma un mensaje de tipo string y lo imprime en la consola sin devolver ningún valor.

Función de devolución de llamada

Pasar una función como argumento a otra función y ejecutarla más tarde se llama función de devolución de llamada. Se utiliza frecuentemente en procesamiento asíncrono y manejo de eventos.

1function processData(callback: (data: string) => void): void {
2    const data: string = "Processed Data";
3    callback(data);
4}
5
6processData((result: string): void => {
7    console.log(result);
8});

En este ejemplo, se pasa como función de devolución de llamada una función que imprime un valor en la consola.

Alternativamente, puedes definir un tipo de devolución de llamada usando type o interface.

 1type Callback = (data: string) => void;
 2
 3function processData(callback: Callback): void {
 4    const data: string = "Processed Data";
 5    callback(data);
 6}
 7
 8processData((result: string): void => {
 9    console.log(result);
10});

Definir un tipo de devolución de llamada usando type o interface mejora la reutilización.

Sobrecarga de Funciones

La sobrecarga de funciones te permite definir funciones con el mismo nombre pero con diferentes listas de parámetros. En TypeScript, puedes definir múltiples funciones con el mismo nombre y realizar diferentes operaciones basadas en los tipos y la cantidad de parámetros.

 1// Overload Signature
 2function double(value: number): number;
 3function double(value: string): string;
 4
 5// Implementation Signature
 6function double(value: number | string): number | string {
 7    if (typeof value === "number") {
 8        return value * 2;
 9    } else if (typeof value === "string") {
10        return value + value;
11    }
12}
13
14console.log(double(10));      // 20
15console.log(double("Hello")); // HelloHello

En TypeScript, la sobrecarga se logra de la siguiente manera:.

• Firma de Sobrecarga

  • Define cómo se puede usar la función (su firma). Escribiendo esta parte varias veces, se hace posible la sobrecarga.

• Firma de Implementación

  • Implementa el cuerpo real de la función. Esta parte se define solo una vez y maneja todos los casos declarados en las firmas de sobrecarga.

Reglas para la Sobrecarga

Se aplican las siguientes reglas a la sobrecarga de funciones:.

• Orden de las Definiciones de Firmas de Sobrecarga

  • Dado que la evaluación ocurre de arriba hacia abajo, se recomienda definir primero los tipos específicos, seguidos de los tipos más genéricos.

• Compatibilidad de la Firma de Implementación

  • La firma de implementación debe ser compatible con los argumentos y valores de retorno de todas las firmas de sobrecarga.

• Especificar Detalles en las Firmas de Sobrecarga

  • La firma de implementación tiende a ser ambigua, por lo que los detalles deben especificarse en las firmas de sobrecarga.
  • Si solo se define la firma de implementación, la inferencia de tipos para la función será insuficiente.

Resumen

Las funciones en TypeScript tienen las siguientes características.

• Anotaciones de tipo
  • Al especificar los tipos para los argumentos y los valores de retorno, puedes escribir código más seguro.
• Funciones anónimas y funciones flecha
  • Se pueden usar igual que en JavaScript, y agregar anotaciones de tipo mejora la seguridad de tipos.
• Parámetros opcionales y predeterminados
  • Puedes hacer que la especificación de los argumentos sea más flexible según sea necesario.
• Definiciones de tipo de función
  • Define el tipo de la propia función para realizar la comprobación de tipos.
• Sobrecarga de funciones
  • Puedes admitir diferentes argumentos con el mismo nombre de función.

Al utilizar esto, puedes escribir un código más claro y robusto en TypeScript.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video