Finally, Autocomplete You Can Trust: Describing Objects

What's in this object again?

In JavaScript, you work with objects all the time. But how often have you done this?

// some function that returns a user object
const user = getUser();

// ...later in the code...
console.log(user.nmae); // Typo! Should be 'name'
console.log(user.id);   // Was it 'id' or 'userId'? Or 'ID'?

You type user. and your editor gives you... nothing. A blank slate. You have to guess the property names, remember their exact spelling and capitalization, and hope you get it right. When you get it wrong, you get the dreaded TypeError: Cannot read properties of undefined at runtime, because you tried to access a property on a value that was undefined due to your typo.

This is arguably the single biggest source of daily frustration for JS developers. And this is where TypeScript delivers its most spectacular win.

How to Describe an Object's Shape with a type Alias

With TypeScript, you can describe the "shape" of an object ahead of time. The most common way to do this is with a type alias.

Think of it like a blueprint for an object. You're telling TypeScript, "Any object that claims to be a User must have these specific properties with these specific types."

Exercise 1: Get Perfect Autocomplete

1. We've defined a type alias called User.
2. In the newUser object, place your cursor after id: 1, and press Ctrl+Space (or Cmd+Space). Notice how the editor suggests name and isVerified for you.
3. Start typing n and press Enter to autocomplete name. Assign it a string value.
4. After the comma, press Ctrl+Space again. The editor now only suggests isVerified. Add that property and assign it a boolean value.

The moment you told TypeScript that newUser should be of type User (using : User), you unlocked perfect, reliable autocomplete. The guessing game is over.

Typos and Errors, Begone!

This isn't just about convenience. It's about correctness. TypeScript will now yell at you if you deviate from the blueprint.

Exercise 2: Find and Fix the Errors

1. The brokenUser object below has two errors. Red squiggles highlight them.
2. Hover over the first error on userId. TypeScript tells you that userId doesn't exist in the User type. The correct property is id.
3. Hover over the second error on isVerified. TypeScript tells you that you're trying to assign a string to a property that expects a boolean.
4. Fix both errors so that the brokenUser object correctly matches the User type.

type User = {
  id: number;
  name: string;
  isVerified: boolean;
};

// ✅ Correct!
const brokenUser: User = {
  id: 2,
  name: "SuperMario",
  isVerified: true,
};

By spending a few seconds defining the shape of your data, you've created a safety net that eliminates a huge category of common bugs. This is the core loop of working with TypeScript: describe your data's shape, then let the compiler help you use it correctly.