En este artículo vamos a ver los problemas que nos pueden surgir cuando trabajamos con el binding de String Interpolation y tenemos valores nulos o undefined. Además, analizaremos las casuísticas dónde podemos tener dichos problemas, como solventarlos de distintas maneras, etc. ¡Si os parece comenzamos!

String Interpolation de una variable que no existe

Si intentamos acceder a una variable sin que está exista en el componente podemos ver que nos aparecerá que no está definida y no nos permitirá ni realizar la compilación:

String Interpolation de una variable existente con un valor asignado de null o undefined

En cambio, cuando realizamos una llamada hacía el valor de una variable, esta puede contener un null o un undefined y esta vez sí que se realiza la transpilación (compilación) correctamente:

Si vamos a nuestro navegador podemos comprobar que Angular no se queja por ello, pero, las variables que no tengan contenido (undefined o null) simplemente, no nos las mostrará:

String Interpolation de las propiedades de un objeto

Si intentamos acceder a una propiedad que se encuentra directamente en el interior de un objeto que es null o undefined:

El resultado será mostrar solamente los elementos que disponibles:

Si ahora intentamos acceder a lo mismo declarando las variables como null, podemos ver que no se queja:

Si vamos al navegador y ejecutamos nuestra aplicación, podemos observar que nos aparece el error de Cannot read property ‘html’ of null (con undefined pasaría lo mismo):

El error también sucedería cuando realizamos lo mismo directamente sobre las propiedades de un objeto:

Y podemos ver qué ocurre lo mismo con undefined:

¿Que consecuencias tiene esto en mi aplicación? ¿Porque me debo de preocupar?

Si ejecutamos el código de nuestra aplicación con este ejemplo, podemos ver que el contenido de los H2 no se muestra ni el texto Front: Back: ni el del String Interpolation.

¿Porque pasa esto?

Esta característica de TypeScript se llama “comprobaciones estrictas de nulos”, ya que la existencia de null o undefined en nuestro proyecto puede provocarnos muchos problemas. Por ejemplo que se pase un null a otra función o que no se renderice la etiqueta HTML al completo, etc.

Un ejemplo de los malos que pueden ser los null o los undefined es la conferencia del creador de los nulos Tony Hoare donde describe el error como  el error de mil millones de dólares . Por ello, lenguajes como TypeScript introducen como solución esta advertencia además de proporcionarnos mecanismos para ayudarnos a evitar que esto ocurra.

¿Cómo soluciono esto? ¿De qué mecanismo dispongo?

1. No escribir nulls o undefined

La primera buena práctica para evitar que pase esto es tratar de no trabajar en medida de lo posible al máximo con valores que sean nullundefined, por ejemplo, inicializándolos por adelantado:

Si no usamos null ni undefined, podemos ver cómo nos avisa TypeScript en el propio VSC.

2. Utilizar *ngIf para evaluar la existencia de valores no nulos o vacíos

¿Y si el código no solo lo desarrollo solo y hay nulls o emptys en el código? ¿Qué alternativas tengo para garantizar no tener errores?

Otra alternativa sería utilizar *ngIf:

Si nos fijamos mediante a *ngIf junto a la variable u objeto, podemos realizar una operación condicional que nos devolverá true or false. En el caso del primer caso, podemos ve que no se muestra y por tanto, que es falso, en el segundo caso que es verdadero.

De hecho, podemos ver que el resultado anterior es equivlaente a hacerlenguajesII && lenguajesII.propiedadpero de una manera más abreviada.

3. Utilizar los Safe navigation operator (?.) (!.)

Aunque el ngIf no está mal existen situaciones en las que no podemos o es más complicado utilizarlos como por ejemplo realización de bucles con *ngFor por ejemplo, luego veremos un ejemplo.

Los operadores de seguridad transversal (o safe navigation operator), por tanto, son la mejor alternativa/mecanismo la gran mayoría de las veces para protegernos de los nullundefinedlos valores de nuestras propiedades.

Tipos de operadores de seguridad:

– Angular safe navigation operator (?.): nos va a permitir evitar que cuando intentamos acceder a rutas de la propiedades que tengan como valor un null o undefined no generen una excepción como las que acabamos de ver anteriormente. El operador de navegación segura, se utiliza cuando podemos comprobar que una variable puede ser nula o undefined.

{{ lenguajes?.backEnd}}

Solo evalúa backEndcuando lenguajesno es nullundefined.  Si vamos al Angular, podemos ver que muestra nuestro H2 aunque en vacío ya que no tiene más contenido y además no muestra ningún error por consola:

​​

– The non-null assertion operator ( ! ): El operador de expresión posterior a la corrección se utiliza para indicar que el operando no puede ser nulo o indefinido durante el tiempo de ejecución. Este operador se puede utilizar cuando el compilador no puede comprobar que una variable no puede ser nula / indefinida.

Un ejemplo podría ser:

Vamos a ver un ejemplo que podría ser real:

Si escribimos el siguiente código:

Podemos ver el siguiente resultado:

Si nos fijamos, podemos observar que hemos mostrado el contenido de nuestro objeto e incluso haciendo un bucle para listar los nombre de los actores:

Pero ¿Qué pasaría si el valor del array actors fuera un null/undefined? Pues que nos arrojará un error como el siguiente:

¿Cómo lo podemos solucionar? Añadiendo ?.  antes de la llamada a la última propiedad. Vamos a verlo:

Espero que os haya gustado. Un saludo y hasta la próxima