Strict null checks and safety in Typescript - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

Output with strict null checks enabled

What is the output of this TypeScript code when strict null checks are enabled?

Typescript

function greet(name: string | null) {
  if (name === null) {
    return "Hello, guest!";
  }
  return `Hello, ${name.toUpperCase()}!`;
}

console.log(greet(null));
console.log(greet("alice"));

A TypeError at runtime

B Hello, null!\nHello, ALICE!

C Hello, guest!\nHello, alice!

D Hello, guest!\nHello, ALICE!

💡 Hint

Check how the function handles the null case before calling toUpperCase.

The function checks if name is null and returns a special greeting. Otherwise, it safely calls toUpperCase on the string. This avoids runtime errors with null values.

❓ Predict Output

intermediate

Value of variable after null assertion

What is the value of variable 'length' after running this code with strict null checks enabled?

Typescript

let maybeString: string | null = "hello";
let length = maybeString!.length;

A 5

B undefined

C TypeError at runtime

D Compilation error

💡 Hint

The exclamation mark tells TypeScript the value is not null here.

The null assertion operator (!) tells TypeScript to treat maybeString as non-null. Since it actually holds "hello", length is 5.

❓ Predict Output

advanced

Output of function with optional chaining and strict null checks

What is the output of this TypeScript code with strict null checks enabled?

Typescript

type User = { name: string; address?: { city: string } };

function getCity(user: User): string {
  return user.address?.city ?? "Unknown city";
}

console.log(getCity({ name: "Bob", address: { city: "Paris" } }));
console.log(getCity({ name: "Alice" }));

A TypeError at runtime

B Paris\nundefined

C Paris\nUnknown city

D Compilation error

💡 Hint

Optional chaining safely accesses nested properties that might be missing.

The optional chaining operator (?.) returns undefined if address is missing, so the nullish coalescing operator (??) returns "Unknown city" instead.

❓ Predict Output

advanced

Result of filtering null values with strict null checks

What is the output of this TypeScript code with strict null checks enabled?

Typescript

const values: (string | null)[] = ["a", null, "b", null, "c"];
const filtered = values.filter(v => v !== null);
console.log(filtered);

A [null, null]

B ["a", "b", "c"]

C ["a", null, "b", null, "c"]

D Compilation error due to type mismatch

💡 Hint

The filter removes all null values from the array.

The filter callback keeps only elements not equal to null, so the resulting array contains only strings.

🧠 Conceptual

expert

Why does this code cause a compilation error with strict null checks?

Consider this TypeScript code with strict null checks enabled: let input: string | null = null; let length: number = input.length; Why does this cause a compilation error?

A Because input might be null, and accessing length on null is unsafe

B Because length is not a valid property of string

C Because null is not allowed as a value for string type

D Because TypeScript does not allow variables to be assigned before declaration

💡 Hint

Think about what happens if input is null when accessing a property.

With strict null checks, TypeScript prevents accessing properties on values that might be null to avoid runtime errors.