TypeScript & Object-Oriented Design Patterns - Generics, Decorators & SOLID Flashcards

Question 1

What are TypeScript Generics and why use them?

Accepted Answer

Generics provide a way to create reusable components that can work with a variety of types rather than a single one. They allow you to write code that works for "any" type, while still providing type safety, preventing code duplication and making components more flexible. ```typescript function identity(arg: T): T { return arg; } let output = identity("myString"); // output is string let output2 = identity(123); // output2 is number ```

Question 2

How do you add constraints to a generic type parameter?

Accepted Answer

You can constrain a generic type parameter `T` to extend another type, ensuring that `T` has at least the properties of that type. This allows you to operate on those properties within the generic function or class.
```typescript
interface Lengthwise {
  length: number;
}
function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length); // Now we know 'arg' has a .length property
  return arg;
}
loggingIdentity({ length: 10, value: 3 }); // OK
// loggingIdentity(3); // Error: Argument of type 'number' is not assignable to parameter of type 'Lengthwise'.
```

Question 3

Explain user-defined type guards with an example.

Accepted Answer

User-defined type guards are functions that return a boolean indicating whether their argument is of a certain type. Their return type is a type predicate, typically `parameterName is Type`. This tells the TypeScript compiler that if the function returns `true`, the parameter is of that specific type within the scope where the guard was called.
```typescript
interface Bird { fly(): void; layEggs(): void; }
interface Fish { swim(): void; layEggs(): void; }

function isFish(pet: Bird | Fish): pet is Fish {
  return (pet as Fish).swim !== undefined;
}

function getSmallPet(): Fish | Bird {
  return Math.random() < 0.5 ? { fly: () => {}, layEggs: () => {} } : { swim: () => {}, layEggs: () => {} };
}

let pet = getSmallPet();
if (isFish(pet)) {
  pet.swim(); // TypeScript knows 'pet' is Fish here
} else {
  pet.fly();  // TypeScript knows 'pet' is Bird here
}
```

Question 4

What are conditional types and provide a basic example?

Accepted Answer

Conditional types allow types to be chosen based on a condition, similar to a ternary operator in JavaScript. They take the form `T extends U ? X : Y`. If type `T` is assignable to type `U`, then the type is `X`; otherwise, it's `Y`. ```typescript type IsString = T extends string ? "Yes" : "No"; type A = IsString; // type A = "Yes" type B = IsString; // type B = "No" type TypeName = T extends string ? "string" : T extends number ? "number" : T extends boolean ? "boolean" : T extends undefined ? "undefined" : T extends Function ? "function" : "object"; type C = TypeName<() => void>; // type C = "function" type D = TypeName; // type D = "object" ```

Question 5

How does the `infer` keyword enhance conditional types?

Accepted Answer

The `infer` keyword allows you to declare a type variable within the `extends` clause of a conditional type, which can then be used in the "true" branch. It's used to extract a type from another type. ```typescript type ReturnType = T extends (...args: any[]) => infer R ? R : any; function greet(name: string): string { return `Hello, ${name}`; } type GreetReturnType = ReturnType; // type GreetReturnType = string type ArrayElementType = T extends (infer U)[] ? U : T; type NumArrayElement = ArrayElementType; // type NumArrayElement = number type StringElement = ArrayElementType; // type StringElement = string ```

Question 6

Explain mapped types and provide a simple example.

Accepted Answer

Mapped types allow you to create new types by transforming the properties of an existing type. They iterate over the properties of a type, applying a transformation to each property's name or value. The syntax uses a `[P in K]` clause, where `P` is a new property name and `K` is a union of property keys.
```typescript
type Point = { x: number; y: number; };

// Makes all properties of Point optional
type PartialPoint = {
  [P in keyof Point]?: Point[P];
};
// type PartialPoint = { x?: number; y?: number; }

// Makes all properties of Point readonly
type ReadonlyPoint = {
  readonly [P in keyof Point]: Point[P];
};
// type ReadonlyPoint = { readonly x: number; readonly y: number; }
```

Question 7

What does `Partial<T>` do?

Accepted Answer

`Partial` is a built-in utility type that constructs a type with all properties of `T` set to optional. This is useful when you want to create an object that might only have a subset of the properties of an existing type. ```typescript interface Todo { title: string; description: string; completed: boolean; } type PartialTodo = Partial; /* type PartialTodo = { title?: string; description?: string; completed?: boolean; } */ const updateTodo = (todo: Todo, fieldsToUpdate: PartialTodo): Todo => { return { ...todo, ...fieldsToUpdate }; }; const myTodo: Todo = { title: "Learn TS", description: "Advanced topics", completed: false }; const updated = updateTodo(myTodo, { completed: true }); // updated is { title: "Learn TS", description: "Advanced topics", completed: true } ```

Question 8

What does `Pick<T, K>` do?

Accepted Answer

`Pick` is a built-in utility type that constructs a type by picking a set of properties `K` (a union of string literals) from type `T`. It creates a new type containing only the specified properties. ```typescript interface User { id: number; name: string; email: string; age: number; } type UserProfile = Pick; /* type UserProfile = { name: string; email: string; } */ const user: UserProfile = { name: "Alice", email: "alice@example.com" }; ```

Question 9

What are the key differences between `interface` and `type` in TypeScript?

Accepted Answer

*   **Declaration Merging**: `interface` supports declaration merging (you can define an interface multiple times, and TypeScript will merge them). `type` aliases do not.
*   **Extending/Implementing**: `interface` can `extend` other interfaces/classes and can be `implement`ed by classes. `type` aliases can `extend` via intersection types (`&`) and can implement via `class Foo implements MyType {}`.
*   **Primitives/Literals**: `type` aliases can define primitive types, union types, tuple types, and literal types (e.g., `type ID = string | number;`, `type Status = "active" | "inactive";`). `interface` cannot.
*   **Use Case**: Use `interface` for defining shapes of objects, especially when you expect them to be extended or implemented. Use `type` for anything else, including unions, intersections, mapped types, and when you need to alias a complex type.

Question 10

What are TypeScript Decorators and what is their purpose?

Accepted Answer

Decorators are a special kind of declaration that can be attached to classes, methods, accessors, properties, or parameters. They are functions that are executed at declaration time and can modify or observe the behavior of the decorated entity. Their primary purpose is to add metadata or extend functionality without modifying the original code, promoting a declarative programming style. They are an experimental feature.

Question 11

Provide a simple example of a class decorator.

Accepted Answer

A class decorator is applied to the constructor of a class. It can observe, modify, or replace a class definition.
```typescript
function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
  console.log("Class and its prototype have been sealed!");
}

@sealed
class Greeter {
  greeting: string;
  constructor(message: string) {
    this.greeting = message;
  }
  greet() {
    return "Hello, " + this.greeting;
  }
}

// You cannot add new properties to Greeter or its prototype after it's sealed.
// Greeter.prototype.newMethod = () => {}; // This would throw an error in strict mode
```
*Note: Enable `experimentalDecorators` and `emitDecoratorMetadata` in `tsconfig.json`.*

Question 12

Explain the Single Responsibility Principle (SRP).

Accepted Answer

The Single Responsibility Principle states that a class should have only one reason to change. This means a class should have only one primary responsibility or job. Adhering to SRP leads to more cohesive, maintainable, and testable code by reducing coupling between different concerns.
*   **Bad Example**: A `Report` class that generates, formats, and prints a report. (Three reasons to change)
*   **Good Example**: Separate `ReportGenerator`, `ReportFormatter`, and `ReportPrinter` classes.

Question 13

Explain the Open/Closed Principle (OCP).

Accepted Answer

The Open/Closed Principle states that software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification. This means you should be able to add new functionality without altering existing, working code. This is often achieved through abstraction (interfaces, abstract classes) and polymorphism.
*   **Example**: A `Shape` interface with a `calculateArea()` method. New shapes (e.g., `Circle`, `Rectangle`) can be added by implementing `Shape` without modifying existing code that uses `Shape`.

Question 14

Explain the Liskov Substitution Principle (LSP).

Accepted Answer

The Liskov Substitution Principle states that objects of a superclass should be replaceable with objects of its subclasses without breaking the application. This means that a subclass should extend the capabilities of the superclass without changing its fundamental behavior. If a client expects a base class, it should be able to use a derived class without issues.
*   **Violation Example**: A `Rectangle` class and a `Square` class that extends `Rectangle`. If `Square` overrides `setWidth` and `setHeight` to always keep width and height equal, it violates LSP because a `Square` cannot always substitute a `Rectangle` without altering expected behavior (e.g., setting width to 5 and height to 10 on a `Rectangle` vs. a `Square`).

Question 15

Explain the Interface Segregation Principle (ISP).

Accepted Answer

The Interface Segregation Principle states that clients should not be forced to depend on interfaces they do not use. Instead of one large, monolithic interface, it's better to have many small, client-specific interfaces. This prevents classes from implementing methods they don't need, reducing coupling and improving maintainability.
*   **Bad Example**: A single `Worker` interface with `work()`, `eat()`, `sleep()`, `manage()` methods. A `Robot` class would be forced to implement `eat()` and `sleep()`, which it doesn't do.
*   **Good Example**: Separate interfaces like `Workable`, `Eatable`, `Sleepable`, `Manageable`. A `Robot` would only implement `Workable`.

Question 16

Explain the Dependency Inversion Principle (DIP).

Accepted Answer

The Dependency Inversion Principle states that high-level modules should not depend on low-level modules; both should depend on abstractions. Additionally, abstractions should not depend on details; details should depend on abstractions. This means that instead of directly instantiating concrete implementations, classes should depend on interfaces or abstract classes, and these dependencies should be "injected" (e.g., via constructor). This reduces coupling and makes systems more flexible and testable.
*   **Example**: A `ReportGenerator` (high-level) should not directly depend on a `MySQLDatabase` (low-level). Instead, both should depend on a `IDatabase` interface. The `MySQLDatabase` would implement `IDatabase`, and `ReportGenerator` would receive an `IDatabase` instance.

Question 17

Describe the Singleton pattern and its TypeScript implementation.

Accepted Answer

The Singleton pattern ensures that a class has only one instance and provides a global point of access to that instance. It's useful for managing shared resources or configurations.
```typescript
class Logger {
  private static instance: Logger;
  private logs: string[] = [];

private constructor() {
    // Private constructor to prevent direct instantiation
  }

public static getInstance(): Logger {
    if (!Logger.instance) {
      Logger.instance = new Logger();
    }
    return Logger.instance;
  }

public log(message: string) {
    const timestamp = new Date().toISOString();
    this.logs.push(`[${timestamp}] ${message}`);
    console.log(`[${timestamp}] ${message}`);
  }

public getLogs(): string[] {
    return [...this.logs];
  }
}

const logger1 = Logger.getInstance();
const logger2 = Logger.getInstance();

logger1.log("Application started.");
logger2.log("User logged in.");

console.log(logger1 === logger2); // true, both refer to the same instance
console.log(logger1.getLogs());
```

Question 18

Describe the Factory pattern and its TypeScript implementation.

Accepted Answer

The Factory pattern provides an interface for creating objects in a superclass, but allows subclasses to alter the type of objects that will be created. It centralizes object creation, making the system more flexible and decoupled from specific product implementations.
```typescript
interface Product {
  operation(): string;
}

class ConcreteProductA implements Product {
  public operation(): string {
    return "ConcreteProductA operation.";
  }
}

class ConcreteProductB implements Product {
  public operation(): string {
    return "ConcreteProductB operation.";
  }
}

abstract class Creator {
  public abstract factoryMethod(): Product;

public someOperation(): string {
    const product = this.factoryMethod();
    return `Creator: The same creator's code has just worked with ${product.operation()}`;
  }
}

class ConcreteCreatorA extends Creator {
  public factoryMethod(): Product {
    return new ConcreteProductA();
  }
}

class ConcreteCreatorB extends Creator {
  public factoryMethod(): Product {
    return new ConcreteProductB();
  }
}

function clientCode(creator: Creator) {
  console.log(creator.someOperation());
}

clientCode(new ConcreteCreatorA());
clientCode(new ConcreteCreatorB());
```

Question 19

Describe the Observer pattern and its TypeScript implementation.

Accepted Answer

The Observer pattern defines a one-to-many dependency between objects so that when one object (the subject) changes state, all its dependents (observers) are notified and updated automatically. It promotes loose coupling between subjects and observers.
```typescript
interface Observer {
  update(subject: Subject): void;
}

interface Subject {
  attach(observer: Observer): void;
  detach(observer: Observer): void;
  notify(): void;
}

class ConcreteSubject implements Subject {
  public state: number = 0;
  private observers: Observer[] = [];

public attach(observer: Observer): void {
    const isExist = this.observers.includes(observer);
    if (isExist) return console.log('Subject: Observer has been attached already.');
    this.observers.push(observer);
    console.log('Subject: Attached an observer.');
  }

public detach(observer: Observer): void {
    const observerIndex = this.observers.indexOf(observer);
    if (observerIndex === -1) return console.log('Subject: Nonexistent observer.');
    this.observers.splice(observerIndex, 1);
    console.log('Subject: Detached an observer.');
  }

public notify(): void {
    console.log('Subject: Notifying observers...');
    for (const observer of this.observers) {
      observer.update(this);
    }
  }

public someBusinessLogic(): void {
    console.log('
Subject: I\'m doing something important.');
    this.state = Math.floor(Math.random() * (10 + 1));
    console.log(`Subject: My state has just changed to: ${this.state}`);
    this.notify();
  }
}

class ConcreteObserverA implements Observer {
  public update(subject: Subject): void {
    if (subject instanceof ConcreteSubject && subject.state < 3) {
      console.log('ConcreteObserverA: Reacted to the event.');
    }
  }
}

class ConcreteObserverB implements Observer {
  public update(subject: Subject): void {
    if (subject instanceof ConcreteSubject && (subject.state === 0 || subject.state >= 2)) {
      console.log('ConcreteObserverB: Reacted to the event.');
    }
  }
}

const subject = new ConcreteSubject();
const observer1 = new ConcreteObserverA();
const observer2 = new ConcreteObserverB();

subject.attach(observer1);
subject.attach(observer2);

subject.someBusinessLogic();
subject.someBusinessLogic();

subject.detach(observer1);
subject.someBusinessLogic();
```

Question 20

Describe the Strategy pattern and its TypeScript implementation.

Accepted Answer

The Strategy pattern defines a family of algorithms, encapsulates each one, and makes them interchangeable. It lets the algorithm vary independently from clients that use it. This allows for easy switching of algorithms at runtime without modifying the client code.
```typescript
interface Strategy {
  execute(a: number, b: number): number;
}

class ConcreteStrategyAdd implements Strategy {
  public execute(a: number, b: number): number {
    return a + b;
  }
}

class ConcreteStrategySubtract implements Strategy {
  public execute(a: number, b: number): number {
    return a - b;
  }
}

class ConcreteStrategyMultiply implements Strategy {
  public execute(a: number, b: number): number {
    return a * b;
  }
}

class Context {
  private strategy: Strategy;

constructor(strategy: Strategy) {
    this.strategy = strategy;
  }

public setStrategy(strategy: Strategy) {
    this.strategy = strategy;
  }

public doSomething(a: number, b: number): number {
    console.log("Context: Executing strategy...");
    const result = this.strategy.execute(a, b);
    console.log(`Result: ${result}`);
    return result;
  }
}

const context = new Context(new ConcreteStrategyAdd());
context.doSomething(10, 5); // Result: 15

context.setStrategy(new ConcreteStrategySubtract());
context.doSomething(10, 5); // Result: 5

context.setStrategy(new ConcreteStrategyMultiply());
context.doSomething(10, 5); // Result: 50
```

TypeScript & Object-Oriented Design Patterns - Generics, Decorators & SOLID

Cards in this deck

Related Flashcard Sets

JLPT N2 - Upper-Intermediate Japanese Kanji, Grammar & Expressions

CompTIA Network+ (N10-008) - Networking Fundamentals & Subnetting

HSK 4 - Intermediate Chinese Vocabulary & Grammar

CompTIA Network+ (N10-008) - Networking Fundamentals & Protocols