Understanding Type 'string | undefined' Is Not Assignable to Type 'string' in TypeScript

By the end of this page, you will understand why optional properties in TypeScript become unions like string | undefined, why that cannot be assigned directly to a plain string, and how to fix it safely using checks, default values, optional chaining, nullish coalescing, and type assertions when appropriate.

In TypeScript, an optional property like:

name?: string;

means the property may or may not exist. Because of that, when you read it, TypeScript treats its type as:

string | undefined

That is a union type: the value could be a string, or it could be undefined.

A variable declared as plain string must always contain a real string value. Since undefined is a possible value for person.name, TypeScript prevents this assignment:

const name1: string = person.name;

This matters because TypeScript is trying to protect you from runtime bugs. If person.name is missing and your code assumes it is always a string, string operations like .toUpperCase() could fail.

This behavior is especially important when strictNullChecks is enabled, which is common in modern TypeScript projects. With strict null checking, null and are treated as separate types and must be handled deliberately.

Think of an optional property like a box that may be empty.

• string means: this box definitely contains a string.
• string | undefined means: this box might contain a string, or it might be empty.

TypeScript does not let you hand a possibly empty box to code that expects a guaranteed string.

You must do one of these:

• Check the box first
• Provide a fallback value
• Tell TypeScript you are certain it is not empty

That is exactly what the common solutions do.

Core idea

Optional properties use ?:

interface Person {
  name?: string;
}

Reading person.name gives:

string | undefined

Safe solution 1: check before using

interface Person {
  name?: string;
}

const person: Person = { name: "John" };

let name1: string;

if (person.name !== undefined) {
  name1 = person.name;
}

This works because inside the if block, TypeScript narrows the type from string | undefined to string.

Safe solution 2: provide a default value

Consider this example:

interface Person {
  name?: string;
}

const person: Person = {};
const name1: string = person.name ?? "Anonymous";
console.log(name1);

Step by step

1. Person defines name as optional.
2. That means reading person.name gives a value of type string | undefined.
3. person is created as an empty object, so name is missing.
4. person.name evaluates to undefined.
5. The nullish coalescing operator ?? checks whether the left side is null or undefined.
6. Because person.name is , TypeScript and JavaScript use the fallback value .

This pattern appears constantly in real TypeScript code.

API responses

An API may omit fields:

interface UserResponse {
  displayName?: string;
}

You often need:

const displayName = user.displayName ?? "Guest";

Form input

Some fields may be optional until the user fills them in.

interface SignupForm {
  email?: string;
}

Before submitting, you validate that required values exist.

Configuration objects

App settings often allow optional overrides:

interface Config {
  theme?: string;
}

const theme = config.theme ?? "light";

Database records

Some columns may be nullable or missing depending on the query or migration state.

UI rendering

In real projects, developers usually handle optional values with a few standard patterns.

Guard clauses

function printName(person: Person): void {
  if (!person.name) {
    console.log("Missing name");
    return;
  }

  console.log(person.name.toUpperCase());
}

This exits early if the value is missing.

Default values

const name = person.name ?? "Anonymous";

This is common in UI code, configuration loading, and API mapping.

Validation before use

function savePerson(person: Person): void {
  if (person.name === undefined) {
    throw new ();
  }

   normalized = person..();
  .(normalized);
}

Mistake 1: assuming optional means "usually there"

Optional means the property may be missing entirely.

interface Person {
  name?: string;
}

const person: Person = {};
console.log(person.name.toUpperCase()); // Runtime error

Fix

Check first or provide a default.

console.log((person.name ?? "Anonymous").toUpperCase());

Mistake 2: using type assertion to silence the error blindly

const name1: string = person.name as string;

This removes the error, but it does not make the value safe at runtime.

Fix

Use assertions only when you genuinely know the value exists.

Mistake 3: using || when is more correct

Optional property

interface Person {
  name?: string;
}

Reading name gives:

string | undefined

Why the error happens

const name1: string = person.name;

• person.name might be undefined
• string cannot contain undefined

Common fixes

1. Check first

if (person.name !== undefined) {
  const name1: string = person.name;
}

2. Use a fallback

Why does name?: string become string | undefined?

Because the property is optional, it may be missing. Reading a missing property gives undefined.

How do I assign an optional property to a string safely?

Use a check, a fallback value, or change the target variable type to string | undefined.

Should I use ! to fix this error?

Only if you are certain the value exists at runtime. It silences TypeScript but does not add safety.

What is the best default solution in most cases?

Using ?? is often the cleanest:

const name = person.name ?? "Anonymous";

What is the difference between ?? and || here?

?? only falls back for null or undefined. || also falls back for values like "", , and .

• Union types — Optional properties are read as unions like string | undefined.
• strictNullChecks — This compiler option makes null and undefined explicit and type-safe.
• Type narrowing — Checks like if (value !== undefined) let TypeScript narrow a union to a single type.
• Nullish coalescing — The ?? operator provides fallback values for null and undefined.
• Optional chaining — Useful when safely reading nested optional properties.
• Type assertions — as string can override TypeScript, but should be used carefully.
• Non-null assertion operator — The ! operator tells TypeScript a value is not null or undefined.
• Required vs optional properties — Choosing the right object shape avoids many type errors.