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:
¿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 }
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:
Desventajas:
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:
Desventajas: