clean-code-typescript

Ensure a class has only one reason to change by making it conceptually cohesive. Avoid 'jam-packing' a class with multiple functionalities. If a class handles multiple responsibilities (e.g., managing user settings AND verifying credentials), split them into separate classes. This minimizes the impact on dependent modules when a change is required.

// Good: Separate concerns into UserAuth and UserSettings
class UserAuth {
  constructor(private readonly user: User) {}
  verifyCredentials() { /* ... */ }
}

class UserSettings {
  private readonly auth: UserAuth;

  constructor(private readonly user: User) {
    this.auth = new UserAuth(user);
  }

  changeSettings(settings: UserSettings) {
    if (this.auth.verifyCredentials()) {
      // ...
    }
  }
}

Avoid duplicating logic by creating abstractions (classes, union types, or common parent classes) that can handle different but related entities. However, be cautious: if two pieces of code live in different domains, duplication might be preferable to an abstraction that introduces unnecessary dependencies between modules.

type Employee = Developer | Manager;

function showEmployeeList(employee: Employee[]) {
  employee.forEach((employee) => {
    const expectedSalary = employee.calculateExpectedSalary();
    const experience = employee.getExperience();
    const extra = employee.getExtraDetails();

    const data = {
      expectedSalary,
      experience,
      extra,
    };

    render(data);
  });
}

Function names should explicitly state what they do to avoid ambiguity. Avoid generic names like addToDate if the specific operation (like adding a month) is important for the caller to know.

function addMonthToDate(date: Date, month: number): Date {
  // ...
}

const date = new Date();
addMonthToDate(date, 1);

Test names should reveal their intention so that when a test fails, the name provides the first indication of what went wrong.

describe('Calendar', () => {
  it('should handle leap year', () => {
    // ...
  });

  it('should throw when format is invalid', () => {
    // ...
  });
});

Instead of accessing properties directly on objects, use TypeScript's get and set syntax. This encapsulates internal representation, allows for easy validation during assignment, enables lazy loading, and provides a single place to add logging or error handling without changing every accessor in the codebase.

class BankAccount {
  private accountBalance: number = 0;

  get balance(): number {
    return this.accountBalance;
  }

  set balance(value: number) {
    if (value < 0) {
      throw new Error('Cannot set negative balance.');
    }

    this.accountBalance = value;
  }

  // ...
}

const account = new BankAccount();
account.balance = 100;

When using throw or Promise.reject, always use the Error type. This ensures you get a stack trace and compatibility with try/catch/finally blocks. Avoid throwing strings or plain objects.

function calculateTotal(items: Item[]): number {
  throw new Error('Not implemented.');
}

async function get(): Promise<Item[]> {
  throw new Error('Not implemented.');
}

To avoid arguments over subjective formatting, use automated tools. For TypeScript, ESLint is recommended for static analysis to improve readability and maintainability.

Available ready-to-use configurations:

• eslint-config-airbnb-typescript: Airbnb style guide.
• eslint-plugin-base-style-config: Essential ESLint rules for JS, TS, and React.
• eslint-config-prettier: Lint rules for the Prettier code formatter.

If migrating from TSLint to ESLint, use the tslint-to-eslint-config project.

When working with collections that can be treated as a stream, use Generators (function*) and Iterables. This allows for lazy execution, decoupling the consumer from the implementation, and efficient memory usage for large datasets.

function* fibonacci(): IterableIterator<number> {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

// Usage with a loop
for (const fib of fibonacci()) {
  // ...
}