Functions in TypeScript

The Authentication Bug That Shipped to Production

It was launch day for our new payment feature. At 2:47 PM, we went live. At 3:12 PM, user reports started flooding in: "Can't log in after adding a credit card."

I dove into the logs:

// auth.js - Our old JavaScript code
function authenticateUser(username, password, options) {
  // Sometimes we called it with 2 args
  // authenticateUser('alice', 'pass123')
  
  // Sometimes with 3 args
  // authenticateUser('alice', 'pass123', { rememberMe: true })
  
  // The new payment code called it like this:
  // authenticateUser('alice', 'pass123', true)
  // BUG! options was supposed to be an object, not a boolean
  
  if (options.rememberMe) {  // Crashed here when options was true
    setLongLivedToken();
  }
}

The problem? No function signature. The new developer saw a third parameter, assumed it was a boolean flag, and broke authentication for 1,200 active users.

Hotfix time: 45 minutes of downtime. Angry support tickets. Emergency rollback.

That night, I migrated our authentication module to TypeScript:

interface AuthOptions {
  rememberMe?: boolean;
  mfaCode?: string;
  deviceId?: string;
}

function authenticateUser(
  username: string,
  password: string,
  options?: AuthOptions
): Promise<AuthResult> {
  // TypeScript won't compile if you pass a boolean
  // authenticateUser('alice', 'pass', true);  // ✗ Error!
  
  if (options?.rememberMe) {
    setLongLivedToken();
  }
  
  return performAuth(username, password, options);
}

// Correct usage enforced by compiler
authenticateUser('alice', 'pass123', { rememberMe: true });

Result: The bug would have been caught at compile time. TypeScript prevented it from ever reaching production.

This article covers everything about function types that could have saved me 45 minutes of downtime and a very uncomfortable incident postmortem.

---

Function Type Basics

TypeScript adds type annotations to parameters and return values.

Basic Function Syntax

// Named function
function add(a: number, b: number): number {
  return a + b;
}

// Function expression
const subtract = function(a: number, b: number): number {
  return a - b;
};

// Arrow function
const multiply = (a: number, b: number): number => {
  return a * b;
};

// Concise arrow function
const divide = (a: number, b: number): number => a / b;

// Usage
add(5, 3);        // 8
subtract(10, 4);  // 6
multiply(6, 7);   // 42
divide(20, 5);    // 4

add(5, '3');      // ✗ Error: Argument of type 'string' not assignable

Return Type Inference

// TypeScript infers return type
function greet(name: string) {
  return `Hello, ${name}!`;  // Inferred as string
}

// Explicit return type (recommended for public APIs)
function farewell(name: string): string {
  return `Goodbye, ${name}!`;
}

// Void return type
function logMessage(message: string): void {
  console.log(message);
  // No return statement, or return undefined
}

// Never return type (function never returns)
function throwError(message: string): never {
  throw new Error(message);
  // Never reaches end
}

function infiniteLoop(): never {
  while (true) {
    // Infinite loop
  }
}

---

Optional Parameters

Parameters that may or may not be provided.

Basic Optional Parameters

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

buildName('John');              // "John"
buildName('John', 'Doe');       // "John Doe"
buildName('John', undefined);   // "John"
buildName('John', 'Doe', 'Jr'); // ✗ Error: Expected 1-2 arguments

Optional Parameters Must Be Last

// ✗ Bad: Optional parameter before required
function badFunction(optional?: string, required: string) {
  // Error!
}

// ✓ Good: Optional parameters last
function goodFunction(required: string, optional?: string) {
  return optional ? `${required} ${optional}` : required;
}

Multiple Optional Parameters

function createUser(
  email: string,
  firstName?: string,
  lastName?: string,
  age?: number
): User {
  return {
    email,
    firstName: firstName || 'Unknown',
    lastName: lastName || '',
    age: age || 0
  };
}

createUser('[email protected]');
createUser('[email protected]', 'John');
createUser('[email protected]', 'John', 'Doe');
createUser('[email protected]', 'John', 'Doe', 30);

---

Default Parameters

Parameters with default values.

Basic Default Parameters

function calculatePrice(
  basePrice: number,
  taxRate: number = 0.08,
  discount: number = 0
): number {
  const tax = basePrice * taxRate;
  const total = basePrice + tax - discount;
  return total;
}

calculatePrice(100);              // 108 (uses defaults)
calculatePrice(100, 0.10);        // 110 (custom tax)
calculatePrice(100, 0.08, 10);    // 98 (custom discount)

Default Parameters with Types

interface RequestOptions {
  timeout: number;
  retries: number;
}

function fetchData(
  url: string,
  options: RequestOptions = { timeout: 5000, retries: 3 }
): Promise<Response> {
  return fetch(url, {
    signal: AbortSignal.timeout(options.timeout)
  });
}

fetchData('https://api.example.com/data');
fetchData('https://api.example.com/data', { timeout: 10000, retries: 5 });

Default vs Optional

// Optional: can be undefined or omitted
function optionalParam(name?: string) {
  // name is string | undefined
  console.log(name?.toUpperCase());
}

// Default: has a value if not provided
function defaultParam(name: string = 'Guest') {
  // name is always string
  console.log(name.toUpperCase());  // No null check needed
}

optionalParam();      // undefined
defaultParam();       // "GUEST"

---

Rest Parameters

Accept variable number of arguments as an array.

Basic Rest Parameters

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

sum(1, 2, 3);           // 6
sum(10, 20, 30, 40);    // 100
sum();                  // 0

Rest Parameters with Other Parameters

function buildUrl(base: string, ...segments: string[]): string {
  return base + '/' + segments.join('/');
}

buildUrl('https://api.example.com');                    // "https://api.example.com/"
buildUrl('https://api.example.com', 'users');          // "https://api.example.com/users"
buildUrl('https://api.example.com', 'users', '123');   // "https://api.example.com/users/123"

Rest Parameters with Union Types

function logMessages(prefix: string, ...messages: (string | number)[]): void {
  messages.forEach(msg => {
    console.log(`${prefix}: ${msg}`);
  });
}

logMessages('INFO', 'Server started', 'Port:', 3000);
// INFO: Server started
// INFO: Port:
// INFO: 3000

Real-world pattern from my logging utility:

type LogLevel = 'debug' | 'info' | 'warn' | 'error';

interface LogEntry {
  level: LogLevel;
  timestamp: Date;
  message: string;
  metadata?: Record<string, unknown>;
}

function log(level: LogLevel, message: string, ...metadata: unknown[]): void {
  const entry: LogEntry = {
    level,
    timestamp: new Date(),
    message,
    metadata: metadata.length > 0 ? { data: metadata } : undefined
  };
  
  console.log(JSON.stringify(entry));
}

log('info', 'User logged in', { userId: '123', ip: '192.168.1.1' });
log('error', 'Database connection failed', 'Connection timeout', { retries: 3 });

---

Function Type Expressions

Describing function types separately from implementation.

Basic Function Type

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

const add: MathOperation = (a, b) => a + b;
const subtract: MathOperation = (a, b) => a - b;
const multiply: MathOperation = (a, b) => a * b;

// ✗ Error: Return type 'string' not assignable to 'number'
const concat: MathOperation = (a, b) => `${a}${b}`;

Function Types in Interfaces

interface Calculator {
  add: (a: number, b: number) => number;
  subtract: (a: number, b: number) => number;
  multiply: (a: number, b: number) => number;
  divide: (a: number, b: number) => number;
}

const calculator: Calculator = {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
  multiply: (a, b) => a * b,
  divide: (a, b) => {
    if (b === 0) throw new Error('Division by zero');
    return a / b;
  }
};

Callback Function Types

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

function fetchUser(id: string, callback: Callback<User>): void {
  // Simulate async operation
  setTimeout(() => {
    if (id === 'invalid') {
      callback(new Error('User not found'));
    } else {
      callback(null, { id, name: 'John Doe', email: '[email protected]' });
    }
  }, 1000);
}

// Usage
fetchUser('123', (error, user) => {
  if (error) {
    console.error('Error:', error.message);
  } else {
    console.log('User:', user?.name);
  }
});

---

Function Overloads

Multiple function signatures for the same function.

Basic Overloads

// Overload signatures
function formatValue(value: string): string;
function formatValue(value: number): string;
function formatValue(value: boolean): string;

// Implementation signature
function formatValue(value: string | number | boolean): string {
  if (typeof value === 'string') {
    return `"${value}"`;
  } else if (typeof value === 'number') {
    return value.toFixed(2);
  } else {
    return value ? 'true' : 'false';
  }
}

formatValue('hello');   // "\"hello\""
formatValue(42);        // "42.00"
formatValue(true);      // "true"

Overloads with Different Parameter Counts

// Overload signatures
function buildDate(timestamp: number): Date;
function buildDate(year: number, month: number, day: number): Date;

// Implementation signature
function buildDate(
  yearOrTimestamp: number,
  month?: number,
  day?: number
): Date {
  if (month !== undefined && day !== undefined) {
    return new Date(yearOrTimestamp, month - 1, day);
  } else {
    return new Date(yearOrTimestamp);
  }
}

buildDate(1704326400000);        // Date from timestamp
buildDate(2024, 1, 3);           // Date from year/month/day

Real-World Example: Search Function

interface SearchOptions {
  limit?: number;
  offset?: number;
  sortBy?: string;
}

// Overload signatures
function search(query: string): Promise<Product[]>;
function search(query: string, options: SearchOptions): Promise<Product[]>;
function search(category: string, minPrice: number, maxPrice: number): Promise<Product[]>;

// Implementation signature
function search(
  queryOrCategory: string,
  optionsOrMinPrice?: SearchOptions | number,
  maxPrice?: number
): Promise<Product[]> {
  if (typeof optionsOrMinPrice === 'object') {
    // search(query, options)
    return searchWithOptions(queryOrCategory, optionsOrMinPrice);
  } else if (typeof optionsOrMinPrice === 'number' && maxPrice !== undefined) {
    // search(category, minPrice, maxPrice)
    return searchByPriceRange(queryOrCategory, optionsOrMinPrice, maxPrice);
  } else {
    // search(query)
    return simpleSearch(queryOrCategory);
  }
}

// Usage
search('laptop');                                    // Simple search
search('laptop', { limit: 10, sortBy: 'price' });   // With options
search('electronics', 100, 500);                     // By price range

---

This Parameter

Explicit typing for this context.

Basic This Parameter

interface User {
  name: string;
  greet(this: User): void;
}

const user: User = {
  name: 'Alice',
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

user.greet();  // "Hello, I'm Alice"

const greetFn = user.greet;
// greetFn();  // ✗ Error: The 'this' context is not of type 'User'

This Parameter in Classes

class Button {
  content: string;
  
  constructor(content: string) {
    this.content = content;
  }
  
  onClick(this: Button) {
    console.log(`Clicked: ${this.content}`);
  }
}

const button = new Button('Submit');
button.onClick();  // "Clicked: Submit"

// TypeScript error: can't use as callback directly
// document.addEventListener('click', button.onClick);  // ✗ Error

// Solution: bind or arrow function
document.addEventListener('click', button.onClick.bind(button));  // ✓
document.addEventListener('click', () => button.onClick());       // ✓

Real pattern from my event handling:

class EventEmitter<T> {
  private listeners: Array<(this: EventEmitter<T>, data: T) => void> = [];
  
  on(listener: (this: EventEmitter<T>, data: T) => void): void {
    this.listeners.push(listener);
  }
  
  emit(data: T): void {
    this.listeners.forEach(listener => listener.call(this, data));
  }
}

const emitter = new EventEmitter<string>();
emitter.on(function(data) {
  // 'this' is EventEmitter<string>
  console.log('Event:', data);
});

---

Generic Functions

Functions that work with multiple types.

Basic Generic Function

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

const num = identity<number>(42);        // Type: number
const str = identity<string>('hello');   // Type: string
const bool = identity<boolean>(true);    // Type: boolean

// Type inference - TypeScript figures it out
const auto = identity(42);  // Type: number (inferred)

Generic Array Functions

function firstElement<T>(arr: T[]): T | undefined {
  return arr[0];
}

const numbers = [1, 2, 3];
const first = firstElement(numbers);  // Type: number | undefined

const strings = ['a', 'b', 'c'];
const firstStr = firstElement(strings);  // Type: string | undefined

Generic Constraints

interface HasLength {
  length: number;
}

function logLength<T extends HasLength>(item: T): void {
  console.log(`Length: ${item.length}`);
}

logLength('hello');           // ✓ String has length
logLength([1, 2, 3]);         // ✓ Array has length
logLength({ length: 10 });    // ✓ Object has length
// logLength(42);             // ✗ Error: Number doesn't have length

Multiple Type Parameters

function map<T, U>(array: T[], fn: (item: T) => U): U[] {
  return array.map(fn);
}

const numbers = [1, 2, 3];
const strings = map(numbers, n => n.toString());  // string[]
const doubled = map(numbers, n => n * 2);         // number[]

Production example from my data transformation utilities:

interface ApiResponse<T> {
  success: boolean;
  data?: T;
  error?: string;
}

async function fetchAndTransform<TInput, TOutput>(
  url: string,
  transformer: (input: TInput) => TOutput
): Promise<ApiResponse<TOutput>> {
  try {
    const response = await fetch(url);
    const data: TInput = await response.json();
    
    return {
      success: true,
      data: transformer(data)
    };
  } catch (error) {
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error'
    };
  }
}

// Usage
interface RawUser {
  id: number;
  first_name: string;
  last_name: string;
}

interface User {
  id: string;
  fullName: string;
}

const result = await fetchAndTransform<RawUser, User>(
  '/api/user/123',
  raw => ({
    id: raw.id.toString(),
    fullName: `${raw.first_name} ${raw.last_name}`
  })
);

---

Async Functions

Functions that return promises.

Basic Async Function

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  return data;
}

// Usage
const user = await fetchUser('123');  // Type: User

Error Handling in Async Functions

async function fetchUserSafe(id: string): Promise<User | null> {
  try {
    const response = await fetch(`/api/users/${id}`);
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Failed to fetch user:', error);
    return null;
  }
}

// Result type handling
const user = await fetchUserSafe('123');
if (user) {
  console.log(user.name);  // TypeScript knows user is not null
}

Async Function with Generic Return

async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);
  const data: T = await response.json();
  return data;
}

interface Product {
  id: string;
  name: string;
  price: number;
}

const product = await fetchData<Product>('/api/products/123');
// Type: Product

---

Real-World Patterns

1. Request Handler Type

type RequestHandler<TParams, TBody, TResponse> = (
  params: TParams,
  body: TBody
) => Promise<TResponse>;

interface GetUserParams {
  userId: string;
}

interface UpdateUserBody {
  firstName?: string;
  lastName?: string;
  email?: string;
}

interface UserResponse {
  user: User;
  updated: boolean;
}

const updateUser: RequestHandler<GetUserParams, UpdateUserBody, UserResponse> = async (
  params,
  body
) => {
  // Implementation
  const user = await db.users.update(params.userId, body);
  return {
    user,
    updated: true
  };
};

2. Middleware Pattern

type Middleware<TContext> = (
  context: TContext,
  next: () => Promise<void>
) => Promise<void>;

interface RequestContext {
  userId?: string;
  requestId: string;
  startTime: number;
}

const authMiddleware: Middleware<RequestContext> = async (context, next) => {
  // Check authentication
  const token = getTokenFromHeader();
  context.userId = await validateToken(token);
  
  await next();
};

const loggingMiddleware: Middleware<RequestContext> = async (context, next) => {
  context.startTime = Date.now();
  
  await next();
  
  const duration = Date.now() - context.startTime;
  console.log(`Request ${context.requestId} took ${duration}ms`);
};

3. Factory Pattern

type Factory<T, TOptions = void> = (options: TOptions) => T;

interface DatabaseOptions {
  host: string;
  port: number;
  database: string;
}

interface Database {
  query(sql: string): Promise<unknown>;
  close(): Promise<void>;
}

const createDatabase: Factory<Database, DatabaseOptions> = (options) => {
  return {
    async query(sql: string) {
      // Implementation
      return [];
    },
    async close() {
      // Close connection
    }
  };
};

const db = createDatabase({
  host: 'localhost',
  port: 5432,
  database: 'myapp'
});

4. Retry Pattern

async function retry<T>(
  fn: () => Promise<T>,
  maxAttempts: number = 3,
  delayMs: number = 1000
): Promise<T> {
  let lastError: Error | undefined;
  
  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error instanceof Error ? error : new Error(String(error));
      
      if (attempt < maxAttempts) {
        await new Promise(resolve => setTimeout(resolve, delayMs));
      }
    }
  }
  
  throw lastError || new Error('All retry attempts failed');
}

// Usage
const user = await retry(
  () => fetchUser('123'),
  3,
  2000
);

---

Common Mistakes I Made

1. Not Typing Callback Parameters

Bad:

function processData(callback) {  // any!
  callback({ result: 'done' });
}

Good:

interface ProcessResult {
  result: string;
}

function processData(callback: (result: ProcessResult) => void): void {
  callback({ result: 'done' });
}

2. Forgetting Return Types

Bad:

async function fetchUser(id: string) {
  // What does this return? Promise<any>!
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Good:

async function fetchUser(id: string): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  const data: User = await response.json();
  return data;
}

3. Overusing Function Overloads

Bad:

function process(value: string): string;
function process(value: number): number;
function process(value: boolean): boolean;
function process(value: string[]): string[];
function process(value: any): any {
  // Complex logic
}

Good:

function process<T>(value: T): T {
  // Simpler with generics
  return value;
}

---

Your Challenge

Build a type-safe HTTP client:

// TODO: Define these types

type HttpMethod = /* 'GET' | 'POST' | ... */;

interface RequestConfig {
  // headers, timeout, retries
}

interface ApiResponse<T> {
  // success, data, error, status
}

// TODO: Implement these functions

async function request<T>(
  method: HttpMethod,
  url: string,
  config?: RequestConfig
): Promise<ApiResponse<T>> {
  // Make HTTP request
}

async function get<T>(url: string, config?: RequestConfig): Promise<ApiResponse<T>> {
  // Implement GET
}

async function post<T, TBody>(
  url: string,
  body: TBody,
  config?: RequestConfig
): Promise<ApiResponse<T>> {
  // Implement POST
}

// Bonus: Add retry logic
async function requestWithRetry<T>(
  method: HttpMethod,
  url: string,
  maxRetries: number,
  config?: RequestConfig
): Promise<ApiResponse<T>> {
  // Implement retry
}

// Requirements:
// 1. Full type safety for request/response
// 2. Generic type parameters for response data
// 3. Optional and default parameters
// 4. Proper error handling
// 5. Function overloads for different HTTP methods

---

Key Takeaways

1. Type all parameters and returns - explicit is better than implicit

2. Optional parameters with ? - must come after required

3. Default parameters - provide fallback values

4. Rest parameters - variable-length arguments as array

5. Function overloads - multiple signatures for same function

6. Generic functions - work with multiple types safely

7. Async functions - always return Promise<T>

8. This parameter - explicit typing for context

---

What I Learned

The authentication incident taught me: function signatures are contracts.

In JavaScript, I wrote:

function authenticateUser(username, password, options) {
  // What is options? Who knows!
}

Parameters were documentation (if I remembered to write it). Types were runtime surprises. The new developer saw three parameters and guessed wrong.

In TypeScript:

function authenticateUser(
  username: string,
  password: string,
  options?: AuthOptions
): Promise<AuthResult>

The signature tells you:

• What parameters are required

• What types are expected

• What's optional vs required

• What you'll get back

No guessing. No assumptions. Just compiler-enforced truth.

The 45-minute outage cost us:

• Lost revenue: ~$3,000

• Support time: 8 hours

• Trust: harder to measure

TypeScript's function types would have caught it in 0.5 seconds of compilation.

Type your functions. Your future self (and your users) will thank you.

---

Next: Advanced Types - Unions and Intersections

In the next article, we'll explore TypeScript's advanced type system. You'll learn how union types and type guards prevented a payment processing disaster that could have cost us $50,000.