Frontend Engineering | VoidX Academy

9. Objects & Type Aliases

Defining Complex Structures

Primitives (strings, numbers) and arrays are simple. But real-world applications run on complex objects. A "User" has a name, an email, an age, and a role. We must define the exact "blueprint" of these objects so TypeScript can enforce their structure across our entire codebase.

Inline Object Typing

You can define the shape of an object directly inline next to the variable declaration. This works, but it becomes incredibly messy if you have multiple objects with the same shape.

// Defining the shape directly inline let basicUser: { name: string; age: number } = {
  name: "Prince",
  age: 20
};

// If we forget the 'age' property, TS throws an error immediately.
// let brokenUser: { name: string; age: number } = { name: "Alice" }; // ERROR

The Magic of Type Aliases

Instead of writing out the shape every single time, we use the type keyword to create a custom name for our specific object shape. This creates a reusable blueprint.

// 1. We create the blueprint (usually capitalized by convention)
type User = {
  name: string;
  age: number;
  role: string;
};

// 2. We apply the blueprint to variables
const currentUser: User = {
  name: "John Doe",
  age: 20,
  role: "Admin"
};

const newEmployee: User = {
  name: "John Doe",
  age: 25,
  role: "Editor"
};

Optional Properties

In the real world, not all data is mandatory. A user might not want to provide a phone number. If we define the type strictly, TypeScript will error if the phone number is missing. We fix this using the Optional modifier ?.

type Customer = {
  id: string;
  name: string;
  email: string;
  phoneNumber?: string; // The question mark makes this optional!
};

// This is perfectly valid because phoneNumber is optional
const customerOne: Customer = {
  id: "c-001",
  name: "Alice",
  email: "alice@example.com"
};

Structural Typing (Duck Typing)

TypeScript uses a concept called "Structural Typing" (often called Duck Typing: if it walks like a duck and quacks like a duck, it's a duck). TypeScript doesn't care how an object was created; it only cares if the object has the correct properties (the structure) required by the type.

type Point = { x: number; y: number };

function logPoint(p: Point) {
  console.log(`X: ${p.x}, Y: ${p.y}`);
}

// We didn't explicitly label this as a 'Point', but because it has 'x' and 'y' numbers, TS accepts it!
const rawObj = { x: 12, y: 26 };
logPoint(rawObj); // Completely valid.

Knowledge Check

Ready to test your understanding of 9. Objects & Type Aliases?

8. Arrays & Tuples

10. Functions