Este error de compilación de TypeScript (TS18047) se reporta cuando intentas acceder a una propiedad o llamar a un método sobre un valor cuyo tipo incluye null. Las verificaciones estrictas de null de TypeScript (activadas por strictNullChecks o strict: true) requieren que manejes explícitamente el caso null antes de usar el valor.
Por qué ocurre
- •Los métodos de consulta del DOM como querySelector() devuelven Element | null, y el caso null no se maneja antes de acceder a las propiedades.
- •Un parámetro de función opcional o campo de objeto que puede ser null o undefined se usa sin una guardia.
- •Un valor de una API o base de datos que legítimamente puede ser null se accede directamente.
- •El tipo de retorno de una función es T | null y quien la llama no verifica null antes de usar el resultado.
Ejemplos
Código que causa el error
const input = document.querySelector<HTMLInputElement>("#email");
console.log(input.value);Error en la terminal
error TS18047: 'input' is possibly 'null'.
Cómo solucionarlo
Agrega una verificación explícita de null (if (valor !== null)) antes de acceder a propiedades. Usa optional chaining (?.) para un acceso seguro y conciso. Usa el operador de aserción no-null (!) solo cuando estés absolutamente seguro de que el valor no puede ser null en tiempo de ejecución, ya que omite la verificación de tipos. Activa strictNullChecks en tu tsconfig para detectar estos problemas rápidamente.
Código corregido
const input = document.querySelector<HTMLInputElement>("#email");
// Option 1: narrow with a null check
if (input !== null) {
console.log(input.value);
}
// Option 2: non-null assertion (only use when you are certain)
const value = input!.value;
// Option 3: optional chaining
console.log(input?.value);Errores relacionados
¿Listo para practicar tu inglés en el trabajo?
Lingua-e tiene ejercicios interactivos basados en conversaciones reales de developers: standups, code reviews, retrospectivas y más. Practica hasta que salga solo.
Prueba Lingua-e gratis