What an Interface Is

In your real projects, you're never passing around a single word or number. You're passing around whole objects — a pet with a name, species, age, and owner. A user with an email, a role, a profile.

TypeScript lets you define the expected shape of those objects. That definition is called an interface.

interface Pet {
  name: string
  species: string
  age: number
  isVaccinated: boolean
}

Read it plainly: "Anything that calls itself a Pet in this codebase must have these four properties, and each one must be the type I specified."

Now when you create an actual pet somewhere in your app:

const myPet: Pet = {
  name: "Biscuit",
  species: "dog",
  age: 3,
  isVaccinated: true
}

TypeScript checks it against the interface. Every property present? Every type matching? No squiggle.

But if you accidentally did this:

const myPet: Pet = {
  name: "Biscuit",
  species: "dog",
  age: "three",   // ← this is a string, not a number
  isVaccinated: true
}

Red squiggle under age. The interface says number. You gave it a string. TypeScript caught it before it ever touched your database.

The blueprint relationship

The interface is the definition. It lives in one place — a types file or generated schema file. It holds no real data. It's just the blueprint.

The const is the instance. It lives in your component or page. It's actual, specific data — one particular pet, one particular user. When you put : Pet after the variable name, you're saying: check this real data against that blueprint.