← Back to Course

⚡ Functions & Type Annotations

Functions are the building blocks of any application. In TypeScript, you can add type annotations to function parameters and return values, making your code more predictable and catching errors early.

Function Type Annotations

TypeScript allows you to specify types for both parameters and return values:

Example: Basic Function Types

// Function with typed parameters and return type
function add(a: number, b: number): number {
  return a + b;
}

// Function with no return value (void)
function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

// Function that returns a boolean
function isEven(num: number): boolean {
  return num % 2 === 0;
}

// Usage
const sum = add(5, 3);        // 8
greet("TypeLand");            // "Hello, TypeLand!"
const result = isEven(4);     // true

Arrow Functions

Arrow functions provide a concise syntax and work seamlessly with TypeScript's type system:

Example: Arrow Functions

// Arrow function with explicit types
const multiply = (x: number, y: number): number => {
  return x * y;
};

// Concise arrow function (implicit return)
const square = (n: number): number => n * n;

// Arrow function with no parameters
const getRandomNumber = (): number => {
  return Math.random();
};

// Usage
console.log(multiply(4, 5));   // 20
console.log(square(6));        // 36
console.log(getRandomNumber()); // random number

Optional and Default Parameters

TypeScript supports optional parameters (using ?) and default values:

Example: Optional and Default Parameters

// Optional parameter (might be undefined)
function buildGreeting(name: string, title?: string): string {
  if (title) {
    return `Hello, ${title} ${name}!`;
  }
  return `Hello, ${name}!`;
}

console.log(buildGreeting("Alice"));              // "Hello, Alice!"
console.log(buildGreeting("Bob", "Dr."));         // "Hello, Dr. Bob!"

// Default parameter value
function calculatePrice(price: number, taxRate: number = 0.1): number {
  return price + (price * taxRate);
}

console.log(calculatePrice(100));      // 110 (default 10% tax)
console.log(calculatePrice(100, 0.2)); // 120 (20% tax)

// Multiple optional/default parameters
function createUser(
  username: string,
  email?: string,
  age: number = 18
): object {
  return { username, email, age };
}

Function Type Expressions

You can also define function types as variables or use them in type aliases:

Example: Function Types

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

// Use the function type
const subtract: MathOperation = (x, y) => x - y;
const divide: MathOperation = (x, y) => x / y;

console.log(subtract(10, 3));  // 7
console.log(divide(20, 4));    // 5

// Callback function type
function processNumbers(
  nums: number[],
  callback: (n: number) => number
): number[] {
  return nums.map(callback);
}

const doubled = processNumbers([1, 2, 3], n => n * 2);
console.log(doubled);  // [2, 4, 6]

Rest Parameters

Rest parameters allow functions to accept any number of arguments:

Example: Rest Parameters

// Rest parameters collect remaining arguments into an array
function sum(...numbers: number[]): number {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sum(1, 2, 3));           // 6
console.log(sum(10, 20, 30, 40));    // 100

// Combine regular and rest parameters
function makeList(title: string, ...items: string[]): string {
  return `${title}: ${items.join(', ')}`;
}

console.log(makeList("Fruits", "Apple", "Banana", "Orange"));
// "Fruits: Apple, Banana, Orange"

🎯 Key Concepts

  • Always annotate function parameters - TypeScript cannot infer them
  • Return type annotations are optional but recommended for clarity
  • Use void for functions that don't return a value
  • Optional parameters use ? and must come after required parameters
  • Default parameters provide fallback values when arguments are omitted
  • Arrow functions are great for callbacks and concise operations

📚 Helpful Resources

← Back to Beginner Course