Typescript Default Types And Conditional Generics Complete Guide

Part 1: Understanding TypeScript Default Types

What are Default Types?

Default types allow you to specify a fallback type if no type is provided when a generic type is instantiated. This is especially useful in making your code more flexible with sensible defaults.

Example 1: Basic Generic Function with a Default Type

Let's start with a simple example where we have a generic function returning an array of the specified type. If no type is provided, it defaults to any.

function makeArray<T = any>(value: T, size: number): T[] {
  const result: T[] = [];
  for (let i = 0; i < size; i++) {
    result.push(value);
  }
  return result;
}

Using the Function:

// Using explicitly specified T
const numbers = makeArray<number>(5, 3); // [5, 5, 5]
const strings = makeArray<string>("hello", 2); // ["hello", "hello"]

// Using default T (any)
const anyValues = makeArray(5, 3); // [5, 5, 5] - TypeScript infers T as `number`
const otherAnyValues = makeArray("world", 2); // ["world", "world"] - TypeScript infers T as `string`
const mixedDefault = makeArray(true, 4); // [true, true, true, true] - TypeScript infers T as `boolean`

Example 2: Class with Default Type

Let's define a class that can store an item which defaults to string if no type is provided.

class Box<T = string> {
  value: T;

  constructor(value: T) {
    this.value = value;
  }

  log(): void {
    console.log(`Inside Box: ${this.value}`);
  }
}

// Using explicitly specified T
const numberBox = new Box<number>(42);
numberBox.log(); // Inside Box: 42

// Using default T (string)
const defaultBox = new Box("hello");
defaultBox.log(); // Inside Box: hello

const booleanBox = new Box<boolean>(false);
booleanBox.log(); // Inside Box: false

Part 2: Understanding TypeScript Conditional Generics

What are Conditional Generics?

Conditional generics are a powerful feature of TypeScript that allows types to be conditionally inferred based on some logic. They use the extends keyword and the ternary-like conditional operator to determine the resulting type.

Example 1: Simple Conditional Type

Suppose we want to create a type that returns true if a certain type extends another type, otherwise it returns false.

type IsString<T> = T extends string ? true : false;

type A = IsString<"hello">; // A will be true
type B = IsString<42>;      // B will be false
type C = IsString<string>;  // C will be true
type D = IsString<number>;  // D will be false

Example 2: Conditional Type to Extract Specific Properties

Here, we define a type that checks if each property of an object is a number or a non-number and creates a new type from these properties.

type NumberKeys<T> = {
  [K in keyof T]: T[K] extends number ? K : never;
}[keyof T];

interface User {
  name: string;
  age: number;
  height: number;
  email: string;
}

type NumericUserProps = NumberKeys<User>;      // 'age' | 'height'
type NonNumericUserProps = NumberKeys<{ [K in keyof User]: User[K] extends number ? never : K }>;      // 'name' | 'email'

console.log(NumericUserProps);     // 'age' | 'height'
console.log(NonNumericUserProps);  // 'name' | 'email'

Example 3: More Complex Conditional Type with Functions

We define a type called ReturnType<T> which conditionally extracts the return type of a function if the type parameter T actually is a function.

type ReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;

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

function add(x: number, y: number): number {
  return x + y;
}

type GreetReturn = ReturnType<typeof greet>;   // string
type AddReturn = ReturnType<typeof add>;       // number

const a: GreetReturn = "Hello, Alice!";  // Valid
const b: AddReturn = 8;                  // Valid

const c: GreetReturn = 1234;             // Error: Type 'number' is not assignable to type 'string'
const d: AddReturn = "World";            // Error: Type 'string' is not assignable to type 'number'

Example 4: Type Guard with Conditional Generics

A practical use case is creating a type guard that ensures a value is one of several possible types.

type CheckType<U, T> = U extends T ? U : never;

function checkType<T>(arg: unknown, checkFn: (x: any) => x is T): arg is T {
  return checkFn(arg);
}

function isNumber(arg: any): arg is number {
  return typeof arg === 'number';
}

let data: unknown = 123;

if (checkType<number>(data, isNumber)) {
  console.log("Data is a number:", data * 2);  // Valid - data is narrowed down to number
} else {
  console.log("Data is not a number");
}

Part 3: Combining Default Types and Conditional Generics

Example 1: Flexible Return Type Based on Parameter Presence

Let's create a function that optionally accepts a value and returns an array. If no value is provided, the return type should default to any. Otherwise, it uses conditional generics to infer the type.

function ensureArray<T = any>(value?: T): T extends undefined ? any[] : T[] {
  if (typeof value === 'undefined') {
    return [] as any[];
  }
  return Array.isArray(value) ? value : [value];
}

// Using default type (any[])
const noValueArray = ensureArray();
noValueArray.push(5);       // Valid
noValueArray.push("text");  // Valid

// Using inferred type (number[])
const numberArray = ensureArray(123);
numberArray.push(456);    // Valid
// numberArray.push("text"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

// Using inferred type (string[])
const stringArray = ensureArray("hello");
stringArray.push("world"); // Valid
// stringArray.push(123);   // Error: Argument of type 'number' is not assignable to parameter of type 'string'

Example 2: Mapping Object Properties Conditionally

This example defines a utility type that maps each property of an object to either its original type or null, depending on a condition.