HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
TypeScript has a powerful system to deal with null or undefined values
null and undefined are primitive types and can be used like other types, such as string.
let value: string | undefined | null = null;
value = 'hello';
value = undefined;
When strictNullChecks is enabled, TypeScript requires values to be set
unless undefined is explicitly added to the type.
Optional Chaining is a JavaScript feature that works well with TypeScript's null handling.
It allows accessing properties on an object, that may or may not exist, with a compact syntax.
It can be used with the ?. operator when accessing properties.
interface House {
sqft: number;
yard?: {
sqft: number;
};
}
function printYardSize(house: House) {
const yardSize = house.yard?.sqft;
if (yardSize === undefined) {
console.log('No yard');
} else {
console.log(`Yard is ${yardSize} sqft`);
}
}
let home: House = {
sqft: 500
};
printYardSize(home); // Prints 'No yard'
Nullish Coalescence is another JavaScript feature that also works well with TypeScript's null handling.
It allows writing expressions that have a fallback specifically when dealing with null or undefined.
This is useful when other falsy values can occur in the expression but are still valid.
It can be used with the ?? operator in an expression, similar to using the && operator.
function printMileage(mileage: number | null | undefined) {
console.log(`Mileage: ${mileage ?? 'Not Available'}`);
}
printMileage(null); // Prints 'Mileage: Not Available'
printMileage(0); // Prints 'Mileage: 0'
TypeScript's inference system isn't perfect, there are times when it makes sense to ignore a value's
possibility of being null or undefined.
An easy way to do this is to use casting, but TypeScript also provides the ! operator as a convenient shortcut.
function getValue(): string | undefined {
return 'hello';
}
let value = getValue();
console.log('value length: ' + value!.length);
Just like casting, this can be unsafe and should be used with care.
Even with strictNullChecks enabled, by default TypeScript will assume array access will never return undefined (unless undefined is part of the array type).
The config noUncheckedIndexedAccess can be used to change this behavior.
let array: number[] = [1, 2, 3];
let value = array[0]; // with `noUncheckedIndexedAccess` this has the type `number | undefined`