CursosEmpresasBlogLiveConfPrecios

null y undefined

Clase 12 de 32 • Curso de TypeScript 3

Clase anteriorSiguiente clase

Contenido del curso

Introducción a TypeScript

  • 1
    El lenguaje de programación TypeScript

    El lenguaje de programación TypeScript

    08:43 min
  • 2
    Instalación de herramientas para TypeScript

    Instalación de herramientas para TypeScript

    05:47 min
  • 3

    Instalación de herramientas en Windows

    01:05 min
  • 4
    Navegación y refactorización

    Navegación y refactorización

    04:37 min

Entorno de Desarrollo

  • 5
    El compilador de TypeScript

    El compilador de TypeScript

    08:00 min
  • 6
    El archivo de configuración de TypeScript

    El archivo de configuración de TypeScript

    07:22 min
  • 7
    Mi primer proyecto TypeScript

    Mi primer proyecto TypeScript

    05:09 min

Tipos en TypeScript

  • 8
    Tipado en TypeScript

    Tipado en TypeScript

    01:37 min
  • 9
    Number, Boolean y String

    Number, Boolean y String

    14:09 min
  • 10
    Any

    Any

    08:28 min
  • 11
    Void y never

    Void y never

    15:58 min
  • 12
    null y undefined

    null y undefined

    Viendo ahora
  • 13
    Object

    Object

    07:44 min
  • 14
    Array

    Array

    09:44 min
  • 15
    Tupla

    Tupla

    11:25 min
  • 16
    Enum

    Enum

    10:59 min
  • 17
    Unión de Tipos, Alias y Tipos Literales

    Unión de Tipos, Alias y Tipos Literales

    11:58 min
  • 18
    Aserciones de tipo

    Aserciones de tipo

    11:26 min
  • 19
    Funciones en TypeScript

    Funciones en TypeScript

    14:19 min
  • 20
    Resumen

    Resumen

    06:54 min

Tipos Personalizados

  • 21
    Interfaces

    Interfaces

    10:18 min
  • 22
    Interfaces: propiedades opcionales

    Interfaces: propiedades opcionales

    10:57 min
  • 23
    Extensión de interfaces

    Extensión de interfaces

    10:54 min
  • 24
    Clases

    Clases

    14:02 min
  • 25
    Clases públicas y privadas

    Clases públicas y privadas

    15:10 min
  • 26
    Métodos Get y Set

    Métodos Get y Set

    08:46 min
  • 27
    Herencia de clases y propiedades estáticas

    Herencia de clases y propiedades estáticas

    17:41 min
  • 28
    Resumen

    Resumen

    13:24 min

Módulos

  • 29
    Principios de responsabilidad única

    Principios de responsabilidad única

    15:03 min
  • 30
    Resolviendo módulos

    Resolviendo módulos

    10:04 min
  • 31
    Webpack y agrupación de Módulos

    Webpack y agrupación de Módulos

    14:02 min

Cierre

  • 32
    Cierre

    Cierre

    00:57 min
Tomar examen
    Boris Vargas Paucara

    Boris Vargas Paucara

    student•
    hace 6 años
    // ------------------ 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;
      Miguel Angel Martelo Quiroz

      Miguel Angel Martelo Quiroz

      student•
      hace 6 años

      Gracias Boris, reutilicé tus apuntes.

      Bairon Felipe peña castellanos

      Bairon Felipe peña castellanos

      student•
      hace 5 años

      Gracias, es buenisimo estas lineas de codigo. asi no se pierde tiempo escribiendo codigo y se enfoca mas en comprender el tema.

    Carlos Jesús Fernández Salazar

    Carlos Jesús Fernández Salazar

    student•
    hace 5 años

    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'}
      Jimmy Buriticá Londoño

      Jimmy Buriticá Londoño

      student•
      hace 4 años

      Muy buena opción, crear un objeto con las variables.

    Jose Daniel Barría Reyes

    Jose Daniel Barría Reyes

    student•
    hace 6 años

    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.

    Miguel Angel Reyes Moreno

    Miguel Angel Reyes Moreno

    student•
    hace 5 años

    null y undefined

    • En TypeScript, ambos "valores" tienen sus respectivos tipos:
      • null
      • undefined
    • Null y Undefined se pueden asumir como subtipos de los otros tipos de datos.
    • Significa que se pueden asignar null y undefied a una variable de tipo string, por ejemplo.

    Opción --strictNullChecks

    • Solo permite asignar null y undefined a una variable de tipo any o a sus respectivos
    • Ayua a evitar errores comunes en programación de apps en el ámbito JavaScript

    Generará un reporte de los errores que encuentre, hacemos tsc nombreDelArchivo.ts --strictNullChecks

      Cristian Mauricio Cavanzo Arias

      Cristian Mauricio Cavanzo Arias

      student•
      hace 4 años

      Muchas gracias por tu aporte

    Jhon Alexander Romero Gonzaga

    Jhon Alexander Romero Gonzaga

    student•
    hace 6 años

    Buena práctica: Tratar de evitar null y undefined en los projectos.

      Markoz Peña

      Markoz Peña

      student•
      hace 5 años

      Sip, pero muchas veces es complicado y mas cuando interactuas con APIs

      Moisés Manuel Morín Hevia

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      Oka, trataré de evitarlo (:

    Johan Garzon

    Johan Garzon

    student•
    hace 5 años

    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".

    Jeisson Santiago Cortes Ortiz

    Jeisson Santiago Cortes Ortiz

    student•
    hace 5 años

    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.

    Juan David Merchán Torres

    Juan David Merchán Torres

    student•
    hace 4 años

    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 🚀

    Federico Walovnik

    Federico Walovnik

    student•
    hace 5 años

    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.

      Fernando Quinteros Gutierrez

      Fernando Quinteros Gutierrez

      student•
      hace 5 años

      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 🤟

      Moisés Manuel Morín Hevia

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      Cuando no sepas que pondrás al inicio, cuando tu variable este vacía.

    Juan Diego Urbina Chuscano

    Juan Diego Urbina Chuscano

    student•
    hace 5 años

    en el primer ejemplo a pesar del error imprimió el valor 1, a pesar de ser nulo,

      Moisés Manuel Morín Hevia

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      Sí porque ts interpreta en el compilador que el valor era uno.

    Carlos Javier Bazan Huaman

    Carlos Javier Bazan Huaman

    student•
    hace 5 años

    usar null y undefined como tipos es algo nuevo.

    Federico Walovnik

    Federico Walovnik

    student•
    hace 5 años
    • Null

      • Null es la no existencia de la variable

      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

      • Solo permite asignar null y undefined a una variable de tipo any o sus tipos respectivos
      • Ayuda a evitar errores comunes en programación de apps en el ambito Javascript
    • 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;
    Bramucci Candela

    Bramucci Candela

    student•
    hace 4 años

    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?

      Brandon Argel Verdeja Domínguez

      Brandon Argel Verdeja Domínguez

      student•
      hace 4 años

      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>`; }
      Bramucci Candela

      Bramucci Candela

      student•
      hace 4 años

      Tiene todo el sentido. Gran caso de uso. Muchísimas gracias Brand!!! <3

    Jaime Ortiz

    Jaime Ortiz

    student•
    hace 5 años

    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!

      Daniel Adolfo Ordoñez Rubio

      Daniel Adolfo Ordoñez Rubio

      student•
      hace 5 años

      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?

      • Si (Boolean TRUE)
      • No (Boolean FALSE)
      • No sé, no me he decidido (Undefined)

      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

      Jaime Ortiz

      Jaime Ortiz

      student•
      hace 5 años

      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?.

    Jean León

    Jean León

    student•
    hace 4 años

    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
    Diego Fernando Caviedes Camaho

    Diego Fernando Caviedes Camaho

    student•
    hace 4 años

    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:

    Javi Felices

    Javi Felices

    student•
    hace 6 años

    Tipo de dato Null y Undefined como subtipos

      Moisés Manuel Morín Hevia

      Moisés Manuel Morín Hevia

      student•
      hace 5 años

      Subtipos que hay que evitar usar.

    Jorge Cruz Perez

    Jorge Cruz Perez

    student•
    hace 5 años

    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.

    Yolfry Bautista Reynoso

    Yolfry Bautista Reynoso

    student•
    hace 3 años

    Excelente

    Yolfry Bautista Reynoso

    Yolfry Bautista Reynoso

    student•
    hace 3 años

    Excede

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads