¿Cómo admite TypeScript los parámetros opcionales en la función, ya que cada parámetro es opcional para una función en JavaScript?

Los parámetros opcionales son aquellos cuyo valor puede proporcionarse o no como argumento durante la llamada a la función. Su valor se establece en indefinido cuando no se proporcionan como argumento.

Es diferente de un parámetro por defecto para el que necesitamos proporcionar un valor por defecto en el momento de definir la función. Este valor predeterminado se utiliza en caso de que no se proporcione el argumento.

En javascript, de forma predeterminada, si no proporciona un argumento para un parámetro, su valor se establecerá en undefined . 

En el siguiente ejemplo, la función de registro registra el valor del mensaje proporcionado en el argumento. arguments.length es una propiedad integrada que devuelve una serie de argumentos proporcionados en la llamada a la función .

function logger(message) {
    console.log("number of arguments passed: ", arguments.length);
    if (message === undefined) {
        console.log("please provide a message to be logged");
    }
    else {
        console.log(message);
    }
    console.log();
}
logger("Welcome to GFG!");
logger();

Producción:

number of arguments passed: 1
Welcome to GFG!

number of arguments passed: 0
please provide a message to be logged

En el ejemplo anterior, podemos ver que cuando no proporcionamos el argumento para el parámetro del mensaje , su valor se vuelve indefinido .

Sin embargo, no es el caso en TypeScript. Para ver eso, copie y pegue el código anterior en un archivo TypeScript (con extensión .ts) y compílelo, o use un editor de TypeScript en línea como TS Playground que se proporciona en el sitio web oficial de TypeScript. Obtendrá un error al compilar el código como se muestra a continuación:

El error se muestra mediante TypeScript al usar el parámetro opcional incorrectamente.

Hemos recibido el error anterior porque el compilador de TypeScript asume que el mensaje es un parámetro obligatorio. Por lo tanto, debemos mencionar explícitamente que es un parámetro opcional en la declaración de la función. Para eso, usamos el ? símbolo después del nombre del parámetro. La sintaxis se muestra a continuación:

Sintaxis:

<parameter-name>? : <parameter-type>

El código TypeScript correcto para el ejemplo anterior se muestra a continuación:

// Use ? to make a parameter optional
function logger(message?: string) {
    console.log("number of arguments passed: ", arguments.length);
    if (message === undefined) {
        console.log("please provide a message to be logged");
    }
    else {
        console.log(message);
    }
    console.log();
}
logger("Welcome to GFG!");
logger();

Producción:

number of arguments passed: 1
Welcome to GFG!

number of arguments passed: 0
please provide a message to be logged

Nota:

Al proporcionar parámetros opcionales junto con parámetros predeterminados o requeridos, asegúrese de seguir el siguiente orden (donde 1 es el primero y 3 el último) en el que se deben proporcionar los parámetros:

1. Parámetro requerido: cuyo valor debe proporcionarse como argumento
2. Parámetro predeterminado: Cuyo argumento puede o no proporcionarse (se toma el valor predeterminado si no se proporciona)
3. Parámetro opcional: cuyo argumento es opcional (el valor se toma como indefinido si no se proporciona el argumento)

A continuación se muestra un ejemplo de una función de suma que muestra el uso de un parámetro opcional junto con los parámetros predeterminados y obligatorios en javascript y TypeScript. Tenga en cuenta la diferencia en la declaración de la función en ambos idiomas:

JavaScript:

// c is optional argument
function add(a, b = 1, c) {
    console.log("number of arguments provided is: ", arguments.length);
    if (c === undefined) {
        console.log("provide a value for third argument");
    }
    console.log("Result: ", (a + b + c));
    console.log();
}
  
add(1, 3);  // skipping value for optional parameter
add(1, 3, 4); // providing value for optional parameter

Producción:

number of arguments provided is: 2
provide a value for third argument
Result: NaN

TypeScript:

// see the use of ? symbol for optional argument
function add(a: number, b = 1, c?: number) {
  console.log("number of arguments provided is: ", arguments.length);
  
  if(c === undefined){
    console.log("provide a value for third argument");
  }
  console.log("Result: ", (a + b + c));
  console.log();
}
  
add(1, 3);  // Skipping value for optional parameter
add(1,3,4); // Providing value for optional parameter

Producción:

number of arguments provided is: 2
provide a value for third argument
Result: NaN

Por lo tanto, vimos que en javascript cada parámetro es un parámetro opcional por defecto. mientras que en TypeScript necesitamos mencionar explícitamente un parámetro como opcional usando ? símbolo.