null y undefined
Contenido del curso
Boris Vargas Paucara
Miguel Angel Martelo Quiroz
Bairon Felipe peña castellanos
Carlos Jesús Fernández Salazar
Jimmy Buriticá Londoño
Jose Daniel Barría Reyes
Miguel Angel Reyes Moreno
Cristian Mauricio Cavanzo Arias
Jhon Alexander Romero Gonzaga
Markoz Peña
Moisés Manuel Morín Hevia
Johan Garzon
Jeisson Santiago Cortes Ortiz
Juan David Merchán Torres
Federico Walovnik
Fernando Quinteros Gutierrez
Moisés Manuel Morín Hevia
Juan Diego Urbina Chuscano
Moisés Manuel Morín Hevia
Carlos Javier Bazan Huaman
Federico Walovnik
Bramucci Candela
Brandon Argel Verdeja Domínguez
Bramucci Candela
Jaime Ortiz
Daniel Adolfo Ordoñez Rubio
Jaime Ortiz
Jean León
Diego Fernando Caviedes Camaho
Javi Felices
Moisés Manuel Morín Hevia
Jorge Cruz Perez
Yolfry Bautista Reynoso
Yolfry Bautista Reynoso
// ------------------ NULL ------------------ // Explicita let nullVariable: null; nullVariable = null; // nullVariable = 1; // --> Error // Inferido let otherVariable = null; // --> any otherVariable = 'test'; console.log('nullVariable : ', nullVariable); console.log('otherVariable : ', otherVariable); // ----------------- UNDEFINED ----------------- let undefinedVariable: undefined = undefined; // undefinedVariable = 'test'; // --> Error let otherUndefined = undefined; // --> any otherUndefined = 1; console.log('undefinedVariable : ', undefinedVariable); console.log('otherUndefined : ', otherUndefined); // ------- NULL y UNDEFINED: como subtipos ------- /* * tsc --watch src/type-null-undefined.ts --strictNullChecks * Podemos ver las lineas del flag --strictNullChecks: para ver el numero de linea del error * Archivo tsconfig.json "strictNullChecks": true */ let albumName: string; // albumName = null; // albumName = undefined;
Gracias Boris, reutilicé tus apuntes.
Gracias, es buenisimo estas lineas de codigo. asi no se pierde tiempo escribiendo codigo y se enfoca mas en comprender el tema.
Truco para ser más rápido con los console log.
En lugar de escribir
console.log('nullVariable : ', nullVariable); console.log('otherVariable : ', otherVariable);
Puedes simplemente usar un objeto
console.log({nullVariable, otherVariable}); // output // { nullVariable: null, otherVariable: 'test'}
Muy buena opción, crear un objeto con las variables.
Se puede utlizar null y **undefined ** como tipos Estos hacen que sus valores solo sean null y undefined respectivamente. Son subtipos en any.
Flag del compilador de typescript --strictNullChecks. Solo permite asignar null y undefined a una variable de tipo any o sus tipos respectivos. Ayuda a evitar errores comunes.
null y undefined
Opción --strictNullChecks
Generará un reporte de los errores que encuentre, hacemos tsc nombreDelArchivo.ts --strictNullChecks
Muchas gracias por tu aporte
Buena práctica: Tratar de evitar null y undefined en los projectos.
Sip, pero muchas veces es complicado y mas cuando interactuas con APIs
Oka, trataré de evitarlo (:
Si se dan cuenta, no hay ninguna diferencia al usar el flag --strictNullChecks ó al asignar en el archivo tsconfig.json
"strictNullChecks": true,
Es porque ya antes habiamos asignado en el archivo tsconfig.json
"strict": true
y esto activa el modo estricto en todos los chequeos de tipos, incluyendo el strictNullChecks, segun el comentario en ingles frente al "strict": /* Enable all strict type-checking options. */
Pueden intentar comentar o asignar false en "strict" y "strictNullChecks", asignar null a una variable string, por ejemplo y no les va a mostrar ningun error. Luego si asignan true solo a "strictNullChecks", allí si les va a mostrar el error. Antes lo mostraba de todas maneras por que "strict" estaba en true y este incluía "strictNullChecks".
En otros lenguajes cuando se trabajan listas simplemente enlazadas es muy utilizado la asignación de tipo null. por ejemplo buscar una persona por algo. Se puede crear una variable tipo null para cuando el programa encuentre a esta persona asignársela a esa variable.
Hola 👋 Para mejorar la experiencia de typescript en vscode, pueden instalar la extension Eslint para ver los erroes en tiempo de escritura mas detalladamente. Espero haberles aportado algo 🚀
Cual es el uso que le podemos dar a una variable que solo acepte Null o solo acepte Undefined? No puedo encontrarle un uso real.
En lo personal creo que el tipado de los valores mencionados, te servirían más de una forma explícita para TypeScript, es decir cuando tengas un objeto aun definido puedes asignarlo inicialmente con null y luego ese valor sera llenado con algún otro valor, más adelante en el curso se ve cómo hacer que una variable tenga más de un tipo. En este caso tendría dos tipos null y el tipado del objeto. Espero haber resuelto tu duda 😸
💚 Nunca pares de aprender 🤟
Cuando no sepas que pondrás al inicio, cuando tu variable este vacía.
en el primer ejemplo a pesar del error imprimió el valor 1, a pesar de ser nulo,
Sí porque ts interpreta en el compilador que el valor era uno.
usar null y undefined como tipos es algo nuevo.
Null
Null es un subtipo de Any, por lo que puedo asignarlo a cualquier tipo de variable
Sintaxis
// Explicito let nullVariable: null = null; // Inferido let otherVariable = null; // --> any otherVariable = 'test';
Tipo: Null y Undefined La Opcion —strictNullChecks
Undefined
Undefined es una variable sin ningun valor
Undefined es un subtipo de Any, por lo que puedo asignarlo a cualquier tipo de variable
Sintaxis:
// Explicito let undefinedVariable: undefined = undefined; // Inferido let otherUndefined = undefined; // --> any otherUndefined = 1;
No entiendo para que sirve strictNullChecks. TS por defecto no nos deja asignar undefined o null a una variable que no sea any, undefined o null. ¿Qué cambia si activamos esta opción?
Hola @Candela!
Buscando un poco encontré esto: Why you should enable strictNullChecks in TypeScript?
El propósito de strictNullChecks es ayudar a escribir un código más seguro. Lo logra señalando lugares donde podría estar olvidando que una variable es nula o indefinida. Imagina este pequeño ejemplo:
const appDiv: HTMLElement = document.getElementById('app'); appDiv.innerHTML = `<h2>TypeScript Starter</h2>`;
Y ahora que pasaría si no encontrara ningún elemento con el Id app, nos arrojaría un error, del que nos daríamos cuenta hasta el tiempo de ejecución, entonces esto nos ayudaría a encontrar este error en tiempo de compilación, ahorrándonos tiempo.
ㅤ
Una vez sabemos sobre este error, la manera de solucionarlo podría ser la siguiente:
const appDiv: HTMLElement | null = document.getElementById('app'); if (appDiv) { appDiv.innerHTML = `<h2>TypeScript Starter</h2>`; }
Tiene todo el sentido. Gran caso de uso. Muchísimas gracias Brand!!! <3
En cuál escenario serviría crear una variable de tipo null o undefined? En mi día a día, sí puede delcarar una variable como null, pero no me imagino ningún escenario donde pueda usar una variable de tipo null!
Hola, Jaime :) En JavaScript hay que tener en cuenta que Null no es lo mismo que Undefined. Undefined dice que una variable no tiene un valor asignado. Null es un valor (en JS es un objeto) y puede ser asignado, aunque simbolice "ningún valor".
Es útil tener estas opciones (además de su importancia en matemáticas y teoría de conjuntos que no voy a discutir porque no comprendo del todo :sweat_smile:...)
Por ejemplo, una pregunta SI o NO: ¿Vas a convertirte en emprendedor este año?
Otro caso es cuando queremos decir que algo no vale nada, usamos Null porque eso representa, 0 es un valor numérico,
aunque sea 0, pero representa un valor.
Y en programación de un nivel más bajo, es mejor inicializar las variables (que son punteros a memoria) con un valor o nulo, de lo contrario, podrían acceder a un espacio de memoria que no deberían y pasan cosas malas :swea
Gracias @daniordonez por responder, pero no leistes bien mi pregunta.
Mi pregunta era referente a la clase donde enseñaron que se puede crear una variable tipo null o tipo undefined let myObject : null. Yo sé que se puede asignar a una variable null o undefined let myObject2 : int = null, eso lo hago a diario. Pero es primera vez que veo que creen una variable null y quisiera saber para que serviria hacer eso?.
Si establezco "strict": true en tsconfig.json entonces
let otherUndefined = undefined //infiere any
Si establezco "strict": false en tsconfig.json entonces
let otherUndefined = undefined //infiere como undefined
undefined significa que se ha declarado una variable pero aún no se le ha asignado un valor null es un valor de asignación. Se puede asignar a una variable como una representación sin valor:
Tipo de dato Null y Undefined como subtipos
Subtipos que hay que evitar usar.
Lo raro de el tipo null, es que detecta el error, pero tsc genera un codigo el cual se ejecuta y muestra el ultimo valor asignado, en el ejemplo el no. 1. Lo comprome y me sale igual, incluso el tsc me lo reporta pero genera el codigo js, muy raro.
Excelente
Excede
