Bridges the foundational FP concepts with React, showcasing how React's design inherently supports functional approaches. It covers functional components as pure functions, immutable props, functional state management with hooks like useState and useReducer, component composition, and building type-safe custom hooks.

Article 2: Marrying Functional Programming with React and TypeScript

## Introduction: Synthesizing Concepts in a Practical Project

This final article aims to synthesize the foundational functional programming (FP) principles discussed in Article 1 and their application within React using TypeScript, as detailed in Article 2. To achieve this, a practical, non-trivial application—a "Smart Task Manager"—will be developed. This project will serve as a concrete demonstration of how FP paradigms and TypeScript's strong type system converge to produce robust, maintainable, and predictable React code. The focus will be on applying concepts like pure functions, immutability, `useReducer` for state management, readonly props, custom Hooks for reusable logic, and end-to-end type safety.

## Project Blueprint – A "Smart Task Manager"

### Project Choice and Core Features

The "Smart Task Manager" application is selected for its balance of complexity and clarity. It's intricate enough to genuinely benefit from FP techniques and showcase TypeScript's strengths, yet manageable within the scope of an article.

**Core features will include:**

- **Task Management:** Adding new tasks, deleting existing tasks, toggling the completion status of tasks.
- **Task Editing:** Modifying the text, priority, or due date of existing tasks.
- **Filtering:** Displaying tasks based on their status (all, active, completed).
- **Sorting:** Ordering tasks by criteria such as due date or priority.
- **Persistence:** Storing task data in the browser's localStorage to retain information across sessions.

This feature set necessitates managing a list of items, handling various user interactions leading to state changes, performing data transformations (filtering and sorting), and managing side effects (persistence), making it an ideal candidate for applying the discussed principles.

### Functional Requirements

- Users can view a list of their tasks.
- Users can add a new task with text, an optional priority, and an optional due date.
- Users can mark tasks as completed or active.
- Users can delete tasks.
- Users can edit the details of existing tasks.
- Users can filter tasks by "all", "active", or "completed" status.
- Users can sort tasks by due date (ascending/descending) or priority (high-to-low/low-to-high).
- Task data persists in localStorage.

### Project Setup

The project will be initialized using Vite with the TypeScript template for a fast development environment, though Create React App with TypeScript is an equally valid alternative.

**Key configurations will include:**

- **TypeScript:** Strict mode enabled in `tsconfig.json` for maximum type safety.
- **ESLint:** Configured with plugins for React (`eslint-plugin-react`), React Hooks (`eslint-plugin-react-hooks`), and TypeScript (`@typescript-eslint/eslint-plugin`). Consideration will be given to `eslint-plugin-functional` to enforce FP-related rules like immutability or purity where practical, though primary reliance will be on TypeScript's type system and developer discipline.

The choice of a task manager allows for a clear demonstration of managing collections of data, applying transformations, and handling complex user interactions in a type-safe and functional manner.

## Defining the Domain – Types and Interfaces

A "types-first" development approach is crucial for building a type-safe application. By defining clear and comprehensive type definitions for the domain model, component props, and state structures before writing the implementation logic, a strong foundation is established. This practice helps in catching design flaws early and guides the development process, as the TypeScript compiler will enforce these contracts.

### Core Data Models

The central piece of our domain is the Task.

```typescript
// Defines the possible priority levels for a task
export type TaskPriority = 'low' | 'medium' | 'high';

// Interface for a single task item
export interface Task {
  readonly id: string; // Unique identifier, immutable after creation
  readonly text: string;
  readonly completed: boolean;
  readonly priority: TaskPriority;
  readonly dueDate?: string; // Optional due date, ISO string format
  readonly createdAt: number; // Timestamp of creation, immutable
}
```

All properties intended to be immutable after a task object's creation (or immutable update) are marked readonly. For instance, `id` and `createdAt` should never change. While `text`, `completed`, `priority`, and `dueDate` can be "changed" by user actions, these changes will be handled by creating new Task objects with updated values, adhering to immutability principles.

### Filter and Sort Types

```typescript
// Defines the possible filter statuses for tasks
export type FilterStatus = 'all' | 'active' | 'completed';

// Defines the possible criteria for sorting tasks
export type SortKey = 'dueDate' | 'priority' | 'createdAt' | 'text';

// Defines the possible sort directions
export type SortDirection = 'asc' | 'desc';

// Interface for the current sorting configuration
export interface SortConfig {
  readonly key: SortKey;
  readonly direction: SortDirection;
}
```

### Component Prop Types

Interfaces for props for every component will be defined, consistently using readonly for props to ensure components treat them as immutable. Example (will be expanded in the components section):

```typescript
import { Task, FilterStatus, SortConfig } from './domainTypes'; // Assuming domainTypes.ts

export interface TaskListProps {
  readonly tasks: readonly Task[];
  readonly onToggleTask: (id: string) => void;
  readonly onDeleteTask: (id: string) => void;
  readonly onEditTask: (task: Task) => void;
}
```

### State Types (especially for useReducer)

The main application state will be managed by `useReducer`. Its type will be:

```typescript
import { Task, FilterStatus, SortConfig } from './domainTypes';

export interface AppState {
  readonly tasks: readonly Task[];
  readonly currentFilter: FilterStatus;
  readonly currentSortConfig: SortConfig;
  readonly isLoading: boolean; // For initial load from localStorage
  readonly error?: string; // For any potential errors
}
```

This structured, types-first approach ensures that data integrity is maintained throughout the application, and component interactions are clearly defined and enforced by the TypeScript compiler.

## Crafting Core Functional Utilities

To maintain a clean separation of concerns and promote reusability, data transformation logic will be encapsulated in standalone, pure utility functions. These functions will operate on immutable data structures (e.g., `readonly Task[]`) and return new, transformed data structures, adhering to FP principles.

### Pure Helper Functions for Data Transformations

**createTask:** A factory function to create new task objects with default values and ensure all required fields are present.

```typescript
import { v4 as uuidv4 } from 'uuid'; // For generating unique IDs
import { Task, TaskPriority } from './domainTypes';

export const createTask = (
  text: string,
  priority: TaskPriority = 'medium',
  dueDate?: string
): Task => ({
  id: uuidv4(),
  text,
  completed: false,
  priority,
  dueDate,
  createdAt: Date.now(),
});
```

**toggleTaskCompletion:** Takes an array of tasks and a task ID, returns a new array with the specified task's completed status toggled.

```typescript
export const toggleTaskCompletion = (
  tasks: readonly Task[],
  taskId: string
): readonly Task[] =>
  tasks.map(task =>
    task.id === taskId ? { ...task, completed: !task.completed } : task
  );
```

**updateTaskDetails:** Takes an array of tasks and an updated task object, returns a new array with the specific task updated.

```typescript
export const updateTaskDetails = (
  tasks: readonly Task[],
  updatedTask: Task
): readonly Task[] =>
  tasks.map(task => (task.id === updatedTask.id ? updatedTask : task));
```

**deleteTaskById:** Takes an array of tasks and a task ID, returns a new array with the specified task removed.

```typescript
export const deleteTaskById = (
  tasks: readonly Task[],
  taskId: string
): readonly Task[] => tasks.filter(task => task.id !== taskId);
```

**filterTasks:** Filters tasks based on the FilterStatus.

```typescript
import { Task, FilterStatus } from './domainTypes';

export const filterTasks = (
  tasks: readonly Task[],
  status: FilterStatus
): readonly Task[] => {
  switch (status) {
    case 'active':
      return tasks.filter(task => !task.completed);
    case 'completed':
      return tasks.filter(task => task.completed);
    case 'all':
    default:
      return tasks;
  }
};
```

**sortTasks:** Sorts tasks based on SortConfig (key and direction).

```typescript
import { Task, SortConfig, TaskPriority } from './domainTypes';

const priorityOrder: Record<TaskPriority, number> = { high: 1, medium: 2, low: 3 };

export const sortTasks = (
  tasks: readonly Task[],
  sortConfig: SortConfig
): readonly Task[] => {
  const { key, direction } = sortConfig;
  const sortedTasks = [...tasks].sort((a, b) => {
    let comparison = 0;
    const valA = a[key];
    const valB = b[key];

    if (key === 'priority') {
      comparison = priorityOrder[a.priority] - priorityOrder[b.priority];
    } else if (key === 'dueDate') {
      // Handle undefined dueDates (e.g., tasks without due dates go last)
      if (!valA && valB) comparison = 1;
      else if (valA && !valB) comparison = -1;
      else if (valA && valB) comparison = new Date(valA as string).getTime() - new Date(valB as string).getTime();
    } else if (typeof valA === 'string' && typeof valB === 'string') {
      comparison = valA.localeCompare(valB);
    } else if (typeof valA === 'number' && typeof valB === 'number') {
      comparison = valA - valB;
    }

    return comparison;
  });

  return direction === 'asc' ? sortedTasks : sortedTasks.reverse();
};
```

All these functions are pure: they depend only on their inputs and produce new arrays without modifying the originals. This decoupling of data transformation logic from components enhances testability and reusability.

### Implementing and Using pipe for Transformation Chains

The `pipe` function, as defined in Article 1, can be used to create clear and readable data transformation pipelines. For instance, to get the tasks to be displayed (filtered and then sorted):

```typescript
// Flexible pipe function for varying input/output types between functions
type UnaryFn<T, R> = (input: T) => R;

function pipe<T0, T1>(op1: UnaryFn<T0, T1>): UnaryFn<T0, T1>;
function pipe<T0, T1, T2>(op1: UnaryFn<T0, T1>, op2: UnaryFn<T1, T2>): UnaryFn<T0, T2>;
function pipe<T0, T1, T2, T3>(op1: UnaryFn<T0, T1>, op2: UnaryFn<T1, T2>, op3: UnaryFn<T2, T3>): UnaryFn<T0, T3>;
// ... more overloads for more functions
function pipe(...ops: UnaryFn<any, any>): UnaryFn<any, any> {
  return (initialValue: any) => ops.reduce((acc, op) => op(acc), initialValue);
}

// In the component or reducer where tasks are processed:
// const allTasks: readonly Task[] = ...;
// const currentFilter: FilterStatus = ...;
// const currentSortConfig: SortConfig = ...;

// const getProcessedTasks = pipe(
//   (tasks: readonly Task[]) => filterTasks(tasks, currentFilter),
//   (filteredTasks: readonly Task[]) => sortTasks(filteredTasks, currentSortConfig)
// );
// const displayedTasks = getProcessedTasks(allTasks);
```

This declarative approach, using `pipe`, clearly outlines the steps involved in transforming the raw task data into the data ready for display, enhancing readability and maintaining type safety throughout the pipeline. These utility functions form the logical core of the application, independent of the React rendering layer.

## Constructing the UI with Functional Components

The UI of the Smart Task Manager will be built using functional components, adhering to the principles of pure rendering and immutable props discussed in Article 2. A distinction will be made between presentational (or "dumb") components and container (or "smart") components, which is a natural outcome of applying FP principles to UI development.

### Presentational Components

These components are responsible for rendering a part of the UI based on the props they receive. They are generally stateless (or have UI-specific state only), receive data and callbacks via readonly props, and do not contain application-specific business logic.

#### TaskItem.tsx: Displaying a Single Task

This component renders a single task and provides controls for toggling completion, editing, and deleting.

```typescript
import React from 'react';
import { Task } from './domainTypes';

export interface TaskItemProps {
  readonly task: Task;
  readonly onToggle: (id: string) => void;
  readonly onDelete: (id: string) => void;
  readonly onStartEdit: (task: Task) => void;
}

export const TaskItem: React.FC<TaskItemProps> = ({ task, onToggle, onDelete, onStartEdit }) => {
  return (
    <li style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
      <span onClick={() => onToggle(task.id)} style={{ cursor: 'pointer' }}>
        {task.text} (Priority: {task.priority}, Due: {task.dueDate || 'N/A'})
      </span>
      <button onClick={() => onStartEdit(task)}>Edit</button>
      <button onClick={() => onDelete(task.id)}>Delete</button>
    </li>
  );
};
```

## Conclusion

This article has synthesized the concepts from Articles 1 and 2 into a practical, type-safe React/TypeScript application. By defining a comprehensive domain model, implementing pure utility functions for data transformations, and constructing type-safe, immutable components and state management, the Smart Task Manager demonstrates how functional programming principles and TypeScript's type system work synergistically to produce robust, maintainable applications.

The pattern of separating pure logic from UI rendering, enforcing immutability through TypeScript's type system, and leveraging the compiler to catch errors early creates applications that are easier to test, understand, and refactor. As complexity grows, these principles scale elegantly, allowing teams to build and maintain larger codebases with confidence.

---

**Works Cited**

1. What Are the Principles of Functional Programming? - The Rheinwerk Computing Blog
2. Level Up React: Functional programming in React | 56kode
3. Functional Programming In React | Saeloun Blog
4. FP & TS chapter 1: Functional Programming for TypeScript developers - MDworld
5. Keeping Components Pure – React
6. Functional Programming in TypeScript - Telerik.com
7. Functional Programming in TypeScript using the fp-ts library
8. Typescript Functional Programming: Overview & best practices - Svitla Systems
9. How to Create Deep Readonly Type in Typescript? - GeeksforGeeks
10. How to make object properties immutable in TypeScript
11. TypeScript Object Type readonly Properties | GeeksforGeeks
12. Readonly | TypeScript Deep Dive
13. Read-only accessibility in TypeScript - 2ality
14. Higher-Order Types in TypeScript - GeeksforGeeks
15. Readonly Properties in TypeScript - Ultimate Courses
16. JavaScript Higher Order Functions - GeeksforGeeks
17. How to create a compose function in TypeScript - LogRocket Blog
18. Components and Props - React
19. Overview of React.js - Patterns.dev
20. Rules of React
21. TypeScript rule: React props should be read-only
22. useReducer - React
23. A guide to the React useReducer Hook - LogRocket Blog
24. React useReducer with TypeScript - JSTopics
25. Understanding the Composition Pattern in React - DEV Community
26. Design Principles - React
27. How do custom hooks help us reuse logic across different components? - GeeksforGeeks
28. Building Your Own Hooks – React / Reusing Logic with Custom Hooks - React
29. Building React Custom Hooks in TypeScript - Turing
30. Creating React custom hooks with Pieces
31. Using Custom React Hooks to Simplify Complex Scenarios - DZone
32. How to Sort & Filter Data in React using TypeScript - YouTube
33. Testing pure functions - Packt+
34. Introduction to Testing in React with TypeScript - DEV Community
35. How to Test React Components in TypeScript - Pluralsight

Culminates in a practical project—a "Smart Task Manager"—to illustrate the application of these principles in a real-world scenario, emphasizing end-to-end type safety and testability.

Article 3: Building a Type-Safe, Functional React/TypeScript Application

## Introduction to Functional Programming and TypeScript's Role

Functional Programming (FP) is a programming paradigm that treats computation as the evaluation of mathematical functions and avoids changing-state and mutable data. It emphasizes writing code with pure functions, immutable data structures, and function composition. In modern web development, these principles contribute to applications that are easier to reason about, test, and debug, especially as complexity grows. TypeScript, a statically typed superset of JavaScript, enhances the adoption of FP by providing a robust type system. This system allows developers to define clear contracts for functions and data structures, catching many potential errors at compile-time rather than runtime. The combination of FP's design philosophy and TypeScript's type safety offers a compelling approach to building reliable software.

## Core Principles of Functional Programming

The foundational pillars of functional programming provide a robust framework for developing predictable and maintainable software. These principles, when applied diligently, especially in conjunction with a strong type system like TypeScript's, can significantly reduce complexity and improve code quality.

### 1. Pure Functions: The Cornerstone of Predictability

A pure function is a fundamental concept in FP, characterized by two main properties:

**Determinism:** Given the same set of inputs, a pure function will always return the same output. It does not depend on any external state or data that might change during program execution.

**No Side Effects:** A pure function does not cause any observable changes outside of its own scope. This means it doesn't modify external variables, perform I/O operations (like writing to a console or making network requests), or mutate its input arguments.

#### Example: Pure Function

```typescript
const sum = (a: number, b: number): number => a + b;
```

This function, `sum`, will always produce the same result for the same `a` and `b`, and it doesn't alter any external state. TypeScript's type annotations ensure that the function receives numbers and returns a number, adding a layer of safety.

#### Example: Impure Functions

In contrast, an impure function might modify external state or produce different outputs for the same inputs due to external factors:

```typescript
let counter = 0;

// Impure function: modifies an external variable 'counter'
const incrementCounter = (value: number): number => {
  counter += value;
  return counter;
};

console.log(incrementCounter(1)); // Output: 1
console.log(incrementCounter(1)); // Output: 2 (different output for the same input)
```

Another example of an impure function is one that relies on `Math.random()` or the current date, as these introduce non-determinism:

```typescript
// Impure function: non-deterministic due to Math.random()
const addRandom = (x: number): number => x + Math.random();

// Impure function: side effect (modifying window object)
const impureAdd = (x: number, y: number): number => {
  const result = x + y;
  window.z = result; // Side effect
  return result;
};
```

#### Benefits of Pure Functions

Pure functions are highly desirable because they are easy to test (no complex environment setup needed), reason about (their behavior is self-contained), and can be memoized or parallelized due to their lack of side effects and deterministic nature.

It's important to recognize the "scale of purity". While striving for absolute purity is ideal, practical applications often involve interactions with the outside world (which are inherently impure). A pragmatic approach is to isolate impure operations as much as possible, often at the boundaries of the system, while keeping the core logic composed of pure functions. The key is to minimize and control impurity.

### 2. Immutability: Ensuring Data Integrity

Immutability dictates that data, once created, cannot be changed. If a modification is needed, a new data structure is created with the changes, leaving the original untouched. This principle is crucial for preventing unintended side effects and simplifying state management, as it eliminates complex scenarios where multiple parts of an application might be concurrently modifying the same data.

TypeScript provides the `readonly` modifier to enforce immutability at compile-time for object properties and array elements.

#### Using readonly for Object Properties

Properties of an interface or class can be marked as `readonly`. This means they can only be assigned a value during their declaration or within the class constructor.

```typescript
interface Point {
  readonly x: number;
  readonly y: number;
}

const p1: Point = { x: 10, y: 20 };
// p1.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.

class UserProfile {
  readonly userId: string;
  displayName: string;

  constructor(userId: string, displayName: string) {
    this.userId = userId; // Allowed
    this.displayName = displayName;
  }

  updateDisplayName(newName: string) {
    this.displayName = newName; // Allowed
    // this.userId = "newId"; // Error: Cannot assign to 'userId' because it is a read-only property.
  }
}
```

#### Using Readonly<T> Utility Type

TypeScript offers a utility type `Readonly<T>` that constructs a type with all properties of T set to readonly. This is useful for making entire objects immutable.

```typescript
interface Config {
  apiKey: string;
  timeout: number;
}

const initialConfig: Config = { apiKey: "abc", timeout: 5000 };
const readonlyConfig: Readonly<Config> = initialConfig;

// readonlyConfig.apiKey = "xyz"; // Error: Cannot assign to 'apiKey' because it is a read-only property.
```

#### ReadonlyArray<T> and readonly Tuple Types

For arrays, TypeScript provides `ReadonlyArray<T>` or the `readonly T[]` syntax to create arrays whose contents cannot be changed after creation. This means methods that mutate the array (like push, pop, splice) are not available on `ReadonlyArray<T>`.

```typescript
const numbers: ReadonlyArray<number> = [1, 2, 3, 4, 5];
// numbers.push(6); // Error: Property 'push' does not exist on type 'readonly number'.
// numbers[0] = 0; // Error: Index signature in type 'readonly number' only permits reading.

const tuple: readonly [string, number] = ['hello', 10];
// tuple[0] = 'world'; // Error: Cannot assign to '0' because it is a read-only property.
```

Operations that return new arrays, like `concat` or `slice`, are still permissible as they don't mutate the original ReadonlyArray.

#### Deep Immutability

The `readonly` modifier and `Readonly<T>` provide shallow immutability. If an object property is itself an object, the properties of that nested object are not automatically readonly unless explicitly defined as such.

```typescript
interface NestedProps {
  value: string;
}

interface OuterProps {
  readonly id: number;
  readonly nested: NestedProps;
}

const obj: OuterProps = {
  id: 1,
  nested: { value: "initial" }
};

// obj.id = 2; // Error: id is readonly
obj.nested.value = "changed"; // Allowed, as 'nested' is readonly, but its 'value' property is not.
```

To achieve deep immutability, where all nested properties are also immutable, one must recursively apply readonly or use a custom mapped type, often referred to as `DeepReadonly<T>`.

```typescript
type DeepReadonly<T> = {
  readonly [P in keyof T]: T[P] extends object ? DeepReadonly<T[P]> : T[P];
};

interface ComplexObject {
  id: number;
  data: {
    value: string;
    tags: string[];
  };
  metadata: {
    isActive: boolean;
  };
}

const deepReadonlyObj: DeepReadonly<ComplexObject> = {
  id: 1,
  data: {
    value: "test",
    tags: ["a", "b"]
  },
  metadata: {
    isActive: true
  }
};

// deepReadonlyObj.data.value = "new value"; // Error: Cannot assign to 'value' because it is a read-only property.
// deepReadonlyObj.data.tags.push("c"); // Error: Property 'push' does not exist on type 'readonly string'.
```

This recursive `DeepReadonly` type ensures that immutability percolates through the entire object structure, providing stronger guarantees. While `readonly` is a compile-time check, it significantly guides developers towards immutable practices. For runtime immutability, `Object.freeze()` could be used in conjunction, though this is often considered too verbose or performance-impacting for all scenarios if TypeScript discipline is maintained.

#### Benefits of Immutability

The benefits of immutability are profound: simplified change tracking (React leverages this for performance optimizations), easier debugging (data doesn't change unexpectedly), and enhanced concurrency safety.

### 3. Higher-Order Functions (HOFs): Abstracting Behavior

A Higher-Order Function (HOF) is a function that either:
- Takes one or more functions as arguments, or
- Returns a function as its result.

HOFs are a powerful tool for abstraction, allowing developers to create more generic, reusable, and composable code. They enable patterns like callbacks, function factories, and currying.

TypeScript supports HOFs naturally, and its type system allows for precise definition of the function signatures involved.

#### Functions as Arguments

Many built-in array methods in JavaScript, like `map`, `filter`, and `reduce`, are HOFs because they accept a callback function to perform an operation on each element.

```typescript
const numbers: number[] = [1, 2, 3, 4, 5];

// 'map' is a HOF that takes a function (num: number) => number
const doubledNumbers: number[] = numbers.map((num: number) => num * 2);
// doubledNumbers is [2, 4, 6, 8, 10]

// 'filter' is a HOF that takes a predicate function (num: number) => boolean
const evenNumbers: number[] = numbers.filter((num: number) => num % 2 === 0);
// evenNumbers is [2, 4]

// 'reduce' is a HOF that takes an accumulator function
const sumOfNumbers: number = numbers.reduce((accumulator: number, currentValue: number) => accumulator + currentValue, 0);
// sumOfNumbers is 15
```

TypeScript ensures that the callback functions passed to these HOFs adhere to the expected signatures, enhancing type safety.

#### Functions as Return Values (Function Factories)

HOFs can also return new functions. This is useful for creating specialized functions based on some initial configuration.

```typescript
// A HOF that returns a new function
const createMultiplier = (factor: number): ((value: number) => number) => {
  return (value: number): number => value * factor;
};

const double = createMultiplier(2);
const triple = createMultiplier(3);

console.log(double(5)); // Output: 10
console.log(triple(5)); // Output: 15
```

In this example, `createMultiplier` is a HOF that returns a new function. The returned function "remembers" the factor from its parent scope (a concept known as a closure). TypeScript helps by allowing us to type the returned function explicitly: `(value: number) => number`.

#### Using Generics with HOFs

Generics can make HOFs more versatile by allowing them to operate on various types while maintaining type safety.

```typescript
// A generic HOF that logs an argument and then calls a function with it
function withLogging<T, R>(fn: (arg: T) => R): (arg: T) => R {
  return (arg: T): R => {
    console.log(`Calling function with argument:`, arg);
    return fn(arg);
  };
}

const addFive = (x: number): number => x + 5;
const addFiveWithLogging = withLogging(addFive);
console.log(addFiveWithLogging(10)); // Logs "Calling function with argument: 10", then outputs 15

const toUpperCase = (s: string): string => s.toUpperCase();
const toUpperCaseWithLogging = withLogging(toUpperCase);
console.log(toUpperCaseWithLogging("hello")); // Logs "Calling function with argument: hello", then outputs "HELLO"
```

Here, `withLogging` is a generic HOF. `T` represents the argument type of the input function `fn` and the returned function, and `R` represents their return type. This allows `withLogging` to wrap any function that takes one argument, regardless of its specific type, while preserving type information.

Another example shows a generic HOF for creating a division function:

```typescript
type MyFunc<T> = (s: T) => (c: number) => number;
const genericFunc: MyFunc<number> = (n: number) => (c: number) => n / c;
const divideByTwo = genericFunc(10); // This will create a function (c: number) => 10 / c
console.log(divideByTwo(5)); // Output: 2
```

HOFs are a cornerstone of functional programming, enabling elegant solutions for code reuse and abstraction.

### 4. Function Composition: Building Complex Operations from Simple Ones

Function composition is the process of combining two or more functions to produce a new function, where the output of one function becomes the input of the next. This allows developers to build complex data transformation pipelines from small, reusable, and often pure functions. It promotes modularity and readability.

Mathematically, if you have functions f and g, their composition h is defined as h(x) = f(g(x)). This means g is applied first, and its result is then passed to f.

In programming, this is often achieved through helper functions like `pipe` (left-to-right execution) or `compose` (right-to-left execution). JavaScript doesn't have a built-in pipe operator like some other languages (e.g., Elixir's `|>`), so these are typically implemented as HOFs.

#### Implementing compose (Right-to-Left)

The `compose` function takes multiple functions and returns a new function that applies them from right to left.

```typescript
// Generic compose function
const compose = <T, U, V>(f: (val: U) => V, g: (val: T) => U) => (x: T): V => f(g(x));

// Example functions
const add5 = (x: number): number => x + 5;
const multiplyBy2 = (x: number): number => x * 2;

// composedFunction(x) will be add5(multiplyBy2(x))
const composedFunction = compose(add5, multiplyBy2);
console.log(composedFunction(10)); // Output: 25 (10 * 2 = 20, 20 + 5 = 25)
```

A more general compose function using `reduceRight` can handle multiple functions:

```typescript
const compose = <T>(...fns: Array<(arg: T) => T>) => (initialValue: T): T =>
  fns.reduceRight((acc, fn) => fn(acc), initialValue);

// Or, for a version where the first function in the list is the last one to be executed:
const composeAdvanced = <T>(fn1: (a: T) => T, ...fns: Array<(a: T) => T>) =>
  fns.reduce((prevFn, nextFn) => (value: T) => prevFn(nextFn(value)), fn1);

const func1 = (v: string) => `func1(${v})`;
const func2 = (v: string) => `func2(${v})`;
const func3 = (v: string) => `func3(${v})`;

const composedStrFunction = composeAdvanced(func1, func2, func3);
console.log(composedStrFunction("value")); // Output: func1(func2(func3(value)))
```

#### Implementing pipe (Left-to-Right)

The `pipe` function is similar but applies functions from left to right.

```typescript
// Generic pipe function
const pipe = <T, U, V>(f: (val: T) => U, g: (val: U) => V) => (x: T): V => g(f(x));

// pipedFunction(x) will be multiplyBy2(add5(x))
const pipedFunction = pipe(add5, multiplyBy2);
console.log(pipedFunction(10)); // Output: 30 (10 + 5 = 15, 15 * 2 = 30)
```

A more general pipe function using `reduce`:

```typescript
const pipeAdvanced = <T>(fn1: (a: T) => T, ...fns: Array<(a: T) => T>) =>
  fns.reduce((prevFn, nextFn) => (value: T) => nextFn(prevFn(value)), fn1);

const pipedStrFunction = pipeAdvanced(func1, func2, func3);
console.log(pipedStrFunction("value")); // Output: func3(func2(func1(value)))
```

TypeScript's generics are crucial here for ensuring type safety throughout the composition chain. The type of the output of one function must match the type of the input of the next.

Function composition leads to declarative code that clearly expresses the sequence of transformations applied to data, making complex logic easier to understand and maintain. For example, instead of nested function calls like `result = f(g(h(input)))`, composition allows:

```typescript
const process = pipe(h, g, f);
result = process(input);
```

## Conclusion: The Advantages of Functional TypeScript

Adopting functional programming principles within a TypeScript environment offers significant advantages for software development. Pure functions enhance predictability and testability. Immutability simplifies state management and reduces bugs caused by unintended data modifications. Higher-order functions and function composition provide powerful tools for abstraction and creating modular, reusable code. TypeScript's static typing system complements these FP principles by enforcing contracts, catching errors at compile-time, and improving code clarity and maintainability. This combination allows developers to build more robust, scalable, and understandable applications.

---

**Next:** Proceed to [Article 2: Marrying Functional Programming with React and TypeScript](https://oktayibis.com/blog/marrying-functional-programming-with-react-and-typescript)

Delves into the core tenets of FP—pure functions, immutability, higher-order functions, and function composition—and demonstrates their implementation and benefits within a TypeScript context.

Blog

Article 2: Marrying Functional Programming with React and TypeScript

Article 3: Building a Type-Safe, Functional React/TypeScript Application

Article 1: Foundations of Functional Programming in TypeScript