How to fix Type 'undefined' is not assignable to type 'string' in TypeScript

TypeScriptBEGINNERMEDIUMUpdated Dec 11, 2025· 126 views

This TypeScript error occurs when you try to assign a value that might be undefined to a variable expecting only a string type. It happens most often with optional properties, function parameters, or when strictNullChecks is enabled.

Quick fix

Fixes Type 'undefined' is not assignable to type 'string'

interface User {
  name?: string;
}

const user: User = { name: undefined };

// Error: Type 'string | undefined' is not assignable to type 'string'
const userName: string = user.name;

// Fixed: Provide default value
const userName: string = user.name ?? 'Guest';

// Works with environment variables
const apiKey: string = process.env.API_KEY ?? 'default-key';

// Works with array methods
const firstItem: string = items.find(x => x.active) ?? 'none';
  1. Use the nullish coalescing operator to provide a default value
  2. Add type guards to narrow the type before assignment
  3. Use the non-null assertion operator when you are certain the value exists
  4. Change the variable type to accept undefined
typescript — error
interface User {
  name?: string;
}
const user: User = { name: undefined };
// Error: Type 'string | undefined' is not assignable to type 'string'
const userName: string = user.name;
// Fixed: Provide default value
const userName: string = user.name ?? 'Guest';
// Works with environment variables
const apiKey: string = process.env.API_KEY ?? 'default-key';
// Works with array methods
const firstItem: string = items.find(x => x.active) ?? 'none';
Type 'undefined' is not assignable to type 'string'

What this error means

This error occurs when TypeScript's type system detects a type mismatch between a value that could be undefined and a variable or property that expects only a string type. TypeScript treats undefined as a distinct type, separate from string, and prevents potentially unsafe assignments. When strictNullChecks is enabled in your TypeScript configuration (which is part of strict mode), null and undefined are not automatically assignable to other types. This strict checking helps catch potential runtime errors where you might try to use a string method on an undefined value, which would cause a runtime exception. The error commonly appears when working with optional object properties, function parameters with default values, array methods like find() or shift() that can return undefined, or when accessing environment variables or configuration values that might not exist.

Typical symptoms

  • TypeScript compilation fails with error code TS2322
  • Error appears when assigning optional properties to required string variables
  • IDE shows red underlines on assignments involving potentially undefined values
  • Build process fails when strictNullChecks is enabled in tsconfig.json
  • Error occurs when using array methods like find(), shift(), or pop() without checking return value
  • Function calls fail type checking when passing optional parameters to required string parameters

Common causes

  1. Assigning an optional property (marked with ?) to a required string variable
  2. Using array methods that return undefined when no element is found (find, shift, pop)
  3. Accessing object properties that might not exist without checking first
  4. Function parameters with undefined default values being passed to functions expecting only strings
  5. Environment variables or configuration values accessed via process.env that might not be set
  6. TypeScript strictNullChecks compiler option is enabled, making undefined a separate type
  7. Destructuring objects with optional properties and assigning them to required string variables
  8. Using URLSearchParams.get() or Map.get() which return string | undefined

How to fix "Type 'undefined' is not assignable to type 'string'"

1Use the nullish coalescing operator to provide a default value

The nullish coalescing operator (??) provides a clean way to handle undefined values by falling back to a default:

typescript
interface User {
  name?: string;
}

const user: User = { name: undefined };

// Error: Type 'string | undefined' is not assignable to type 'string'
const userName: string = user.name;

// Fixed: Provide default value
const userName: string = user.name ?? 'Guest';

// Works with environment variables
const apiKey: string = process.env.API_KEY ?? 'default-key';

// Works with array methods
const firstItem: string = items.find(x => x.active) ?? 'none';

This approach is preferred when you have a sensible default value to use when the original value is undefined.

2Add type guards to narrow the type before assignment

Use conditional checks to verify the value is not undefined before using it:

typescript
interface Config {
  apiUrl?: string;
}

const config: Config = loadConfig();

// Option 1: If statement
if (config.apiUrl !== undefined) {
  const url: string = config.apiUrl; // TypeScript knows it's string here
  makeRequest(url);
}

// Option 2: Early return
if (!config.apiUrl) {
  throw new Error('API URL is required');
}
const url: string = config.apiUrl; // Safe after check

// Option 3: Ternary operator
const url: string = config.apiUrl !== undefined ? config.apiUrl : 'https://default.com';

Type guards are the safest approach as they force you to explicitly handle the undefined case.

3Use the non-null assertion operator when you are certain the value exists

If you're absolutely certain a value won't be undefined at runtime, use the non-null assertion operator (!):

typescript
interface User {
  name?: string;
}

// Use with caution - only when you're certain
const user: User = { name: 'Alice' };
const userName: string = user.name!; // Tells TypeScript to trust you

// Common with DOM elements
const element: HTMLElement = document.getElementById('myId')!;

// With array methods when you know the element exists
const activeItem: string = items.find(x => x.id === currentId)!;

Warning: This disables TypeScript's safety check. If the value is actually undefined at runtime, you'll get a runtime error. Only use this when you have external guarantees the value exists.

4Change the variable type to accept undefined

If the variable genuinely might be undefined, update its type to reflect that:

typescript
interface User {
  nickname?: string;
}

const user: User = { nickname: undefined };

// Instead of forcing it to string
// const name: string = user.nickname; // Error

// Accept that it might be undefined
const name: string | undefined = user.nickname; // OK

// Then handle both cases when using it
if (name !== undefined) {
  console.log(name.toUpperCase()); // Safe to use string methods
} else {
  console.log('No nickname set');
}

// Or use optional chaining
console.log(name?.toUpperCase());

This approach is most honest about the actual state of your data.

5Make the property required in the interface or type

If undefined should never be a valid value, remove the optional marker from the source type:

typescript
// Before: allows undefined
interface User {
  email?: string;
}

// After: email is required
interface User {
  email: string;
}

// Now TypeScript enforces that email must be provided
const user: User = {
  email: 'user@example.com' // Must provide this
};

const email: string = user.email; // No error

// For existing code, validate at creation time
function createUser(email: string | undefined): User {
  if (!email) {
    throw new Error('Email is required');
  }
  return { email }; // TypeScript knows email is string here
}

This prevents the problem at the source by making the data structure reflect your actual requirements.

6Use assertion functions for runtime validation

Create assertion functions to validate values and narrow types:

typescript
// Define an assertion function
function assertString(value: string | undefined, name: string): asserts value is string {
  if (value === undefined) {
    throw new Error(`${name} must be a string, got undefined`);
  }
}

interface Config {
  apiKey?: string;
}

const config: Config = loadConfig();

// Use the assertion
assertString(config.apiKey, 'API Key');

// After assertion, TypeScript knows apiKey is string
const apiKey: string = config.apiKey; // No error

// Reusable for multiple values
assertString(process.env.DATABASE_URL, 'DATABASE_URL');
const dbUrl: string = process.env.DATABASE_URL;

This approach combines runtime safety with compile-time type narrowing and provides clear error messages.

Advanced notes

Understanding strictNullChecks: This error only appears when strictNullChecks (or strict mode) is enabled in tsconfig.json. Without it, TypeScript treats undefined as assignable to any type, which can lead to runtime errors. The strict mode is highly recommended for production applications.

Optional chaining and this error: When using optional chaining (?."), remember that it returns undefined if any part of the chain is nullish. This can propagate undefined through your code: const name: string = user?.profile?.name will fail because the result might be undefined.

Array method return types: Methods like find(), shift(), pop(), and accessing array indices all return T | undefined. Always handle the undefined case or use the nullish coalescing operator.

Environment variables: In Node.js, process.env.VARIABLE_NAME always has type string | undefined because environment variables might not be set. Validate and provide defaults at application startup rather than at each usage site.

Difference from null: This error specifically deals with undefined. TypeScript treats null and undefined as separate types. If a value can be both null and undefined, use string | null | undefined or the string | nullish shorthand in TypeScript 4.4+.

Migration strategy: When enabling strictNullChecks on an existing codebase, you'll encounter many of these errors. Use the non-null assertion operator (!) as a temporary migration tool, but replace it with proper type guards or defaults as you refactor each area.

Frequently asked questions

What does "Type 'undefined' is not assignable to type 'string'" mean?
This error occurs when TypeScript's type system detects a type mismatch between a value that could be undefined and a variable or property that expects only a string type. TypeScript treats undefined as a distinct type, separate from string, and prevents potentially unsafe assignments. When strictNullChecks is enabled in your TypeScript configuration (which is part of strict mode), null and undefined are not automatically assignable to other types.
How do I fix "Type 'undefined' is not assignable to type 'string'"?
This TypeScript error occurs when you try to assign a value that might be undefined to a variable expecting only a string type. It happens most often with optional properties, function parameters, or when strictNullChecks is enabled.
What causes "Type 'undefined' is not assignable to type 'string'"?
Assigning an optional property (marked with ?) to a required string variable Using array methods that return undefined when no element is found (find, shift, pop) Accessing object properties that might not exist without checking first
Is the "Type 'undefined' is not assignable to type 'string'" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading