Code Organization Patterns

Helper Composition

Small helpers are easier to test and can be composed into a larger transformation.

helper composition Helper composition means each helper does one job and another function connects the steps.

Helper Composition

pageTitle
helpers.ts
Replay: real traced execution (multi-file project)
function normalize(text: string): string {
    return text.trim().toLowerCase();
}

function slugify(text: string): string {
    return text.replace(" ", "-");
}

function buildSlug(title: string): string {
    const normalized: string = normalize(title);
    return slugify(normalized);
}

const pageTitle: string = "TypeScript Basics";
const slug: string = buildSlug(pageTitle);

console.log(`slug=${slug}`);

function normalize(text: string): string {
    return text.trim().toLowerCase();
}

function slugify(text: string): string {
    return text.replace(" ", "-");
}

function buildSlug(title: string): string {
    const normalized: string = normalize(title);
    return slugify(normalized);
}

const pageTitle: string = "Helper Design";
const slug: string = buildSlug(pageTitle);

console.log(`slug=${slug}`);

function normalize(text: string): string {
    return text.trim().toLowerCase();
}

function slugify(text: string): string {
    return text.replace(" ", "-");
}

function buildSlug(title: string): string {
    const normalized: string = normalize(title);
    return slugify(normalized);
}

const pageTitle: string = "Config Objects";
const slug: string = buildSlug(pageTitle);

console.log(`slug=${slug}`);

  1. pageTitle ← TypeScript Basics

    11    return slugify(normalized);12}1314const pageTitle→ TypeScript Basics: string = "TypeScript Basics";  //@pageTitle="Helper Design", "Config Objects"15const slug: string = buildSlug(pageTitleTypeScript Basics);

  2. function buildSlug(title: string): string

    6    return text.replace(" ", "-");7}89function buildSlug(titleTypeScript Basics: string): string {10    const normalized: string = normalize(titleTypeScript Basics);11    return slugify(normalized);

  3. function normalize(text: string): string

    1function normalize(textTypeScript Basics: string): string {2    return textTypeScript Basics.trim().toLowerCase();3}

  4. normalized ← typescript basics

    9function buildSlug(title: string): string {10    const normalized→ typescript basics: string = normalize(titleTypeScript Basics);11    return slugify(normalizedtypescript basics);12}

  5. function slugify(text: string): string

    2    return text.trim().toLowerCase();3}45function slugify(texttypescript basics: string): string {6    return texttypescript basics.replace(" ", "-");7}

  6. slug ← typescript-basics

    14const pageTitle: string = "TypeScript Basics";  //@pageTitle="Helper Design", "Config Objects"15const slug→ typescript-basics: string = buildSlug(pageTitleTypeScript Basics);1617console.log(`slug=${slugtypescript-basics}`);
    outputslug=typescript-basics

  1. pageTitle ← Helper Design

    11    return slugify(normalized);12}1314const pageTitle→ Helper Design: string = "Helper Design";15const slug: string = buildSlug(pageTitleHelper Design);

  2. function buildSlug(title: string): string

    6    return text.replace(" ", "-");7}89function buildSlug(titleHelper Design: string): string {10    const normalized: string = normalize(titleHelper Design);11    return slugify(normalized);

  3. function normalize(text: string): string

    1function normalize(textHelper Design: string): string {2    return textHelper Design.trim().toLowerCase();3}

  4. normalized ← helper design

    9function buildSlug(title: string): string {10    const normalized→ helper design: string = normalize(titleHelper Design);11    return slugify(normalizedhelper design);12}

  5. function slugify(text: string): string

    2    return text.trim().toLowerCase();3}45function slugify(texthelper design: string): string {6    return texthelper design.replace(" ", "-");7}

  6. slug ← helper-design

    14const pageTitle: string = "Helper Design";15const slug→ helper-design: string = buildSlug(pageTitleHelper Design);1617console.log(`slug=${slughelper-design}`);
    outputslug=helper-design

  1. pageTitle ← Config Objects

    11    return slugify(normalized);12}1314const pageTitle→ Config Objects: string = "Config Objects";15const slug: string = buildSlug(pageTitleConfig Objects);

  2. function buildSlug(title: string): string

    6    return text.replace(" ", "-");7}89function buildSlug(titleConfig Objects: string): string {10    const normalized: string = normalize(titleConfig Objects);11    return slugify(normalized);

  3. function normalize(text: string): string

    1function normalize(textConfig Objects: string): string {2    return textConfig Objects.trim().toLowerCase();3}

  4. normalized ← config objects

    9function buildSlug(title: string): string {10    const normalized→ config objects: string = normalize(titleConfig Objects);11    return slugify(normalizedconfig objects);12}

  5. function slugify(text: string): string

    2    return text.trim().toLowerCase();3}45function slugify(textconfig objects: string): string {6    return textconfig objects.replace(" ", "-");7}

  6. slug ← config-objects

    14const pageTitle: string = "Config Objects";15const slug→ config-objects: string = buildSlug(pageTitleConfig Objects);1617console.log(`slug=${slugconfig-objects}`);
    outputslug=config-objects