TypeScript Strict Null

Absent is a type, not a surprise

In JavaScript, null and undefined can show up where you expected a string or a number. With strict (the mode StudyGrid uses), TypeScript does not let you assign them tostring or number unless you say so. That is strictNullChecks: missing values are not every type.

C++ memory mistakes are often a dangling pointer or a leak. TypeScript’s closest beginner analog is using a value that might be missing. The compiler asks you to check first. The program that runs has already dropped the types; the check is for you at compile time.

A union that includes null

Write string | null when a name might be missing. You cannot call toUpperCase until you narrow. An if that compares to null is enough. Inside the else (or after a return), tsc treats the value as string.

function label(name: string | null): string {
  if (name === null) {
    return "guest";
  }
  return name.toUpperCase();
}

console.log(label("Ada"));
console.log(label(null));

Output is ADA then guest. let who: string = null; does not compile under strict. That is the feature. If the value can be missing, put | null (or | undefined) on the type.

?? picks a fallback

The nullish coalescing operator ?? uses the right-hand value when the left is null orundefined. It does not treat 0 or "" as missing. That differs from||, which also replaces zeros and empty strings.

const nickname: string | undefined = undefined;
const tries: number | undefined = 0;
console.log(nickname ?? "anon");
console.log(tries ?? 3);
console.log(tries || 3);

First line anon. Second line 0 — zero is present, so ?? keeps it. Third line 3, because || treats 0 as false. Prefer ?? when0 is a real measurement.

?. stops before a missing property

Optional chaining ?. reads a property only if the value on the left is not null orundefined. Otherwise the whole expression is undefined. Pair it with ??when you want a printed fallback.

type Team = { city: string };
type Player = { name: string; team?: Team };

const ada: Player = { name: "Ada", team: { city: "London" } };
const kai: Player = { name: "Kai" };

console.log(ada.team?.city ?? "no team");
console.log(kai.team?.city ?? "no team");

Output is London then no team. kai.team.city without ?. does not compile: team might be undefined. The optional field is team? on the type.

null versus undefined

Pick one missing marker in a given API when you can. Mixing both works if you check with == null(that test catches both) or with ??. This tutorial writes the union out:string | null or string | undefined.

Do not silence the check

name! (the non-null assertion) tells tsc you are sure the value is present. If you are wrong, you get a runtime crash. Prefer an if, ??, or ?.. The type-assertions chapter later covers as for other cases; do not use it as a habit to hide null.

Check, then use

If a value might be missing, the type should say so. Narrow it before you call a method. Next on this track is a shelf of complete programs at TypeScript Examples, then the ternary operator for choosing one of two values.