TypeScript Function Overloading

Function Overloading allows defining multiple signatures for a function, and the compiler selects the correct implementation based on the types of arguments passed in.

SVG Diagram: Function Overloading Flow Background Title How Function Overloading Works Left Side Function Overloading Signatures (Declarations) // Signature 1 function add(a: number, b: number): number; // Signature 2 function add(a: string, b: string): string; Arrow (moves down to avoid obstruction) Compiler Matching (moves up) Compiler Match Right Side Function Implementation (actual code) function add(a: any, b: any): any { return a + b; } Must be compatible with all signatures Lower Section Type Inference at Call Time Example add(1, 2) → number add("a", "b") → string add(true, false) → any Arrow Definition

Basic Syntax

First declare multiple function signatures, then implement one unified function.

Example

// Function overload signatures
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
    return a + b;
}

console.log("Number addition: " + add(1, 2));
console.log("String addition: " + add("Hello, ", "World"));

Output:

数字相加: 3
字符串相加: Hello, World

Multiple Parameter Overloading

Different combinations of multiple parameters can be defined.

Example

// Multiple overload signatures
function greet(name: string): string;
function greet(name: string, greeting: string): string;

// Implementation
function greet(name: any, greeting?: any): any {
    if (greeting) {
        return greeting + ", " + name + "!";
    }
    return "Hello, " + name + "!";
}

console.log(greet("Alice"));
console.log(greet("Bob", "Hi"));

Output:

Hello, Alice!
Hi, Bob!

Method Overloading

Methods in classes can also use overloading.

Example

class Calculator {
    // Overload signatures
    add(a: number, b: number): number;
    add(a: string, b: string): string;
    add(a: number, b: string): string;
    add(a: any, b: any): any {
        return a + b;
    }
}

var calc = new Calculator();
console.log("Number: " + calc.add(1, 2));
console.log("String: " + calc.add("Hello", "World"));
console.log("Mixed: " + calc.add(5, " apples"));

Output:

数字: 3
字符串: HelloWorld
混合: 5 apples

Constructor Overloading

Constructors can also be overloaded.

Example

class User {
    name: string;
    age: number;

    // Constructor overloading
    constructor(name: string);
    constructor(name: string, age: number);
    constructor(name: any, age?: any) {
        this.name = name;
        this.age = age || 0;
    }
}

var user1 = new User("Alice");
var user2 = new User("Bob", 25);

console.log("User 1: " + JSON.stringify(user1));
console.log("User 2: " + JSON.stringify(user2));

Output:

用户1: {"name":"Alice","age":0}
用户2: {"name":"Bob","age":25}

Overloading and Union Types

Using overloading instead of union types provides more precise type inference.

Example

// Recommended: use overloading
function process(value: number): number;
function process(value: string): string;
function process(value: any): any {
    if (typeof value === "number") {
        return value * 2;
    }
    return value.toUpperCase();
}

// TypeScript knows the return type
var numResult: number = process(10);  // number
var strResult: string = process("hello");  // string

console.log("Number result: " + numResult);
console.log("String result: " + strResult);

Output:

数字结果: 20
字符串结果: HELLO

Notes

  • Overload signatures must be placed before the implementation signature
  • The implementation signature must be compatible with all overload signatures
  • Overload signatures are only type declarations and do not generate actual code

Summary

  • Function Overloading:Define multiple signatures, and the compiler selects the matching implementation
  • Method Overloading:Also applicable in classes
  • Constructor Overloading:Provides multiple initialization methods
  • Better than Union Types:More precise return types
Other Extensions