ProgramaciónDesarrollador Fullstack

¿Cómo implementar y tipificar una función con desestructuración de parámetros anidados en TypeScript? ¿Cuáles son las consideraciones al usar valores predeterminados, propiedades opcionales y obligatorias?

Supere entrevistas con el asistente de IA Hintsage

Respuesta.

Historia de la pregunta: En JavaScript, las funciones a menudo utilizan la desestructuración de objetos directamente en la firma. En TypeScript, este enfoque requiere una descripción clara de la estructura de los parámetros desestructurados y la asignación de valores predeterminados, de lo contrario, pueden ocurrir errores al acceder a propiedades no existentes y deducción incorrecta de tipos.

Problema: No está claro cómo describir correctamente el tipo de todo el parámetro o propiedades anidadas individuales en el objeto desestructurado, especialmente cuando hay campos opcionales y anidados, así como valores por defecto.

Solución: Siempre describe un tipo o interfaz separada para la estructura de los parámetros de la función, especifica claramente qué campos son obligatorios, cuáles son opcionales y establece los valores predeterminados en el cuerpo de la función o directamente en los parámetros usando la sintaxis de ES6.

Ejemplo de código:

interface UserOptions { name: string; age?: number; address?: { city: string; zipcode?: string }; } function registerUser( { name, age = 18, address = { city: 'Desconocido' } }: UserOptions ): string { return `${name}, ${age}, ${address.city}`; }

Características clave:

  • Para la desestructuración de parámetros anidados, siempre utiliza una interfaz o tipo.
  • Establece los valores predeterminados de los campos en la firma de la función.
  • Para propiedades opcionales (age?, address?), siempre considera escenarios donde pueden estar ausentes.

Preguntas capciosas.

¿Se puede omitir la descripción del tipo del objeto parámetro, confiando en la deducción automática?

No, eso es peligroso. Si no se indica el tipo UserOptions, el compilador no advertirá sobre las propiedades obligatorias, los valores predeterminados no se capturaran para los campos anidados y aparecerán errores implícitos en el momento de uso.

function example({ x, y }) { ... } // x e y son any

¿Cómo establecer un valor predeterminado para un objeto anidado, reemplazando parcialmente las propiedades?

Usa el spread. Sin embargo, el spread no "fusiona" los tipos si el tipo address es opcional. Debes realizar una verificación o establecer el valor predeterminado de forma explícita.

function fn({ obj = { foo: 1 } }: { obj?: { foo: number } }) { const address = { foo: 42, ...obj }; }

¿Cuál es el peligro de la desestructuración con campos opcionales sin valor por defecto?

Si omites un valor por defecto para las propiedades opcionales, los accesos a las propiedades (por ejemplo, address.city) pueden causar errores en tiempo de ejecución. Es mejor establecer explícitamente ? y un valor por defecto.

function danger({ address }: { address?: { city: string } }) { console.log(address.city); // Error, address puede ser undefined }

Errores típicos y anti-patrones

  • Inferencia de tipo implícita de argumentos desestructurados (any)
  • Falta de valor por defecto para propiedades anidadas/opcionales
  • No utilización de interfaces y tipos alias para los parámetros estructurales

Ejemplo de la vida real

Caso negativo

En código antiguo, se desestructuró un objeto de parámetros sin tipificación explícita. Al agregar un nuevo campo en la función, no se encontraron automáticamente todos los lugares de uso, rompiendo las llamadas en producción.

Ventajas:

  • Rápido y fácil de escribir

Desventajas:

  • Falta de seguridad y control sobre la estructura
  • Fragilidad ante cambios

Caso positivo

Se implementaron interfaces para todas esas funciones, se cubrieron pruebas para escenarios con undefined y valores predeterminados, y las sugerencias del compilador permitieron realizar cambios masivos fácilmente.

Ventajas:

  • Alta seguridad de tipos
  • Facilidad de refactorización y escalabilidad

Desventajas:

  • Un poco más de texto en las declaraciones de tipos