TypeScript Paradigm Comparison

What is a Programming Paradigm?

Think of a programming paradigm as a style or a "way of thinking" about how to solve problems with code. It's a set of concepts and practices that shape how you structure your programs. It’s not about a specific language—in fact, most modern languages, including TypeScript, are multi-paradigm. The choice of paradigm affects how you organize your code, manage data, and handle complexity.

The three major paradigms we'll cover are:

1. Imperative Programming: Describes how to do something through a sequence of statements that change the program's state.
2. Object-Oriented Programming (OOP): Organizes code into self-contained "objects" that bundle data and the behavior that operates on that data.
3. Functional Programming (FP): Treats computation as the evaluation of mathematical functions and avoids changing state and mutable data.

This diagram gives a great visual overview of the key ideas behind each paradigm, separated into the development phase (how you think and write the code) and the execution phase (how the computer runs it).

Let's break down each one with TypeScript examples.

1. Imperative Programming: The Recipe

The imperative paradigm is the most straightforward. You provide a detailed, step-by-step set of instructions for the computer to follow. The core idea is the modification of state using statements. If you're writing a recipe, you wouldn't just list the ingredients (the data); you'd write the exact steps: "heat the pan," "add the oil," "crack the egg."

In code, this translates to using loops, conditionals, and assignments to directly manipulate variables.

Consider a simple task: given an array of numbers, create a new array containing only the numbers greater than 5.

const numbers = [1, 8, 3, 10, 4, 7];
const filteredNumbers = []; // 1. Initialize an empty array (state)

for (let i = 0; i < numbers.length; i++) { // 2. Loop through each number
  if (numbers[i] > 5) { // 3. Check a condition
    filteredNumbers.push(numbers[i]); // 4. Modify the state by adding to the new array
  }
}

console.log(filteredNumbers); // Output: [8, 10, 7]

This is classic imperative code. We explicitly define the control flow (for loop, if statement) and directly modify the state of filteredNumbers.

2. Object-Oriented Programming: The Blueprint

Object-Oriented Programming (OOP) organizes code around the concept of "objects." An object is a self-contained unit that bundles together related data (properties) and the functions that operate on that data (methods). You've been using this paradigm extensively in Angular, where Component, Service, and Module are all defined as classes—blueprints for creating objects.

The key principles of OOP are:

• Encapsulation: Hiding the internal state of an object and only allowing access through public methods. This protects data from unintended modifications.
• Inheritance: Allowing a new class to adopt the properties and methods of an existing class.
• Polymorphism: Allowing objects of different classes to be treated as objects of a common superclass.

Let's see how OOP can provide a cleaner way to handle a real-world problem. The following article presents a scenario where you need to extract an email address from a complex JSON object that can have one of two shapes.

As you saw, the OOP approach creates an Account class. This class encapsulates the messy logic for finding the email. The consumer of the object doesn't need to know how the email is found; they just access the account.email property.

// The OOP approach from the article
class Account {
  private _account: any;

  constructor(json: any) {
    this._account = json;
  }

  get email(): string {
    return (
      this._account.profile.business?.email ||
      this._account.profile.individual?.email ||
      ""
    );
  }
}

// Usage:
// const accountData = await response.json();
// const account = new Account(accountData);
// console.log(account.email); 

The benefit is a clean API for the user of the Account object. The cost is the boilerplate of defining the class and the need to instantiate it.

3. Functional Programming: The Assembly Line

Functional Programming (FP) treats programs as a composition of pure functions, avoids shared state, mutable data, and side effects.

• Pure Functions: For the same input, a pure function will always return the same output and has no observable side effects (like modifying a global variable or writing to a log).
• Immutability: Data is never changed after it's created. If you need to modify something, you create a new data structure with the updated values instead.
• First-Class Functions: Functions are treated like any other variable. They can be passed as arguments to other functions, returned from functions, and stored in data structures.

You have likely used functional-style methods in JavaScript/TypeScript already, perhaps without thinking of it in these terms. Array methods like .map(), .filter(), and .reduce() are prime examples. They take a function as an argument and return a new array, leaving the original untouched.

const numbers = [1, 8, 3, 10, 4, 7];

// The functional way to filter
const filteredNumbers = numbers.filter(num => num > 5);

console.log(filteredNumbers); // Output: [8, 10, 7]
console.log(numbers); // Original array is unchanged: [1, 8, 3, 10, 4, 7]

Notice how we declare what we want (numbers where num > 5) rather than how to get it (the for loop). The filter function abstracts away the looping and state management.

Now let's see the functional solution to the email-extraction problem from the same article.

The functional approach is remarkably concise:

// The FP approach from the article
type AccountData = { /* ... define the shape of the account json ... */ };

const getEmail = (account: AccountData): string =>
  account.profile.business?.email ||
  account.profile.individual?.email ||
  "";

// Usage:
// const accountData = await response.json();
// console.log(getEmail(accountData));

Here, we have a pure function. It takes data as input and returns a new value. It doesn't rely on any internal state (this._account) and doesn't modify anything. It's a small, reusable, and easily testable piece of logic.

Conclusion: Choosing the Right Tool

We've now seen three distinct ways to approach a programming problem.

• Imperative: Explicit, step-by-step instructions that modify state. It's direct but can become hard to manage as complexity grows.
• Object-Oriented: Bundles data and behavior into objects, promoting organized, reusable, and encapsulated code. This is the dominant pattern in frameworks like Angular.
• Functional: Emphasizes statelessness and pure functions, leading to predictable and often more concise code, especially for data transformations.

The key takeaway is that no single paradigm is universally "best." Modern languages are multi-paradigm, and an effective developer knows when to use which approach. Your experience with Angular has given you a strong OOP foundation. As you learn Python, you'll see that while it fully supports OOP, its idioms often favor functional or simple imperative scripting styles, especially in data science and DevOps.

By understanding these fundamental models, you are no longer just learning a language's syntax. You are learning to see its underlying philosophy, which is the key to becoming truly language-agnostic and proficient.

In our next lesson, we'll add another layer to your mental models by exploring type systems. We will compare how languages like TypeScript, Python, and C# handle types, which will further clarify their differences and strengths.