Functional Style for TypeScript

Scope

• File matching:

  **/*.{ts,tsx,js,jsx}

  , including TS logic within

  <script setup>

  in

  .vue

  files.
• Applicable scenarios: Business logic, composables, utility functions, type definitions, data transformation.
• Non-applicable scenarios: Configuration files, build scripts, and other non-logical code unrelated to the above objectives.

Goals

• Prioritize functions, composition, and data transformation over classes and shared mutable state.
• Keep code short, concise, and explicit to reduce reading costs.
• Prioritize clarity before pursuing "more functional" approaches; do not sacrifice readability for form.

Core Rules

1. Prioritize Pure Functions

• Logic that does not depend on lifecycle, DOM, or I/O should be extracted as pure functions whenever possible.
• Input and output should be stable and predictable, avoiding hidden side effects.
• Pure functions only serving the current module should be placed in the sibling

  shared.ts

  .
• Pure functions with cross-module reuse value should be placed in the project's global shared directory.

1. Prioritize Composition Over Imperative Stacking

• Prioritize small function composition, composables, and utility functions.
• Do not introduce classes unless required by external APIs.

1. Keep Functions Short

• A function should do only one thing.
• If a function handles filtering, mapping, branching, and side effects at the same time, it should be split.

1. Reduce Nesting Levels

• Prioritize guard clauses and early return.
• When conditional nesting exceeds two levels, prioritize extracting helper functions or reversing conditions.

1. Prioritize Declarative Data Transformation

• When

  map

  ,

  filter

  ,

  find

  ,

  some

  ,

  every

  can be used, avoid writing manual loops.
• Retain local imperative code only when it is clearly more readable or efficient.

1. Restrict Mutability

• Avoid shared mutable state.
• Prioritize derived values over mirrored state.
• Local mutation is only allowed when the scope is very small and it is clearly more readable.

1. Ensure Precise Typing

• Exported functions, public utilities, and complex return values should declare clear parameter and return types.
• Do not use

  any

  , broad assertions, or type escapes to cover up modeling issues.

1. Be Concise But Not Showy

• Do not introduce hard-to-read chaining techniques just for being "more functional".
• If a shorter writing style is harder to understand, choose the clearer version.

Vue Context Supplements

• Use

  computed

  for derived state instead of storing it repeatedly in ref.
• Separate side effects from data transformation.
• Pure logic unrelated to templates should be extracted to helpers or composables whenever possible.
• Pure logic only used by the current component family should be placed in the sibling

  shared.ts

  .
• Pure logic reusable across modules should be placed in the project's global shared directory.
• Do not introduce watchers unless necessary.
• Before adding new helpers, composables, or types, check if existing implementations in the project already meet the requirements.
• If there is no suitable composable in the project, prioritize checking

  @vueuse/core

  instead of rewriting common capabilities from scratch.

Refactoring Checklist

• Can it be extracted as a pure function?
• Should it be placed in the sibling

  shared.ts

  or the project's global shared directory after extraction?
• Can early return be used to reduce indentation?
• Can duplicate state be eliminated?
• Can intermediate variables that are only passed once be removed?
• Are the parameters and return values of the exported API clear enough?
• Is the code still easier to read after being shortened?

Examples

export function collectEnabledIds(items: Item[]): string[] {
  const result: string[] = [];

  for (const item of items) {
    if (item.enabled) {
      result.push(item.id);
    }
  }

  return result;
}

export function collectEnabledIds(items: Item[]): string[] {
  return items.filter(item => item.enabled).map(item => item.id);
}

export function resolveLabel(input?: string | null): string {
  let label = '';

  if (input) {
    label = input.trim();

    if (!label) {
      label = 'unknown';
    }
  } else {
    label = 'unknown';
  }

  return label;
}

export function resolveLabel(input?: string | null): string {
  const label = input?.trim();

  if (!label) {
    return 'unknown';
  }

  return label;
}

export function getActiveAdminNames(users: User[]): string[] {
  const result: string[] = [];

  for (const user of users) {
    if (user.role === 'admin') {
      if (user.active) {
        if (!user.deleted) {
          result.push(user.name);
        }
      }
    }
  }

  return result;
}

const isActiveAdmin = (user: User): boolean =>
  user.role === 'admin' && user.active && !user.deleted;

export function getActiveAdminNames(users: User[]): string[] {
  return users.filter(isActiveAdmin).map(user => user.name);
}

export function parseConfig(raw: unknown): Config {
  return raw as Config;
}

export function parseConfig(raw: unknown): Config {
  if (!raw || typeof raw !== 'object') {
    return { entries: [] };
  }

  const { entries } = raw as Record<string, unknown>;

  return {
    entries: Array.isArray(entries) ? entries.filter(isConfigEntry) : []
  };
}