¿Cómo funciona el enstringmiento opcional en TypeScript?

En este artículo, intentaremos comprender cómo podríamos funcionar y analizar el funcionamiento del enstringmiento opcional en TypeScript.

Enstringmiento opcional de TypeScript:

• El enstringmiento opcional de TypeScript es el proceso de búsqueda y llamada de variables, métodos y parámetros que podrían no existir.
• Esta característica en particular permite a los desarrolladores dejar de encontrar los errores que generalmente surgen si las cosas no están definidas, y también podrían manejar fácilmente las cosas no definidas con esta característica en particular.

¿Cómo funciona el enstringmiento opcional?

• El enstringmiento opcional en realidad funciona de una manera un poco complicada, ya que primero verifica la disponibilidad de una variable o función en particular.
• Si esa variable o función está disponible en el archivo, entonces continúa con la verificación de la variable o función mencionada más adelante.
• Si esa variable no está disponible, inmediatamente deja de verificar más y devuelve «indefinido», que un usuario podría manejar fácilmente con cierta lógica.

Analicemos primero cómo podríamos hacer que nuestro parámetro (cuando trabajamos en función) o una variable sea una variable opcional en TypeScript.

Sintaxis para declarar un parámetro opcional: siguiendo la sintaxis, podemos usar para hacer que las variables sean opcionales en TypeScript (» ? «Este operador se usa para hacer que cualquier variable sea opcional en TypeScript)-

parameter_name? : return_type

Ejemplo 1: en este ejemplo, implementaremos la sintaxis ilustrada anteriormente con un ejemplo.

let displayName = (firstName: string , lastName? : string) => {
    return "Name : " + firstName + " " + lastName;
}
  
console.log(displayName("Hello", "World"));
console.log(displayName("GeeksforGeeks"));

Salida: el código ilustrado arriba generará una salida para ambos, pero en el caso de un solo parámetro así pasado generaría un error, simplemente mostraría «indefinido».

Name : Hello World
Name : GeeksforGeeks undefined

Ahora que hemos entendido cómo podemos declarar un parámetro opcional en TypeScript. Veamos ahora cómo podemos realizar un enstringmiento opcional en TypeScript usando los siguientes ejemplos:

Ejemplo 2: en este ejemplo, estaríamos implementando un enstringmiento opcional mientras mostramos el resultado o la salida.

type User = {
    id: number;
    name?: {
        firstName: string;
        lastName?: string;
    }
};
  
const users: User[] = [{
    id: 1,
    name: {
        firstName: "GeeksforGeeks"
    }
},
{
    id: 2,
    name: {
        firstName: "Hello",
        lastName: "World"
    }
},
{
    id: 3
},
];
  
users.map(element => console.log(element.name?.lastName));

Producción:

undefined
World
undefined

Ejemplo 3: En este ejemplo, mostraremos Enstringmiento Opcional en diferentes estilos o técnicas.

type personDetails = {
  name : string,
  details? : {
    age?: number,
    location?: string,
  }
}
  
let person_one: personDetails = {
  name: "GeeksforGeeks",
  details : {
    age: 20,
    location: "Noida"
  }
}
  
let person_two: personDetails = {
  name: "GeeksforGeeks",
  details : {
    location: "Noida"
  }
}
  
let person_three: personDetails = {
  name: "GeeksforGeeks",
  details : {
    age: 20,
  }
}
  
let data_1 = person_one.name + " " 
    + person_one.details?.age + " " 
    + person_one.details?.location;
console.log(data_1);
  
let data_2 = person_two.name + " " 
    + person_two.details?.age + " " 
    + person_two.details?.location;
console.log(data_2);
  
let data_3 = person_three.name + " " 
    + person_three.details?.age + " " 
    + person_three.details?.location;
console.log(data_3);

Producción:

GeeksforGeeks 20 Noida
GeeksforGeeks undefined Noida
GeeksforGeeks 20 undefined