JV
TS

Java to TypeScript

10 lessons

Progress0%
1Introduction to TypeScript2Type Systems3Classes & OOP4Generics5Modules & Packages6Null Safety7Async vs Threads8Ecosystem9Advanced TypeScript Types10Build Tooling
All Mirror Courses
JV
TS
Null Safety
MirrorLesson 6 of 10
Lesson 6

Null Safety

Null Safety

Introduction

In this lesson, you'll learn about null safety in TypeScript. Coming from Java, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card
JV
From Java:

In Java, you're familiar with null safety.

TS
In TypeScript:

TypeScript has its own approach to null safety, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TS
TypeScript Example
// TypeScript - optional chaining + nullish coalescing
function getString(): string | null { return null; }

const maybeStr: string | null = getString();

// Optional chaining (?.) — short-circuits on null/undefined
const upper = maybeStr?.toUpperCase(); // string | undefined

// Nullish coalescing (??) — fallback for null/undefined
const result = maybeStr?.toUpperCase() ?? "DEFAULT";

// Strict null checks (tsconfig: "strict": true)
// Without it, null can be assigned to anything — enable it!

Comparing to Java

Here's how you might have written similar code in Java:

JV
Java (What you know)
// Java - Optional to avoid NullPointerException
import java.util.Optional;

Optional<String> maybeStr = Optional.ofNullable(getString());

String result = maybeStr
    .map(String::toUpperCase)
    .filter(s -> s.length() > 3)
    .orElse("DEFAULT");

// Without Optional — danger zone
String s = getString(); // might be null!
int len = s.length();   // NullPointerException!
Mirror Card
JV
From Java:

You may be used to different syntax or behavior.

TS
In TypeScript:

Java's NullPointerException is infamous; TypeScript's optional chaining (?.) is a built-in language feature

Mirror Card
JV
From Java:

You may be used to different syntax or behavior.

TS
In TypeScript:

TypeScript union types (string | null) express nullability directly in the type; Java uses Optional<T>

Mirror Card
JV
From Java:

You may be used to different syntax or behavior.

TS
In TypeScript:

Optional chaining (?.) is shorter and more readable than Java's Optional.map()

Mirror Card
JV
From Java:

You may be used to different syntax or behavior.

TS
In TypeScript:

Nullish coalescing (??) is TypeScript's equivalent of Optional.orElse()

Mirror Card
JV
From Java:

You may be used to different syntax or behavior.

TS
In TypeScript:

TypeScript's strict mode enables strict null checks, preventing null/undefined from being assigned to non-nullable types

Step-by-Step Breakdown

1. Optional Chaining

The ?. operator short-circuits and returns undefined if the left side is null or undefined, instead of throwing.

JV
Java
// Java
if (user != null && user.getAddress() != null) {
    String city = user.getAddress().getCity();
}
TS
TypeScript
// TypeScript
const city = user?.address?.city; // string | undefined

// Works for method calls too:
const upper = str?.toUpperCase();

// And array access:
const first = arr?.[0];
Rule of Thumb
Replace null-check chains with optional chaining. Fewer lines, same safety.

2. Nullish Coalescing

The ?? operator returns the right side only when the left is null or undefined — not for other falsy values like 0 or ''.

JV
Java
String name = Optional.ofNullable(input).orElse("Anonymous");
TS
TypeScript
const name = input ?? "Anonymous";

// ?? vs || difference:
const count1 = 0 || 10;  // 10 — || treats 0 as falsy
const count2 = 0 ?? 10;  // 0  — ?? only triggers for null/undefined
Common Pitfall
Don't use || as a fallback when 0 or empty string are valid values. Use ?? instead.

3. Non-Null Assertion

The ! postfix operator tells TypeScript you're certain a value is not null. Use sparingly.

TS
TypeScript
// You know it's not null, TypeScript doesn't
const canvas = document.getElementById("myCanvas")!;
// Without ! TypeScript would say: HTMLElement | null

// Better alternative: check first
const el = document.getElementById("myCanvas");
if (el === null) throw new Error("Canvas not found");
el.style.display = "block"; // now TypeScript knows it's not null
Common Pitfall
The ! operator is a lie to the compiler. Prefer explicit null checks so you get actual runtime safety.

4. Strict Null Checks

Enable strict mode in tsconfig.json so TypeScript catches null/undefined errors at compile time.

TS
TypeScript
// tsconfig.json
{ "compilerOptions": { "strict": true } }

// With strict on:
let name: string = null; // ERROR — null not assignable to string

// Must use union type:
let name: string | null = null; // OK

// Now TypeScript forces you to handle null:
function greet(name: string | null): string {
    return `Hello, ${name ?? "stranger"}!`;
}

Common Mistakes

When coming from Java, developers often make these mistakes:

  • Java's NullPointerException is infamous; TypeScript's optional chaining (?.) is a built-in language feature
  • TypeScript union types (string | null) express nullability directly in the type; Java uses Optional<T>
  • Optional chaining (?.) is shorter and more readable than Java's Optional.map()
Common Pitfall
Don't assume TypeScript works exactly like Java. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

  • Optional chaining (?.) replaces verbose null-check chains
  • Nullish coalescing (??) is cleaner than Optional.orElse() for fallback values
  • Union types (string | null) express nullability in the type system
  • Enable strict mode in tsconfig.json to get compile-time null safety
Rule of Thumb
The best way to learn is by doing. Try rewriting some of your Java code in TypeScript to practice these concepts.
PreviousNext