Type Manipulation & Utility Types

The 50,000-Line Refactor With Zero Bugs

Friday morning. Product announced: "We're making all user fields optional for GDPR compliance. Users can delete any personal data."

I stared at our codebase: 50,000 lines. 217 components. 43 API endpoints. All assuming every User field was always present.

interface User {
  id: string;
  email: string;         // Now optional
  firstName: string;     // Now optional
  lastName: string;      // Now optional
  phoneNumber: string;   // Now optional
  address: string;       // Now optional
  birthDate: Date;       // Now optional
}

// Code everywhere like this:
function getUserFullName(user: User): string {
  return `${user.firstName} ${user.lastName}`;  // Will crash if undefined!
}

function sendEmail(user: User): void {
  mailService.send(user.email, 'Welcome!');  // Will crash if email deleted!
}

Manual refactoring would take weeks. I'd miss edge cases. Bugs would slip through.

Then I discovered TypeScript's utility types:

// Make everything optional except id
type PartialUser = Partial<User> & { id: string };

// Or be explicit about what's required
type MinimalUser = Pick<User, 'id'> & Partial<Omit<User, 'id'>>;

// Update all functions
function getUserFullName(user: PartialUser): string {
  const firstName = user.firstName ?? 'Unknown';
  const lastName = user.lastName ?? '';
  return `${firstName} ${lastName}`.trim();
}

function sendEmail(user: PartialUser): void {
  if (user.email) {
    mailService.send(user.email, 'Welcome!');
  }
}

I ran the TypeScript compiler. 1,847 type errors. Every place that assumed fields existed.

I fixed them systematically. Took 2 days instead of 2 weeks. Deployed to production.

Result: Zero runtime errors. The compiler caught every edge case.

This article covers the type manipulation tools that saved our GDPR refactor.

keyof Type Operator

Get all keys of a type as a union.

Basic keyof

interface User {
  id: string;
  name: string;
  email: string;
  age: number;
}

type UserKeys = keyof User;  // 'id' | 'name' | 'email' | 'age'

function getUserProperty(user: User, key: UserKeys): string | number {
  return user[key];
}

getUserProperty(user, 'name');     // ✓
getUserProperty(user, 'age');      // ✓
getUserProperty(user, 'invalid');  // ✗ Error

keyof with Generics

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = {
  id: '123',
  name: 'John',
  age: 30
};

const name = getProperty(user, 'name');  // Type: string
const age = getProperty(user, 'age');    // Type: number

typeof Type Operator

Get the type of a value.

Basic typeof

const user = {
  id: '123',
  name: 'John',
  email: '[email protected]'
};

type User = typeof user;
// Type: { id: string; name: string; email: string; }

const anotherUser: User = {
  id: '456',
  name: 'Jane',
  email: '[email protected]'
};

typeof with Functions

function createUser(name: string, email: string) {
  return {
    id: generateId(),
    name,
    email,
    createdAt: new Date()
  };
}

type User = ReturnType<typeof createUser>;
// Type: { id: string; name: string; email: string; createdAt: Date; }

typeof with Complex Values

const config = {
  api: {
    baseUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3
  },
  features: {
    analytics: true,
    darkMode: false
  }
} as const;

type Config = typeof config;
// Type preserves literal values with 'as const'

Indexed Access Types

Access property types using bracket notation.

Basic Indexed Access

interface User {
  id: string;
  name: string;
  email: string;
  settings: {
    theme: 'light' | 'dark';
    notifications: boolean;
  };
}

type UserName = User['name'];        // string
type UserSettings = User['settings']; // { theme: 'light' | 'dark'; notifications: boolean; }
type Theme = User['settings']['theme'];  // 'light' | 'dark'

Indexed Access with Unions

interface Product {
  id: string;
  name: string;
  price: number;
  stock: number;
}

type ProductStringFields = Product['id' | 'name'];  // string
type ProductNumberFields = Product['price' | 'stock'];  // number

Indexed Access with Arrays

const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number];  // 'red' | 'green' | 'blue'

type Users = User[];
type SingleUser = Users[number];  // User

Utility Types

TypeScript's built-in type manipulation tools.

Partial

Make all properties optional.

interface User {
  id: string;
  name: string;
  email: string;
  age: number;
}

type PartialUser = Partial<User>;
// { id?: string; name?: string; email?: string; age?: number; }

function updateUser(id: string, updates: Partial<User>): User {
  const user = getUser(id);
  return { ...user, ...updates };
}

updateUser('123', { name: 'Jane' });  // Only update name
updateUser('123', { name: 'Jane', email: '[email protected]' });  // Update multiple

Required

Make all properties required.

interface UserProfile {
  bio?: string;
  avatar?: string;
  socialLinks?: string[];
}

type CompleteProfile = Required<UserProfile>;
// { bio: string; avatar: string; socialLinks: string[]; }

function validateProfile(profile: CompleteProfile): boolean {
  // All fields guaranteed to exist
  return profile.bio.length > 0 &&
         profile.avatar.length > 0 &&
         profile.socialLinks.length > 0;
}

Readonly

Make all properties readonly.

interface Config {
  apiKey: string;
  endpoint: string;
  timeout: number;
}

type ImmutableConfig = Readonly<Config>;
// { readonly apiKey: string; readonly endpoint: string; readonly timeout: number; }

const config: ImmutableConfig = {
  apiKey: 'secret',
  endpoint: 'https://api.example.com',
  timeout: 5000
};

// config.apiKey = 'new-key';  // ✗ Error: Cannot assign to readonly property

Pick<T, K>

Select specific properties.

interface User {
  id: string;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
  updatedAt: Date;
}

type UserPublicInfo = Pick<User, 'id' | 'name' | 'email'>;
// { id: string; name: string; email: string; }

function getUserPublicProfile(user: User): UserPublicInfo {
  return {
    id: user.id,
    name: user.name,
    email: user.email
  };
}

Omit<T, K>

Exclude specific properties.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: string; name: string; email: string; createdAt: Date; updatedAt: Date; }

function sanitizeUser(user: User): UserWithoutPassword {
  const { password, ...sanitized } = user;
  return sanitized;
}

Record<K, T>

Create object type with specific keys and value type.

type Role = 'admin' | 'user' | 'guest';

type RolePermissions = Record<Role, string[]>;
// { admin: string[]; user: string[]; guest: string[]; }

const permissions: RolePermissions = {
  admin: ['read', 'write', 'delete'],
  user: ['read', 'write'],
  guest: ['read']
};

// All keys must be present
// const incomplete: RolePermissions = {
//   admin: ['read', 'write'],
//   user: ['read']
//   // ✗ Error: Missing 'guest'
// };

Exclude<T, U>

Remove types from union.

type Status = 'idle' | 'loading' | 'success' | 'error';

type NonIdleStatus = Exclude<Status, 'idle'>;
// 'loading' | 'success' | 'error'

type StringOrNumber = string | number | boolean;
type OnlyStringOrNumber = Exclude<StringOrNumber, boolean>;
// string | number

Extract<T, U>

Extract types from union.

type Status = 'idle' | 'loading' | 'success' | 'error';

type SuccessOrError = Extract<Status, 'success' | 'error'>;
// 'success' | 'error'

type Mixed = string | number | (() => void);
type OnlyFunctions = Extract<Mixed, Function>;
// () => void

NonNullable

Remove null and undefined from union.

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;
// string

function processValue(value: MaybeString): void {
  if (value) {
    const str: NonNullable<MaybeString> = value;  // Narrows to string
    console.log(str.toUpperCase());
  }
}

ReturnType

Get function return type.

function createUser(name: string, email: string) {
  return {
    id: generateId(),
    name,
    email,
    createdAt: new Date()
  };
}

type User = ReturnType<typeof createUser>;
// { id: string; name: string; email: string; createdAt: Date; }

function saveUser(user: User): void {
  // Type is inferred from createUser's return type
  database.save(user);
}

Parameters

Get function parameter types as tuple.

function updateUser(id: string, name: string, email: string): void {
  // Implementation
}

type UpdateUserParams = Parameters<typeof updateUser>;
// [string, string, string]

function logUpdate(...args: UpdateUserParams): void {
  const [id, name, email] = args;
  console.log(`Updating user ${id}: ${name} (${email})`);
  updateUser(...args);
}

Mapped Types

Transform properties of existing types.

Basic Mapped Type

type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

interface User {
  id: string;
  name: string;
  email: string;
}

type NullableUser = Nullable<User>;
// { id: string | null; name: string | null; email: string | null; }

Mapped Type with Readonly

type ReadonlyMap<T> = {
  readonly [K in keyof T]: T[K];
};

type ImmutableUser = ReadonlyMap<User>;
// { readonly id: string; readonly name: string; readonly email: string; }

Mapped Type with Optional

type OptionalMap<T> = {
  [K in keyof T]?: T[K];
};

type PartialUser = OptionalMap<User>;
// { id?: string; name?: string; email?: string; }

Removing Modifiers

type Mutable<T> = {
  -readonly [K in keyof T]: T[K];
};

type RequiredFields<T> = {
  [K in keyof T]-?: T[K];
};

interface PartialConfig {
  readonly apiKey?: string;
  readonly endpoint?: string;
}

type MutableConfig = Mutable<RequiredFields<PartialConfig>>;
// { apiKey: string; endpoint: string; }  (not readonly, not optional)

Conditional Types

Types that select based on conditions.

Basic Conditional Type

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;   // true
type B = IsString<number>;   // false
type C = IsString<'hello'>;  // true

Conditional with Union

type ToArray<T> = T extends any ? T[] : never;

type StringArray = ToArray<string>;          // string[]
type NumberOrStringArray = ToArray<string | number>;  // string[] | number[]

infer Keyword

Extract types within conditional types.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type A = UnwrapPromise<Promise<string>>;  // string
type B = UnwrapPromise<string>;            // string
type C = UnwrapPromise<Promise<number[]>>; // number[]

Nested infer

type UnwrapArray<T> = T extends (infer U)[] ? U : T;

type A = UnwrapArray<string[]>;    // string
type B = UnwrapArray<number[][]>;  // number[]
type C = UnwrapArray<string>;      // string

Template Literal Types

String manipulation at the type level.

Basic Template Literal

type Greeting = `Hello, ${string}`;

const greeting1: Greeting = 'Hello, World';  // ✓
const greeting2: Greeting = 'Hello, TypeScript';  // ✓
// const greeting3: Greeting = 'Hi, there';  // ✗ Error

Template Literal with Union

type EventName = 'click' | 'focus' | 'blur';
type EventListener = `on${Capitalize<EventName>}`;
// 'onClick' | 'onFocus' | 'onBlur'

interface Events {
  onClick: () => void;
  onFocus: () => void;
  onBlur: () => void;
}

Complex Template Literals

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type ApiRoute = '/users' | '/products' | '/orders';
type ApiEndpoint = `${HttpMethod} ${ApiRoute}`;
// 'GET /users' | 'GET /products' | 'GET /orders' | 'POST /users' | ...

function callApi(endpoint: ApiEndpoint): void {
  console.log(`Calling: ${endpoint}`);
}

callApi('GET /users');     // ✓
callApi('POST /products'); // ✓
// callApi('GET /invalid');  // ✗ Error

Real-World Patterns

1. Deep Partial

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

interface Config {
  database: {
    host: string;
    port: number;
    credentials: {
      username: string;
      password: string;
    };
  };
  cache: {
    enabled: boolean;
    ttl: number;
  };
}

type PartialConfig = DeepPartial<Config>;
// All nested properties are optional

const config: PartialConfig = {
  database: {
    credentials: {
      username: 'admin'
      // password is optional
    }
    // host and port are optional
  }
  // cache is optional
};

2. Type-Safe Event Emitter

type EventMap = {
  'user:login': { userId: string; timestamp: Date };
  'user:logout': { userId: string };
  'product:purchased': { productId: string; userId: string; amount: number };
};

class TypedEventEmitter<T extends Record<string, any>> {
  private listeners: {
    [K in keyof T]?: Array<(data: T[K]) => void>;
  } = {};
  
  on<K extends keyof T>(event: K, listener: (data: T[K]) => void): void {
    if (!this.listeners[event]) {
      this.listeners[event] = [];
    }
    this.listeners[event]!.push(listener);
  }
  
  emit<K extends keyof T>(event: K, data: T[K]): void {
    const eventListeners = this.listeners[event];
    if (eventListeners) {
      eventListeners.forEach(listener => listener(data));
    }
  }
}

const emitter = new TypedEventEmitter<EventMap>();

emitter.on('user:login', data => {
  console.log(`User ${data.userId} logged in at ${data.timestamp}`);
});

emitter.emit('user:login', {
  userId: '123',
  timestamp: new Date()
});

// emitter.emit('user:login', { userId: '123' });  // ✗ Error: Missing timestamp

3. Builder Pattern with Type State

interface BuilderState {
  hasEmail: boolean;
  hasName: boolean;
}

class UserBuilder<S extends BuilderState = { hasEmail: false; hasName: false }> {
  private data: Partial<User> = {};
  
  setEmail(email: string): UserBuilder<S & { hasEmail: true }> {
    this.data.email = email;
    return this as any;
  }
  
  setName(name: string): UserBuilder<S & { hasName: true }> {
    this.data.name = name;
    return this as any;
  }
  
  build(this: UserBuilder<{ hasEmail: true; hasName: true }>): User {
    return {
      id: generateId(),
      email: this.data.email!,
      name: this.data.name!,
      createdAt: new Date()
    };
  }
}

const builder = new UserBuilder();

// builder.build();  // ✗ Error: Missing email and name

const user = builder
  .setEmail('[email protected]')
  .setName('John')
  .build();  // ✓ Now it works

Common Mistakes I Made

1. Overusing Utility Types

Bad:

type UserData = Partial<Pick<Omit<User, 'password'>, 'id' | 'name' | 'email'>>;
// Too complex!

Good:

type UserData = {
  id?: string;
  name?: string;
  email?: string;
};
// Clear and simple

2. Not Using Const Assertions

Bad:

const colors = ['red', 'green', 'blue'];
type Color = typeof colors[number];  // string (not specific)

Good:

const colors = ['red', 'green', 'blue'] as const;
type Color = typeof colors[number];  // 'red' | 'green' | 'blue'

3. Forgetting Distribution in Conditional Types

Bad:

type ToArray<T> = T[];

type Result = ToArray<string | number>;  // (string | number)[]
// Not what we wanted!

Good:

type ToArray<T> = T extends any ? T[] : never;

type Result = ToArray<string | number>;  // string[] | number[]
// Distributes over union!

Your Challenge

Build a type-safe form validation library:

// TODO: Define these types

interface FieldValidation<T> {
  required?: boolean;
  minLength?: number;
  maxLength?: number;
  pattern?: RegExp;
  custom?: (value: T) => boolean;
}

type FormSchema = Record<string, FieldValidation<any>>;

type FormData<T extends FormSchema> = {
  [K in keyof T]: string;  // Simplify to string for now
};

type FormErrors<T extends FormSchema> = Partial<Record<keyof T, string>>;

// TODO: Build a validator that:
// 1. Takes a schema
// 2. Validates form data
// 3. Returns type-safe errors

function validateForm<T extends FormSchema>(
  schema: T,
  data: FormData<T>
): FormErrors<T> {
  // Implementation
}

// Usage:
const userSchema = {
  email: {
    required: true,
    pattern: /^[^@]+@[^@]+\.[^@]+$/
  },
  name: {
    required: true,
    minLength: 2,
    maxLength: 50
  },
  age: {
    custom: (value: string) => parseInt(value) >= 18
  }
} satisfies FormSchema;

const errors = validateForm(userSchema, {
  email: 'invalid-email',
  name: 'J',
  age: '15'
});

// errors should be typed as:
// { email?: string; name?: string; age?: string; }

// Requirements:
// 1. Type-safe schema definition
// 2. Type-safe form data based on schema
// 3. Type-safe error messages
// 4. Use utility types (Partial, Record, keyof)
// 5. Bonus: Use mapped types for required fields

Key Takeaways

keyof - get all keys as union type
typeof - get type from value
Indexed access - extract property types
Utility types - Partial, Required, Pick, Omit, Record, etc.
Mapped types - transform object properties
Conditional types - select types based on conditions
Template literals - type-level string manipulation
Keep it simple - don't over-complicate types

What I Learned

The GDPR refactor taught me: type manipulation is a force multiplier.

Without utility types:

// Would have to manually update 217 component interfaces
// Would have to manually check 43 API endpoints
// Would have missed edge cases
// Would have taken 2 weeks minimum

With utility types:

type PartialUser = Partial<User> & { id: string };
// Compiler shows 1,847 places that need updating
// Fix them systematically in 2 days
// Zero runtime errors

The compiler became my refactoring partner. 1,847 type errors weren't failures – they were a comprehensive checklist of every place that needed attention.

Every error fixed was a prevented bug. Every type manipulation was automated code review.

TypeScript's type system didn't just check my code – it guided my refactor.

The lesson: advanced types aren't about showing off. They're about leveraging the compiler to do the grunt work.

Map 50 fields to optional? Write one type. Transform 100 API responses? Write one utility. The compiler applies it everywhere.

Type manipulation is how you make the impossible possible and the complex manageable.

Next: Classes and OOP

In the next article, we'll explore TypeScript's class features and object-oriented programming. You'll learn how access modifiers caught a critical security vulnerability before it reached production.

PreviousGenerics NextClasses and OOP

Last updated 1 month ago

hashtagThe 50,000-Line Refactor With Zero Bugs

hashtagkeyof Type Operator

hashtagBasic keyof

hashtagkeyof with Generics

hashtagtypeof Type Operator

hashtagBasic typeof

hashtagtypeof with Functions

hashtagtypeof with Complex Values

hashtagIndexed Access Types

hashtagBasic Indexed Access

hashtagIndexed Access with Unions

hashtagIndexed Access with Arrays

hashtagUtility Types

hashtagPartial

hashtagRequired

hashtagReadonly

hashtagPick<T, K>

hashtagOmit<T, K>

hashtagRecord<K, T>

hashtagExclude<T, U>

hashtagExtract<T, U>

hashtagNonNullable

hashtagReturnType

hashtagParameters

hashtagMapped Types

hashtagBasic Mapped Type

hashtagMapped Type with Readonly

hashtagMapped Type with Optional

hashtagRemoving Modifiers

hashtagConditional Types

hashtagBasic Conditional Type

hashtagConditional with Union

hashtaginfer Keyword

hashtagNested infer

hashtagTemplate Literal Types

hashtagBasic Template Literal

hashtagTemplate Literal with Union

hashtagComplex Template Literals

hashtagReal-World Patterns

hashtag1. Deep Partial

hashtag2. Type-Safe Event Emitter

hashtag3. Builder Pattern with Type State

hashtagCommon Mistakes I Made

hashtag1. Overusing Utility Types

hashtag2. Not Using Const Assertions

hashtag3. Forgetting Distribution in Conditional Types

hashtagYour Challenge

hashtagKey Takeaways

hashtagWhat I Learned

The 50,000-Line Refactor With Zero Bugs

keyof Type Operator

Basic keyof

keyof with Generics

typeof Type Operator

Basic typeof

typeof with Functions

typeof with Complex Values

Indexed Access Types

Basic Indexed Access

Indexed Access with Unions

Indexed Access with Arrays

Utility Types

Partial

Required

Readonly

Pick<T, K>

Omit<T, K>

Record<K, T>

Exclude<T, U>

Extract<T, U>

NonNullable

ReturnType

Parameters

Mapped Types

Basic Mapped Type

Mapped Type with Readonly

Mapped Type with Optional

Removing Modifiers

Conditional Types

Basic Conditional Type

Conditional with Union

infer Keyword

Nested infer

Template Literal Types

Basic Template Literal

Template Literal with Union

Complex Template Literals

Real-World Patterns

1. Deep Partial

2. Type-Safe Event Emitter

3. Builder Pattern with Type State

Common Mistakes I Made

1. Overusing Utility Types

2. Not Using Const Assertions

3. Forgetting Distribution in Conditional Types

Your Challenge

Key Takeaways

What I Learned