Create Objects All At Once

Create Objects All at Once

Overview

Build objects in a single statement, not piece by piece.

TypeScript infers an object's type when it's created. Adding properties later causes type errors. Build complete objects in one go using object literals and spread syntax.

When to Use This Skill

• Creating objects step by step
• Adding properties after object creation
• Getting "property does not exist" errors
• Merging multiple objects

The Iron Rule

Define all properties in a single object literal.
Use spread syntax (...) to combine objects.

Remember:

• Object types are fixed at creation
• Type assertions are not the answer
• Object spread preserves type safety
• Each spread creates a new variable

Detection: Incremental Construction Fails

const pt = {};
pt.x = 3;
// ~ Property 'x' does not exist on type '{}'
pt.y = 4;
// ~ Property 'y' does not exist on type '{}'

TypeScript infers pt as {}, and you can't add properties to it.

The Type Assertion "Fix" (Problematic)

interface Point { x: number; y: number; }

const pt = {} as Point;  // Assertion silences errors
pt.x = 3;
pt.y = 4;

// But: TypeScript won't check you assigned all properties!
const pt2 = {} as Point;  // No error, but x and y are undefined

Type assertions bypass safety checks.

The Solution: Build All at Once

interface Point { x: number; y: number; }

const pt: Point = {
  x: 3,
  y: 4,
};
// TypeScript verifies all required properties are present

Combining Objects with Spread

Don't use Object.assign:

const pt = { x: 3, y: 4 };
const id = { name: 'Origin' };

const namedPoint = {};
Object.assign(namedPoint, pt, id);
namedPoint.name;
// ~~~~~ Property 'name' does not exist on type '{}'

Use spread syntax instead:

const pt = { x: 3, y: 4 };
const id = { name: 'Origin' };

const namedPoint = { ...pt, ...id };
//    ^? { name: string; x: number; y: number }
namedPoint.name;  // OK

Building Up Objects Safely

Use a new variable for each step:

const pt0 = {};
const pt1 = { ...pt0, x: 3 };
const pt: Point = { ...pt1, y: 4 };  // OK

// Each variable has a new, complete type

Conditional Properties

Add properties conditionally with spread:

declare let hasMiddle: boolean;

const firstLast = { first: 'Harry', last: 'Truman' };
const president = {
  ...firstLast,
  ...(hasMiddle ? { middle: 'S' } : {}),
};
//    ^? { middle?: string; first: string; last: string }

The conditional property becomes optional in the result type.

Multiple Conditional Properties

declare let hasDates: boolean;

const nameTitle = { name: 'Khufu', title: 'Pharaoh' };
const pharaoh = {
  ...nameTitle,
  ...(hasDates && { start: -2589, end: -2566 }),
};
//    ^? { start?: number; end?: number; name: string; title: string }

Both start and end are optional because they're conditionally added together.

Transforming Objects

When transforming data, use functional constructs:

// Don't build incrementally
const result: Record<string, number> = {};
for (const item of items) {
  result[item.name] = item.value;  // Works but less type-safe
}

// Do use Array methods
const result = Object.fromEntries(
  items.map(item => [item.name, item.value])
);

Real-World Example: Configuration Objects

interface Config {
  host: string;
  port: number;
  ssl?: boolean;
}

// Bad: incremental
const config = {} as Config;
config.host = 'localhost';  // Might forget port!

// Good: all at once
const config: Config = {
  host: 'localhost',
  port: 8080,
};

// Good: with conditional
const config: Config = {
  host: 'localhost',
  port: 8080,
  ...(useSSL && { ssl: true }),
};

Pressure Resistance Protocol

1. "I Need to Build It Dynamically"

Pressure: "Properties come from different sources"

Response: Collect all data first, then build the object.

Action: Use spread to combine: { ...source1, ...source2 }

2. "Type Assertion Works"

Pressure: "as Type fixes the error"

Response: It bypasses type checking. Missing properties won't be caught.

Action: Build complete objects; let TypeScript verify them.

Red Flags - STOP and Reconsider

• const obj = {} followed by property assignments
• Object.assign for building objects
• Type assertions (as) to silence "property does not exist" errors
• Adding properties to objects in loops

Common Rationalizations (All Invalid)

Quick Reference

// DON'T: Build incrementally
const obj = {};
obj.a = 1;  // Error

// DON'T: Use type assertion
const obj = {} as MyType;

// DO: Build all at once
const obj: MyType = { a: 1, b: 2 };

// DO: Combine with spread
const obj = { ...base, ...extra };

// DO: Conditional properties
const obj = { ...base, ...(cond && { opt: val }) };

The Bottom Line

Build objects completely in a single statement.

TypeScript types are fixed at creation. Use object literals to define all properties at once. Use spread syntax to combine objects and add conditional properties. Avoid type assertions.

Reference

Based on "Effective TypeScript" by Dan Vanderkam, Item 21: Create Objects All at Once.