Advanced Type Patterns

Utility Types

Utility types transform existing object types into useful variations.

utility type A utility type such as `Partial<T>`, `Pick<T>`, or `Readonly<T>` builds a new type from another type.

Utility Types

newLessons
utility.ts
Replay: real traced execution (multi-file project)
type Profile = {
    name: string;
    city: string;
    lessons: number;
};

function updateProfile(profile: Readonly<Profile>, changes: Partial<Pick<Profile, "city" | "lessons">>): Profile {
    return {
        name: profile.name,
        city: changes.city ?? profile.city,
        lessons: changes.lessons ?? profile.lessons,
    };
}

const newLessons: number = 4;
const base: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };
const updated: Profile = updateProfile(base, { lessons: newLessons });

console.log(`${updated.name}:${updated.city}:${updated.lessons}`);

type Profile = {
    name: string;
    city: string;
    lessons: number;
};

function updateProfile(profile: Readonly<Profile>, changes: Partial<Pick<Profile, "city" | "lessons">>): Profile {
    return {
        name: profile.name,
        city: changes.city ?? profile.city,
        lessons: changes.lessons ?? profile.lessons,
    };
}

const newLessons: number = 1;
const base: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };
const updated: Profile = updateProfile(base, { lessons: newLessons });

console.log(`${updated.name}:${updated.city}:${updated.lessons}`);

type Profile = {
    name: string;
    city: string;
    lessons: number;
};

function updateProfile(profile: Readonly<Profile>, changes: Partial<Pick<Profile, "city" | "lessons">>): Profile {
    return {
        name: profile.name,
        city: changes.city ?? profile.city,
        lessons: changes.lessons ?? profile.lessons,
    };
}

const newLessons: number = 8;
const base: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };
const updated: Profile = updateProfile(base, { lessons: newLessons });

console.log(`${updated.name}:${updated.city}:${updated.lessons}`);

  1. newLessons ← 4, base ← [object Object]

    12    };13}1415const newLessons→ 4: number = 4;  //@newLessons=1, 816const base→ [object Object]: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };17const updated: Profile = updateProfile(base[object Object], { lessons: newLessons4 });

  2. function updateProfile(profile: Readonly<Profile>, changes: Partial<Pi…

    4    lessons: number;5};67function updateProfile(profile[object Object]: Readonly<Profile>, changes[object Object]: Partial<Pick<Profile, "city" | "lessons">>): Profile {8    return {9        name: profile.nameAda,10        city: changes.city ?? profile.cityLondon,11        lessons: changes.lessons ?? profile.lessons2,12    };13}

  3. updated ← [object Object]

    15const newLessons: number = 4;  //@newLessons=1, 816const base: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };17const updated→ [object Object]: Profile = updateProfile(base[object Object], { lessons: newLessons4 });1819console.log(`${updated.nameAda}:${updated.cityLondon}:${updated.lessons4}`);
    outputAda:London:4

  1. newLessons ← 1, base ← [object Object]

    12    };13}1415const newLessons→ 1: number = 1;16const base→ [object Object]: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };17const updated: Profile = updateProfile(base[object Object], { lessons: newLessons1 });

  2. function updateProfile(profile: Readonly<Profile>, changes: Partial<Pi…

    4    lessons: number;5};67function updateProfile(profile[object Object]: Readonly<Profile>, changes[object Object]: Partial<Pick<Profile, "city" | "lessons">>): Profile {8    return {9        name: profile.nameAda,10        city: changes.city ?? profile.cityLondon,11        lessons: changes.lessons ?? profile.lessons2,12    };13}

  3. updated ← [object Object]

    15const newLessons: number = 1;16const base: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };17const updated→ [object Object]: Profile = updateProfile(base[object Object], { lessons: newLessons1 });1819console.log(`${updated.nameAda}:${updated.cityLondon}:${updated.lessons1}`);
    outputAda:London:1

  1. newLessons ← 8, base ← [object Object]

    12    };13}1415const newLessons→ 8: number = 8;16const base→ [object Object]: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };17const updated: Profile = updateProfile(base[object Object], { lessons: newLessons8 });

  2. function updateProfile(profile: Readonly<Profile>, changes: Partial<Pi…

    4    lessons: number;5};67function updateProfile(profile[object Object]: Readonly<Profile>, changes[object Object]: Partial<Pick<Profile, "city" | "lessons">>): Profile {8    return {9        name: profile.nameAda,10        city: changes.city ?? profile.cityLondon,11        lessons: changes.lessons ?? profile.lessons2,12    };13}

  3. updated ← [object Object]

    15const newLessons: number = 8;16const base: Readonly<Profile> = { name: "Ada", city: "London", lessons: 2 };17const updated→ [object Object]: Profile = updateProfile(base[object Object], { lessons: newLessons8 });1819console.log(`${updated.nameAda}:${updated.cityLondon}:${updated.lessons8}`);
    outputAda:London:8