Default values for generic parameters

Basic Concepts of Generic Parameter Defaults

In TypeScript, generics allow us to create reusable components that can handle multiple types rather than a single type. Generic parameter defaults further enhance this flexibility by allowing us to specify default types for generics, which are used when no type parameters are explicitly provided.

interface Box<T = string> {
  value: T;
}

const stringBox: Box = { value: "hello" };  // T defaults to string
const numberBox: Box<number> = { value: 42 };

Why Generic Parameter Defaults Are Needed

The primary purpose of generic parameter defaults is to improve code readability and reduce redundancy. When a generic parameter is often a specific type, setting a default value avoids repetitive type specifications. This is particularly useful in large codebases, as it reduces boilerplate code and improves development efficiency.

// Without defaults
function fetchData<T>(url: string): Promise<T> {
  // ...
}

// Requires specifying the type each time
fetchData<User[]>('/api/users');

// With defaults
function fetchData<T = any>(url: string): Promise<T> {
  // ...
}

// Can omit the type parameter
fetchData('/api/users');  // T defaults to any

Syntax of Generic Parameter Defaults

The syntax for generic parameter defaults is similar to function parameter defaults, using an equals sign (=) to specify the default type. They can be used in generic types, interfaces, classes, and functions.

// Defaults in interfaces
interface Response<T = any> {
  data: T;
  status: number;
}

// Defaults in classes
class Container<T = string> {
  constructor(public value: T) {}
}

// Defaults in functions
function identity<T = number>(arg: T): T {
  return arg;
}

Multiple Generic Parameters with Defaults

When multiple generic parameters exist, each can have its own default value. Note that parameters with defaults must come after those without.

// Correct: Default parameters come last
function merge<A, B = A>(a: A, b: B): A & B {
  return { ...a, ...b };
}

// Incorrect: Default parameters come first
function merge<A = any, B>(a: A, b: B): A & B {  // Error
  return { ...a, ...b };
}

Combining Defaults with Constraints

Generic parameter defaults can be used alongside type constraints, offering greater flexibility. Constraints ensure type parameters meet certain conditions, while defaults provide fallback options.

interface Lengthwise {
  length: number;
}

function logLength<T extends Lengthwise = string>(arg: T): void {
  console.log(arg.length);
}

logLength("hello");  // Uses default string
logLength([1, 2, 3]);  // Explicitly inferred as number[]

Defaults in Complex Scenarios

In more complex type scenarios, generic defaults can significantly simplify type definitions. This is especially true for nested generics or higher-order types, where defaults reduce the need to pass type parameters.

type ApiResponse<Data = any, Error = string> = {
  success: boolean;
  data?: Data;
  error?: Error;
};

// Using partial defaults
const successResponse: ApiResponse<{ id: number }> = {
  success: true,
  data: { id: 1 }
};

// Using all defaults
const errorResponse: ApiResponse = {
  success: false,
  error: "Not found"
};

Combining with Conditional Types

Generic defaults can be combined with conditional types to create more flexible type definitions. This combination is particularly useful for scenarios where output types need to be dynamically determined based on input types.

type ValueOrArray<T = string> = T extends Array<any> ? T : T[];

// Defaults to handling strings
const strings: ValueOrArray = ["a", "b"];  // string[]

// Explicitly specifying types
const numbers: ValueOrArray<number> = [1, 2];  // number[]
const arrays: ValueOrArray<number[]> = [[1], [2]];  // number[][]

Application in React Components

In React + TypeScript development, generic defaults are commonly used in component prop type definitions, especially when components support multiple data types but most often use a specific type.

interface ListProps<T = string> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

// Defaults to handling string lists
function List<T = string>({ items, renderItem }: ListProps<T>) {
  return <div>{items.map(renderItem)}</div>;
}

// Using default type
<List items={["a", "b"]} renderItem={(item) => <div>{item}</div>} />

// Custom type
<List<number> items={[1, 2]} renderItem={(item) => <div>{item}</div>} />

Defaults in Utility Types

Generic defaults are widely used in TypeScript's built-in utility types and popular utility libraries to provide a better developer experience.

// Simulating Partial's implementation
type Partial<T = any> = {
  [P in keyof T]?: T[P];
};

// Using defaults
const partialObj: Partial = { name: "John" };  // Equivalent to Partial<any>

// Custom type
const partialUser: Partial<User> = { id: 1 };

Type Inference with Defaults

When using generic defaults, TypeScript's type inference system works intelligently. If no type parameter is provided, it uses the default; if partial parameters are provided, it infers the remaining ones where possible.

function createPair<First = string, Second = number>(first: First, second: Second): [First, Second] {
  return [first, second];
}

// Using all defaults
const pair1 = createPair("hello", 42);  // [string, number]

// Partially specifying types
const pair2 = createPair<boolean>("hello", 42);  // Error, first arg is not boolean
const pair3 = createPair<boolean>(true, 42);  // [boolean, number]

// Fully specifying types
const pair4 = createPair<number, string>(100, "test");  // [number, string]

Limitations and Considerations

While generic defaults are powerful, there are limitations and potential pitfalls to be aware of:

1. Order of defaults: Parameters with defaults must come after those without.
2. Type compatibility: Defaults must satisfy all type constraints (if any).
3. Type inference priority: Explicitly specified type parameters override defaults.
4. Complex defaults: Avoid overly complex default types, as they reduce code readability.

// Incorrect order
function example<T = any, U>(arg1: T, arg2: U) {}  // Error

// Correct order
function example<U, T = any>(arg1: T, arg2: U) {}  // Correct

Advanced Patterns: Recursive Defaults

In advanced scenarios, recursive type definitions can be used as defaults, enabling the creation of complex yet flexible type systems.

type TreeNode<T = string> = {
  value: T;
  left?: TreeNode<T>;
  right?: TreeNode<T>;
};

// Default string tree
const stringTree: TreeNode = {
  value: "root",
  left: { value: "left" },
  right: { value: "right" }
};

// Number tree
const numberTree: TreeNode<number> = {
  value: 1,
  left: { value: 2 },
  right: { value: 3 }
};

Comparison with Function Overloading

Generic defaults can sometimes replace function overloads, offering more concise type definitions. Each approach has pros and cons, and the choice depends on the specific use case.

// Using function overloading
function process(input: string): string;
function process(input: number): number;
function process(input: any): any {
  return input;
}

// Using generic defaults
function process<T = string>(input: T): T {
  return input;
}

// The generic default version is more concise, but overloading provides more precise type relationships

Performance Considerations

While generic defaults are processed at compile time and don't affect runtime performance, complex default types may increase type-checking time. For large projects, balance flexibility with compilation performance.

// Simple defaults have minimal performance impact
type Simple<T = string> = T;

// Complex defaults may increase type-checking time
type Complex<T = Record<string, Record<string, Record<string, any>>>> = T;

Comparison with Other Languages

TypeScript's generic defaults are similar to those in languages like C# and Java but have some syntactic and behavioral differences. Understanding these differences helps when transitioning from other languages to TypeScript.

// TypeScript
class Box<T = string> {}

// C#
class Box<T = string> {}  // Similar but with syntax differences

// Java does not support generic parameter defaults