runtime.boot

Full Stack Systems
Production Mindset

CodeWithMihir

Engineering thoughtful products from interface to infrastructure.

CodeWithMihir

TypeScript Tutorial

TypeScript Optional and Default Parameters Explained

Learn optional and default parameters in TypeScript with examples, rules, function calls, undefined handling, and common mistakes.

Welcome back! I am Mihir, and in this lesson we will learn optional and default parameters in TypeScript.

These let you write functions where some arguments are not always required.


Optional Parameters

Use ? after the parameter name.

function greet(name?: string): string {
  if (name) {
    return `Hello, ${name}`;
  }

  return "Hello, guest";
}

Both calls are valid:

greet("Mihir");
greet();

name?: string means name can be string or undefined.


Optional Parameters Are Possibly Undefined

This is unsafe:

function greet(name?: string): string {
  return name.toUpperCase();
}

TypeScript warns because name might be undefined.

Correct:

function greet(name?: string): string {
  return name?.toUpperCase() ?? "GUEST";
}

Required Parameters Come First

Optional parameters should come after required parameters.

function createUser(name: string, role?: string): string {
  return `${name}: ${role ?? "user"}`;
}

This is easy to call:

createUser("Mihir");
createUser("Mihir", "admin");

Avoid putting optional parameters before required ones because function calls become confusing.


Default Parameters

Default parameters provide a fallback value.

function greet(name: string = "guest"): string {
  return `Hello, ${name}`;
}

These both work:

greet("Mihir");
greet();

When no argument is passed, name becomes "guest".


Default Parameters and Type Inference

TypeScript can infer the parameter type from the default value.

function setPageSize(size = 10): number {
  return size;
}

TypeScript infers size as number.

You can still write the type explicitly:

function setPageSize(size: number = 10): number {
  return size;
}

Passing undefined Uses the Default

Default values are used when the argument is undefined.

function formatName(name: string = "guest"): string {
  return name.toUpperCase();
}

formatName(undefined);

This returns:

GUEST

But null is different:

formatName(null);

With strict settings, TypeScript warns because null is not a string.


Optional vs Default Parameters

Optional parameter:

function greet(name?: string): string {
  return name ?? "guest";
}

Default parameter:

function greet(name: string = "guest"): string {
  return name;
}

Use a default parameter when you know the fallback value immediately.

Use an optional parameter when the function needs custom missing-value logic.


Optional Object Parameters

Optional parameters can be objects too.

type SearchOptions = {
  limit?: number;
  sortBy?: "newest" | "oldest";
};

function search(query: string, options?: SearchOptions): void {
  console.log(query);
  console.log(options?.limit ?? 10);
  console.log(options?.sortBy ?? "newest");
}

This gives callers flexibility while keeping the structure typed.


Default Object Parameters

type SearchOptions = {
  limit: number;
  sortBy: "newest" | "oldest";
};

function search(
  query: string,
  options: SearchOptions = { limit: 10, sortBy: "newest" }
): void {
  console.log(query, options.limit, options.sortBy);
}

This works when you want a full default object.


Common Mistake: Forgetting undefined

function printDiscount(code?: string): void {
  console.log(code.toUpperCase());
}

code might be undefined.

Correct:

function printDiscount(code?: string): void {
  if (code) {
    console.log(code.toUpperCase());
  }
}

Quick Reference Summary

ConceptExample
Optional parametername?: string
Default parametername = "guest"
Optional meansstring | undefined
Default on undefinedfn(undefined) uses default
Safe fallbackname ?? "guest"
Optional objectoptions?: SearchOptions

Practice

Create a function with optional and default values:

function createCourse(title: string, lessons: number = 10, category?: string): string {
  return `${title} has ${lessons} lessons in ${category ?? "general"}.`;
}

console.log(createCourse("TypeScript"));
console.log(createCourse("TypeScript", 20, "programming"));

Try using category.toUpperCase() without checking it.


What You've Learned

You now understand:

  • How optional parameters work
  • Why optional parameters may be undefined
  • How default parameters work
  • How TypeScript infers default parameter types
  • The difference between optional and default parameters
  • How to type optional object parameters
  • How to avoid unsafe access

What's Next?

In the next lesson, we will learn Rest Parameters in TypeScript.

We will type functions that accept any number of arguments.


Need Help?

  • Have questions, confusion, or want to know more? Contact me

Optional and default parameters make functions nicer to call, as long as missing values are handled clearly.