¿Cómo funcionan los parámetros opcionales de funciones y las propiedades opcionales de objetos en TypeScript, en qué se diferencian y qué matices hay en su uso? Da ejemplos de problemas y errores típicos.

Respuesta.

Los parámetros opcionales de funciones se indican con un signo de interrogación (?) después del nombre del parámetro. Lo mismo se aplica a las propiedades opcionales en los objetos (interfaces o tipos).

• Para funciones:

function greet(name?: string) {
  console.log(`Hello, ${name ?? 'stranger'}`);
}
greet(); // Hello, stranger
greet('John'); // Hello, John

• Para objetos:

interface User {
  id: number;
  nickname?: string;
}
const u1: User = { id: 1 };
const u2: User = { id: 2, nickname: 'Bob' };

Matices:

• Un parámetro opcional no es necesario pasarlo al llamar a la función, y entonces el valor será undefined.
• Una propiedad opcional puede no estar presente en el objeto.
• No confundir: si en la interfaz una propiedad no se indica como opcional, ¡es obligatoria!
• El parámetro opcional debe ir al final de la lista de argumentos de la función.

Pregunta capciosa.

Si la función se declara con un parámetro opcional de tipo string (function fn(x?: string)), ¿se puede llamar explícitamente con undefined? ¿Cuál es la diferencia entre fn() y fn(undefined)?

Respuesta: Sí, se puede llamar con undefined: fn(undefined) y fn() — el resultado es el mismo, pero dentro de la función se recibirá x === undefined. Pero si se define un valor por defecto en la firma:

function fn(x: string = 'demo') {
  console.log(x);
}
fn(); // demo
fn(undefined); // demo
fn('abc'); // abc

Si el argumento no está declarado como opcional (sin ? o valor por defecto), llamar a fn() dará un error de compilación.

Ejemplos de errores reales por desconocer los matices del tema.

---

Historia

En la interfaz user se especificó la propiedad phone: string (sin ?), pero se olvidó agregarla al crear la instancia del objeto. Como resultado, el compilador de TypeScript comenzó a quejarse por la falta de la propiedad obligatoria. La solución temporal fue agregar phone: undefined, pero esto contradijo el tipo, ya que string !== undefined, y provocó aún más errores de validación.

---

Historia

Se definieron varios parámetros opcionales en la función, pero no se colocaron al final de la lista de argumentos. TypeScript lanzó un error, y al cambiar el orden de los parámetros, se alteró el emparejamiento de los valores pasados, lo que llevó a confusión y un funcionamiento incorrecto de la función.

---

Historia

Se olvidaron los campos opcionales en las interfaces al describir el tipo de datos para una API externa (por ejemplo, apellido del cliente? string), lo que provocó que al cambiar el esquema, por un lado, estos campos dejaran de llegar y, por el otro, el código comenzara a fallar al intentar leerlos sin verificar si eran undefined.