Functions and Signatures

🧑‍🏫 Sabse pehle — simple mein samjho#

Functions JavaScript ka dil hote hain, par JS mein functions bahut loose hote hain. Tum 2 arguments maangte ho aur log 5 bhej dete hain, ya string maangte ho array de dete hain. TS isko strictly control karta hai. Function likhte waqt humein exactly batana padta hai ki "Kya andar jayega" (Parameters) aur "Kya bahar aayega" (Return type).

Basic Typing#

// Named Function
function calculateTax(price: number, taxRate: number): number {
  return price * taxRate;
}

// Arrow Function
const calculateTaxArrow = (price: number, taxRate: number): number => {
  return price * taxRate;
};

Note: If a function doesn't return anything, its return type is void.

Optional and Default Parameters#

Optional Parameters (?)#

If passing an argument isn't mandatory, append a ? to it. Keep in mind that optional parameters must always come at the end of the parameter list.

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

greet("Tarun"); // ✅ 
greet("Tarun", "Rana"); // ✅

Default Parameters (=)#

You can provide a default value if no argument is passed. (TypeScript will infer the type based on the default value).

function sayHi(message = "Hi") { // TS knows this is a string
  console.log(message);
}
sayHi(); // Outputs "Hi"

Function Signatures (Type Aliases for Functions)#

If you need to assign a function's type to a variable or pass it as a prop (very common with React callbacks), you create a separate function signature.

// This is just a type definition, not the actual function.
type MathOperation = (a: number, b: number) => number;

// Using the type
const add: MathOperation = (x, y) => x + y;
const multiply: MathOperation = (x, y) => x * y;

Rest Parameters#

Use rest parameters when you don't know exactly how many arguments will be passed (it creates an array of arguments).

function sumAll(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

sumAll(1, 2, 3, 4); // ✅ Output: 10

Function Overloads (Advanced)#

Sometimes, a single function can accept different sets of arguments and return different types based on what was passed. This is where function overloads are used (multiple signatures mapped to one implementation).

// 1. Overload signatures (Only declarations, no body)
function getLength(value: string): number;
function getLength(value: any[]): number;

// 2. Implementation signature (The actual code, often using 'any' or 'unknown')
function getLength(value: any): number {
  return value.length;
}

// Usage
getLength("Hello"); // ✅
getLength([1, 2, 3]); // ✅
// getLength(123); // ❌ ERROR: TS checks the overloads and sees 'number' is not allowed

Overloads are mostly used by library authors. Most application developers (like React developers) prefer using Union types (e.g., string | any[]) instead of writing complex overloads.