03. Functions in TypeScript

What we will learn in this post?

• 👉 Typed Functions in TypeScript
• 👉 Optional and Default Parameters
• 👉 Rest Parameters and Spread Operator
• 👉 Function Overloading
• 👉 Generic Functions
• 👉 Arrow Functions and This Context
• 👉 Function Types and Callbacks

Typed Functions in TypeScript 🎯

What are Typed Functions? 🤔

In TypeScript, you can specify types for function parameters and return values. This helps catch errors early and makes your code more predictable.

Basic Function Syntax 📝

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

const result = greet("Alice"); // result is a string

Parameter Types 📌

You must specify the type for each parameter:

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

Return Types 🔙

The return type comes after the parameters:

function isAdult(age: number): boolean {
  return age >= 18;
}

Void Functions 🚫

Functions that don’t return anything use void:

function logMessage(message: string): void {
  console.log(message);
}

🔗 More Info:

• TypeScript Handbook: Functions

Optional and Default Parameters 🎨

Optional Parameters ❓

Mark parameters as optional using ?. Optional parameters can be undefined:

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

console.log(buildName("John")); // "John"
console.log(buildName("John", "Doe")); // "John Doe"

Default Parameters 🎯

Provide default values for parameters:

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

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

Key Rules 📋

• Optional parameters must come after required parameters
• Default parameters don’t need to be at the end
• Optional parameters are automatically undefined if not provided

graph LR
    A["🎯 Function Call"]:::style1 --> B{"❓ Has Optional Param?"}:::style3
    B -- "Yes" --> C["✅ Use Provided Value"]:::style4
    B -- "No" --> D{"🔍 Has Default Value?"}:::style3
    D -- "Yes" --> E["⚙️ Use Default"]:::style2
    D -- "No" --> F["❌ undefined"]:::style5

    classDef style1 fill:#ff4f81,stroke:#c43e3e,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style2 fill:#6b5bff,stroke:#4a3f6b,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style3 fill:#ffd700,stroke:#d99120,color:#222,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style4 fill:#00bfae,stroke:#005f99,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style5 fill:#ff9800,stroke:#f57c00,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;

    linkStyle default stroke:#e67e22,stroke-width:3px;

✨ Flexible Functions with Rest & Spread!

Let’s make our TypeScript functions super versatile! We’ll look at two powerful tools for handling arguments: Rest Parameters and the Spread Operator.

📦 Rest Parameters: Gathering Arguments

Ever wanted a function to accept any number of arguments? That’s where Rest Parameters (...args: Type[]) come in! They let you collect multiple, individual inputs into a single array inside your function. Think of it as a “collector”!

• Type Safety: ...items: string[] means items will be an array of strings, giving you strong type checks.
• Placement: A rest parameter must always be the very last parameter.

function combineWords(separator: string, ...words: string[]): string {
  // 'words' is an array here, like ["hello", "world"]
  return words.join(separator);
}
console.log(combineWords("-", "apple", "banana", "cherry"));
// Output: "apple-banana-cherry"

✨ Spread Operator: Spreading Arguments

The Spread Operator (...array) does the opposite! It takes an array and “unpacks” its elements, spreading them out as individual arguments. Think of it as an “unpacker” for when a function expects separate values.

const fruitsToAdd = ["grape", "kiwi"];
console.log(combineWords(" + ", "orange", ...fruitsToAdd, "melon"));
// ...fruitsToAdd unpacks to "grape", "kiwi" as separate arguments.
// Output: "orange + grape + kiwi + melon"

👍 Why Are They So Cool?

They make your functions incredibly flexible and cleaner! Rest parameters handle varied input effortlessly, while the spread operator simplifies passing array elements where individual arguments are expected.

💡 Real-World Example: Logger Function

// Production-ready logger with rest parameters
function log(level: string, timestamp: Date, ...messages: string[]): void {
  const formattedTime = timestamp.toISOString();
  console.log(`[${level}] ${formattedTime}:`, ...messages);
}

// Usage in web application
log("ERROR", new Date(), "Database connection failed", "Retrying...");
log("INFO", new Date(), "User logged in", "Session started");

graph TD
    A["📞 Function Call"]:::style1 -->|"...args (Rest)"| B["📦 Array inside Function"]:::style4
    C["📚 Array"]:::style2 -->|"...array (Spread)"| D["⚡ Individual Arguments"]:::style5

    classDef style1 fill:#ff4f81,stroke:#c43e3e,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style2 fill:#6b5bff,stroke:#4a3f6b,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style4 fill:#00bfae,stroke:#005f99,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style5 fill:#ff9800,stroke:#f57c00,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;

    linkStyle default stroke:#e67e22,stroke-width:3px;

Function Overloading 🔄

What is Function Overloading? 🤔

Function overloading lets you define multiple signatures for the same function. The function can accept different parameter types or counts.

Basic Syntax 📝

// Overload signatures
function combine(a: string, b: string): string;
function combine(a: number, b: number): number;

// Implementation signature
function combine(a: any, b: any): any {
  return a + b;
}

console.log(combine("Hello", " World")); // "Hello World"
console.log(combine(10, 20)); // 30

Why Use Overloading? 💡

• Better type safety for different input combinations
• Clearer function documentation
• IDE provides better autocomplete

Key Points 🎯

• Write overload signatures first
• Implementation signature must be compatible with all overloads
• The implementation signature is not directly callable

graph TD
    A["🎯 Function Call"]:::style1 --> B{"🔍 Check Overload 1"}:::style3
    B -- "✅ Match" --> C["📋 Use Overload 1 Types"]:::style4
    B -- "❌ No Match" --> D{"🔍 Check Overload 2"}:::style3
    D -- "✅ Match" --> E["📋 Use Overload 2 Types"]:::style4
    D -- "❌ No Match" --> F["⚠️ Type Error"]:::style5
    C --> G["⚙️ Run Implementation"]:::style2
    E --> G

    classDef style1 fill:#ff4f81,stroke:#c43e3e,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style2 fill:#6b5bff,stroke:#4a3f6b,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style3 fill:#ffd700,stroke:#d99120,color:#222,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style4 fill:#00bfae,stroke:#005f99,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style5 fill:#ff9800,stroke:#f57c00,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;

    linkStyle default stroke:#e67e22,stroke-width:3px;

Understanding Generic Functions 🚀

Generics are fantastic tools that let you write incredibly flexible and reusable functions! Imagine creating a single function that can gracefully handle any type of data – be it numbers, strings, or even complex objects – without you needing to write a separate, specialized version for each. That’s the magic of generics!

Why Generics are Awesome! 🤔

They help you build type-safe code that is also highly reusable. Instead of duplicating logic for different data types, generics provide one robust, clear solution, making your code cleaner and less error-prone.

The Magic of <T> ✨

The <T> you see in a function definition is a type parameter. Think of T as a clever placeholder for any type that will be passed into the function when it’s called.

• Practical Example: The Identity Function

  function identity<T>(arg: T): T {
    return arg;
  }
  

  Here, identity simply returns whatever you give it.

  • If you call identity(123), T becomes number, and it returns a number.
  • If you call identity("hello"), T becomes string, and it returns a string. It perfectly maintains the original type!

Smarter Generics with Constraints 🔗

Sometimes, T might need to have certain characteristics (e.g., it must be an object with a length property). Generic constraints (like T extends { length: number }) let you specify these requirements, ensuring type safety while maintaining flexibility.

Beyond One Type: Multiple Parameters 🤝

You can use multiple type parameters, such as <T, U>, when your function needs to work with several different, possibly related, types simultaneously. For instance, a generic function that processes two different types of inputs.

Preserving Type Information 🛡️

Generics truly shine by preserving type information. They tell TypeScript exactly what type is expected, allowing it to catch potential errors during development, rather than having issues pop up at runtime. This is significantly safer than using any!

graph TD
    A["🎯 Call Generic Function"]:::style1 --> B["📥 Input Data (Type: X)"]:::style4
    B --> C["⚙️ Generic Function<T>"]:::style2
    C --> D["🔄 T takes on Type X"]:::style3
    D --> E["💡 Function Logic"]:::style2
    E --> F["📤 Output Data (Type: X)"]:::style4

    classDef style1 fill:#ff4f81,stroke:#c43e3e,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style2 fill:#6b5bff,stroke:#4a3f6b,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style3 fill:#ffd700,stroke:#d99120,color:#222,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style4 fill:#00bfae,stroke:#005f99,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;

    linkStyle default stroke:#e67e22,stroke-width:3px;

💡 Real-World Example: API Response Cache

// Generic cache function for API responses
function cacheResponse<T>(key: string, data: T): T {
  localStorage.setItem(key, JSON.stringify(data));
  return data;
}

function getCachedResponse<T>(key: string): T | null {
  const cached = localStorage.getItem(key);
  return cached ? JSON.parse(cached) : null;
}

// Usage with different data types
interface User { id: number; name: string; }
interface Product { sku: string; price: number; }

const user = cacheResponse<User>("user_123", { id: 123, name: "Alice" });
const product = cacheResponse<Product>("prod_456", { sku: "ABC123", price: 99.99 });

const cachedUser = getCachedResponse<User>("user_123"); // Returns User | null

Further Learning 📚

• For a deeper dive, check out the TypeScript Generics Official Documentation.

Arrow Functions in TypeScript: A Quick Guide 🚀

What are Arrow Functions? 🤔

Arrow functions offer a concise way to write functions in TypeScript. Their syntax is typically (parameters) => expression for an implicit return (no return keyword needed if it’s a single expression), or (parameters) => { statements } for explicit returns with multiple lines of code. They’re shorter and often clearer than traditional function declarations, especially for simple tasks.

The Magic of this ✨

One major difference is how they handle the this keyword. Arrow functions lexically capture this from their surrounding scope. This means this inside an arrow function will always refer to the this of the code block where the arrow function was defined, making its context predictable. Regular functions, however, determine this based on how they are called, which can lead to unexpected behavior.

graph TD
    A["📝 Function Definition"]:::style1 --> B{"❓ Is it an Arrow Function?"}:::style3
    B -- "✅ Yes" --> C["🔒 Captures 'this' from surrounding scope"]:::style4
    B -- "❌ No" --> D["🔄 'this' depends on how it's called"]:::style2
    C --> E["✨ Consistent 'this' context"]:::style4
    D --> F["⚡ Dynamic 'this' context"]:::style5

    classDef style1 fill:#ff4f81,stroke:#c43e3e,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style2 fill:#6b5bff,stroke:#4a3f6b,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style3 fill:#ffd700,stroke:#d99120,color:#222,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style4 fill:#00bfae,stroke:#005f99,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style5 fill:#ff9800,stroke:#f57c00,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;

    linkStyle default stroke:#e67e22,stroke-width:3px;

When to Use Them? ✅

Arrow functions shine in scenarios where you need a function that doesn’t rebind this, such as:

• Callbacks: array.map(item => item * 2)
• Event Handlers: button.addEventListener('click', () => console.log(this.name)) They prevent common this context issues. For complex functions, or methods that need their own dynamic this context, regular functions are often more suitable.

Examples 💡

// Callback example (implicit return!)
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // doubled is [2, 4, 6]

// Event handler example (captures 'this' from class instance)
class Greeter {
  message = "Hello!";
  greet = () => console.log(this.message); // 'this' refers to the Greeter instance
}

const greeter = new Greeter();
// greeter.greet() will correctly log "Hello!"

Function Types and Callbacks 🔗

What are Function Types? 📚

Function types describe the shape of a function, including its parameters and return type.

Declaring Function Types 📝

// Function type
type MathOperation = (a: number, b: number) => number;

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

Callback Functions 🔄

Callbacks are functions passed as arguments to other functions:

function processData(data: string[], callback: (item: string) => void): void {
  data.forEach(item => callback(item));
}

processData(["a", "b", "c"], (item) => {
  console.log(item.toUpperCase());
});

Type-Safe Callbacks 🛡️

type Callback = (error: Error | null, result?: string) => void;

function fetchData(url: string, callback: Callback): void {
  if (url) {
    callback(null, "Data loaded");
  } else {
    callback(new Error("Invalid URL"));
  }
}

Function Interface 🎯

interface Formatter {
  (value: string): string;
}

const uppercase: Formatter = (val) => val.toUpperCase();
const lowercase: Formatter = (val) => val.toLowerCase();

graph LR
    A["🎯 Higher-Order Function"]:::style1 --> B["📥 Receives Callback"]:::style2
    B --> C["⚙️ Executes Callback"]:::style4
    C --> D["📤 Returns Result"]:::style5

    classDef style1 fill:#ff4f81,stroke:#c43e3e,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style2 fill:#6b5bff,stroke:#4a3f6b,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style4 fill:#00bfae,stroke:#005f99,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;
    classDef style5 fill:#ff9800,stroke:#f57c00,color:#fff,font-size:16px,stroke-width:3px,rx:14,shadow:6px;

    linkStyle default stroke:#e67e22,stroke-width:3px;

💡 Real-World Example: Form Validation Pipeline

// Type-safe validation callback system
type ValidationCallback = (value: string) => boolean;
type ErrorCallback = (field: string, message: string) => void;

function validateForm(
  fields: { [key: string]: string },
  validators: { [key: string]: ValidationCallback },
  onError: ErrorCallback
): boolean {
  let isValid = true;
  
  for (const field in fields) {
    const value = fields[field];
    const validator = validators[field];
    
    if (validator && !validator(value)) {
      onError(field, `Invalid ${field}`);
      isValid = false;
    }
  }
  
  return isValid;
}

// Usage in production form handling
const formData = {
  email: "user@example.com",
  password: "12345"
};

const validators = {
  email: (val: string) => val.includes("@"),
  password: (val: string) => val.length >= 8
};

validateForm(formData, validators, (field, msg) => {
  console.error(`${field}: ${msg}`);
});

🔗 More Info:

• TypeScript Handbook: More on Functions
• MDN: Callback Functions

---

🎯 Hands-On Assignment: Build a Task Management System 🚀

📝 Your Mission

Build a **Task Management System** using TypeScript functions that demonstrates typed functions, generics, callbacks, and function overloading.

🎯 Requirements

1. Create a generic Task<T> interface with id, title, and data of type T
2. Implement an overloaded createTask function that accepts:
   • (title: string) → creates a simple task
   • (title: string, data: T) → creates a task with custom data
3. Build a TaskManager class with methods:
   • addTask<T>(task: Task<T>): void - adds a task
   • getTasks(): Task<any>[] - returns all tasks
   • filterTasks(callback: (task: Task<any>) => boolean): Task<any>[] - filters tasks
4. Use arrow functions for callbacks
5. Include proper TypeScript type annotations throughout

💡 Implementation Hints

1. Start by defining the Task<T> interface with generic type parameter
2. Create overload signatures before the implementation function
3. Use rest parameters if you want to add multiple tasks at once
4. Leverage arrow functions for filtering and mapping tasks
5. Add default parameters where appropriate

🚀 Example Input/Output

interface TodoData {
  completed: boolean;
  priority: number;
}

const manager = new TaskManager();

// Using overloaded function
const simpleTask = createTask("Buy groceries");
const todoTask = createTask<TodoData>("Complete assignment", {
  completed: false,
  priority: 1
});

manager.addTask(simpleTask);
manager.addTask(todoTask);

// Using callback with arrow function
const incompleteTasks = manager.filterTasks(task => 
  !task.data?.completed
);

console.log(incompleteTasks); // [{ id: 2, title: "Complete assignment", ... }]

🏆 Bonus Challenges

• Level 2: Add a mapTasks<T, U> method that transforms tasks using a callback
• Level 3: Implement function overloading for filterTasks to accept different filter types
• Level 4: Use generic constraints to ensure certain task types have required properties
• Level 5: Add error handling with typed error callbacks
• Level 6: Implement a sortTasks function with comparison callback

📚 Learning Goals

• Master typed function parameters and return types 🎯
• Practice generic type parameters with constraints ✨
• Implement function overloading patterns 🔄
• Build type-safe callback systems 🔗
• Create reusable TypeScript utilities 🛠️

💡 Pro Tip: This pattern is used in task management libraries like TodoMVC, state management systems like Redux, and workflow engines!

Share Your Solution! 💬

Completed the project? Post your code in the comments below! Show us your TypeScript function mastery! 🚀✨

---

Conclusion 🎉

TypeScript functions elevate your code with type safety, making it more predictable and maintainable while catching errors during development. By mastering typed parameters, generics, overloading, and callbacks, you’ll write robust applications that scale effortlessly from small scripts to enterprise systems.