Uso de Null y Undefined en TypeScript

En TypeScript, tanto null como undefined representan valores ausentes o no definidos. Sin embargo, aunque en ciertos aspectos parecen similares, tienen significados y usos distintos.

Uso de undefined

Declaración e Inicialización

Cuando una variable se declara pero no se inicializa, su valor es undefined.

let miVariable: string;
console.log(miVariable); // Output: undefined

Funciones que no retornan valores

Las funciones que no tienen una declaración de retorno explícita retornan undefined por defecto.

function saludar(): void {
    console.log("Hola");
}

const resultado = saludar();
console.log(resultado); // Output: undefined

Parámetros de funciones

Si no se pasa un argumento a una función, el valor del parámetro será undefined.

function imprimirMensaje(mensaje: string) {
    console.log(mensaje);
}

imprimirMensaje(); // Error: se esperaba 1 argumento, pero se obtuvo 0

Propiedades de objetos

Las propiedades de los objetos que no se definen explícitamente son undefined.

const persona = {
    nombre: "Luis"
};

console.log(persona.edad); // Output: undefined

Uso de null

Asignación de null

null debe ser asignado explícitamente a una variable.

let miVariable: string | null = null;
console.log(miVariable); // Output: null

Inicialización explícita

Se puede utilizar null para inicializar variables que se espera que tengan un valor en el futuro.

let resultado: number | null = null;
// Código que asignará un valor a resultado
resultado = 42;
console.log(resultado); // Output: 42

Configuración strict null checks

Cuando strictNullChecks está habilitado en TypeScript, null y undefined no son subtipos de todos los demás tipos.

Esto significa que una variable de tipo string no puede contener null o undefined a menos que se especifique explícitamente.

// tsconfig.json
{
    "compilerOptions": {
        "strictNullChecks": true
    }
}

Definición de tipos

Se pueden definir tipos que incluyan null y undefined.

let nombre: string | null = "Luis";
nombre = null;

let edad: number | undefined;
edad = 25;
edad = undefined;

Operaciones comunes con null y undefined

Operador de coalescencia nula

El operador de coalescencia nula (??) permite proporcionar un valor por defecto cuando una variable es null o undefined.

let valor: string | null = null;
let mensaje = valor ?? "Valor por defecto";
console.log(mensaje); // Output: Valor por defecto

Operador opcional de encadenamiento

El operador opcional de encadenamiento (?.) permite acceder a propiedades de objetos que pueden ser null o undefined.

const persona = {
    nombre: "Luis",
    direccion: {
        ciudad: "Madrid"
    }
};

console.log(persona.direccion?.ciudad); // Output: Madrid
console.log(persona.contacto?.telefono); // Output: undefined