Default parameters with types in Typescript - Deep Dive

Overview - Default parameters with types

What is it?

Default parameters with types in TypeScript allow you to give a function parameter a default value and specify the type of that parameter. This means if the caller does not provide a value, the function uses the default. It helps make functions safer and easier to use by combining type checking with fallback values.

Why it matters

Without default parameters with types, functions would require all arguments every time or risk errors from missing values or wrong types. This feature prevents bugs and makes code clearer and more reliable, especially in large projects where functions are called many times with varying inputs.

Where it fits

Before learning this, you should understand basic TypeScript types and function syntax. After this, you can explore advanced function features like rest parameters, function overloads, and generics.

Mental Model

Core Idea

A default typed parameter is like a safety net that ensures a function always has a correctly typed value to work with, even if the caller skips it.

Think of it like...

Imagine ordering coffee and the barista asks for your preferred milk type. If you don't say anything, they automatically use regular milk. The milk type is like a parameter with a default value, and specifying it clearly is like typing it to avoid surprises.

function example(param: Type = defaultValue) {
  // function body
}

┌───────────────┐
│ param: Type   │  <-- parameter with type
│ = defaultValue│  <-- default value if none given
└───────────────┘

Build-Up - 6 Steps

1

Foundation

Basic function parameters in TypeScript

Concept: Functions can have parameters with specified types to ensure correct input.

function greet(name: string) { console.log(`Hello, ${name}!`); } greet('Alice'); // Works // greet(42); // Error: Argument of type 'number' is not assignable to parameter of type 'string'.

Result

The function prints 'Hello, Alice!' and TypeScript prevents wrong types at compile time.

Understanding typed parameters is the foundation for safer functions that catch errors early.

2

Foundation

Default values for function parameters

Concept: You can assign default values to parameters so the function uses them if no argument is passed.

function greet(name = 'Guest') { console.log(`Hello, ${name}!`); } greet(); // Prints 'Hello, Guest!' greet('Bob'); // Prints 'Hello, Bob!'

Result

The function works even if no argument is given, using the default 'Guest'.

Default values make functions flexible and reduce the need for callers to always provide arguments.

3

Intermediate

Combining types with default parameters

🤔Before reading on: do you think TypeScript infers the type of a default parameter automatically or do you always need to specify it explicitly? Commit to your answer.

Concept: TypeScript can infer the type of a parameter from its default value, but you can also explicitly declare the type for clarity or stricter checks.

function greet(name: string = 'Guest') { console.log(`Hello, ${name}!`); } // TypeScript knows 'name' is a string because of the type annotation. function add(x = 5, y = 10) { return x + y; } // Here, TypeScript infers x and y as numbers from the default values.

Result

Functions have parameters with types either inferred or explicitly declared, combined with default values.

Knowing when TypeScript infers types versus when to specify them helps write clearer and more maintainable code.

4

Intermediate

Default parameters with complex types

🤔Before reading on: can default parameters be objects or arrays with types? Commit to your answer.

Concept: Default parameters can be complex types like objects or arrays, and you can specify their types to ensure structure and safety.

function configure(options: { verbose: boolean; debug: boolean } = { verbose: false, debug: false }) { console.log(options); } configure(); // Uses default object configure({ verbose: true, debug: false }); // Uses provided object

Result

The function safely handles missing or provided complex parameter values with type checks.

Typing complex default parameters prevents runtime errors from unexpected shapes or missing properties.

5

Advanced

Interaction with optional parameters and undefined

🤔Before reading on: does a default parameter make a parameter optional or required? Commit to your answer.

Concept: Parameters with default values are treated as optional, but their type does not include undefined unless explicitly stated.

function greet(name: string = 'Guest') { console.log(`Hello, ${name}!`); } // greet(); // OK, uses default // greet(undefined); // OK, uses default // greet(null); // Error if strict null checks are on function greetOptional(name?: string) { console.log(`Hello, ${name ?? 'Guest'}!`); } // Here, name can be undefined explicitly.

Result

Default parameters simplify optional arguments but differ subtly from optional parameters with '?' syntax.

Understanding this difference avoids confusion about when undefined is allowed and how defaults behave.

6

Expert

Type widening and literal types with defaults

🤔Before reading on: does TypeScript keep a default string parameter as a literal type or widen it to string? Commit to your answer.

Concept: TypeScript widens default parameter types unless you use const assertions or explicit literal types to keep exact values.

function greet(name = 'Guest') { // name is type string, not 'Guest' } function greetLiteral(name: 'Guest' = 'Guest') { // name is type 'Guest' } const greetConst = (name = 'Guest' as const) => { // name is type 'Guest' };

Result

Default parameters can have precise literal types or widened general types depending on declaration.

Knowing how TypeScript widens types helps control function behavior and overload resolution in complex code.

Under the Hood

When a function with default parameters is called, TypeScript compiles the code to JavaScript that checks if the argument is undefined. If so, it assigns the default value. The type annotations are erased at runtime but used during compilation to check correctness. This means default values provide runtime fallback, while types provide compile-time safety.

Why designed this way?

TypeScript was designed to add static typing on top of JavaScript without changing runtime behavior. Default parameters existed in JavaScript ES6, so TypeScript leverages them and adds type checks. This design keeps compatibility and developer productivity high.

Call with args
   │
   ▼
┌─────────────────────────────┐
│ Function with default params │
│  param: Type = defaultValue │
└─────────────┬───────────────┘
              │
      Is argument undefined?
              │ Yes
              ▼
     Use defaultValue
              │ No
              ▼
     Use provided argument
              │
              ▼
   TypeScript checks type
              │
              ▼
      Run function body

Myth Busters - 3 Common Misconceptions

Quick: Does a default parameter mean the parameter type includes undefined? Commit to yes or no.

Common Belief: A parameter with a default value automatically includes undefined in its type.

Reality: The parameter's type does not include undefined unless explicitly declared; the default value is used only when the argument is omitted or undefined is passed.

Why it matters: Assuming undefined is part of the type can lead to unnecessary checks or incorrect assumptions about what values the function can receive.

Quick: Can you omit a parameter with a default value and still get a type error? Commit to yes or no.

Common Belief: If a parameter has a default value, you can never get a type error by omitting it.

Reality: You can get type errors if the default value does not match the declared type or if you pass a wrong type explicitly.

Why it matters: Ignoring this can cause runtime bugs or confusion when the function behaves unexpectedly due to type mismatches.

Quick: Does TypeScript keep the exact literal type of a default string parameter? Commit to yes or no.

Common Belief: TypeScript always keeps the exact literal type of default parameters.

Reality: TypeScript widens default parameter types to general types like string unless you explicitly specify literal types or use const assertions.

Why it matters: This affects function overloads and type narrowing, so misunderstanding it can cause subtle bugs.

Expert Zone

1

Default parameters are evaluated at call time, so if the default is a function call or expression, it runs each time the function is called without that argument.

2

When combining default parameters with destructured objects, you can provide defaults for nested properties, but type annotations become more complex.

3

Using default parameters affects function length property (number of expected arguments), which can impact reflection or libraries relying on function arity.

When NOT to use

Avoid default parameters when you need to distinguish between undefined and missing arguments explicitly. In such cases, use optional parameters with '?' and handle undefined inside the function. Also, avoid complex default expressions that have side effects or heavy computation.

Production Patterns

In real-world TypeScript projects, default parameters with types are used to simplify API functions, provide backward compatibility, and reduce boilerplate checks. They are combined with strict null checks and linting rules to ensure consistent and safe usage.

Connections

Optional parameters

Related concept that also deals with parameters that may be missing

Understanding default parameters clarifies how optional parameters differ in type behavior and runtime handling.

Function overloading

Builds on default parameters to create multiple function signatures with different parameter sets

Knowing default parameters helps manage overloads by providing fallback values and reducing the number of overload signatures.

Default arguments in mathematics

Similar pattern of providing fallback values when inputs are missing

Recognizing this pattern across domains shows how defaults simplify problem-solving by reducing required inputs.

Common Pitfalls

#1 Assuming default parameters include undefined in their type automatically.

Wrong approach:

function greet(name: string = 'Guest') {
if (name === undefined) {
console.log('No name');
}
console.log(`Hello, ${name}!`);
}

Correct approach:

function greet(name: string = 'Guest') {
// No need to check undefined because default handles it
console.log(`Hello, ${name}!`);
}

Root cause:

Misunderstanding that default parameters handle undefined internally and that the type does not include undefined.

#2 Passing null to a parameter with a default value expecting a string.

Wrong approach:

greet(null); // Causes runtime error or unexpected output

Correct approach:

greet(); // Uses default 'Guest'
greet('Alice'); // Uses provided string

Root cause:

Confusing null with undefined; default parameters only replace undefined, not null.

#3 Using complex expressions with side effects as default values without realizing they run every call.

Wrong approach:

function logTime(time = Date.now()) {
console.log(time);
}

logTime();
logTime();

Correct approach:

const fixedTime = Date.now();
function logTime(time = fixedTime) {
console.log(time);
}

logTime();
logTime();

Root cause:

Not realizing default values are evaluated at each call, causing unexpected repeated side effects.

Key Takeaways

Default parameters with types combine fallback values and type safety to make functions easier and safer to use.

TypeScript can infer parameter types from default values but explicit types improve clarity and prevent errors.

Default parameters are treated as optional but differ from optional parameters in how undefined is handled.

Understanding type widening with default parameters helps control function behavior and avoid subtle bugs.

Default values are evaluated at call time, so avoid heavy or side-effect expressions as defaults.