Interfaces in TypeScript

Analogy categoryAnalogies

1. Introduction

An interface in TypeScript is a way to describe the shape of an object: the names of its properties, their types, and the signatures of any methods it must have. Interfaces do not exist at runtime — they are purely a compile-time construct used by the type checker and are erased when TypeScript compiles to JavaScript. They let you declare 'any object with these properties is acceptable' without caring how that object was created.

🏏

Cricket analogy: An interface is like a selection panel's written criteria for an opening batter that exists only on the meeting whiteboard and vanishes once the toss happens; any player meeting the criteria is acceptable regardless of background.

2. Syntax

typescript

interface User {
  id: number;
  name: string;
  isActive: boolean;
  greet(message: string): string;
}

const user: User = {
  id: 1,
  name: "Ada",
  isActive: true,
  greet(message) {
    return `${message}, ${this.name}!`;
  },
};

3. Explanation

TypeScript uses structural typing (sometimes called 'duck typing') rather than nominal typing. This means a value satisfies an interface if it has all the required properties with compatible types — it does not need to explicitly declare implements User. If it walks like a User and quacks like a User, TypeScript treats it as a User. This is different from languages like Java or C#, where a class must explicitly implement an interface to be assignable to it.

🏏

Cricket analogy: TypeScript judges a wicketkeeper purely by whether someone can catch behind the stumps and stand up to spin, not by whether they were officially trained as one — if they walk like a keeper and catch like a keeper, they're treated as a keeper.

Because interfaces are structural, two completely unrelated object literals or classes can both satisfy the same interface as long as their shapes match. This makes interfaces extremely flexible for describing plain data objects, function parameters, and API responses without forcing a class hierarchy on your code.

🏏

Cricket analogy: Two completely unrelated players — one from a rural academy, one from an elite boarding school — can both satisfy the opening batter criteria as long as their technique matches, no shared coaching lineage required.

Gotcha: Interfaces support 'declaration merging' — if you declare an interface with the same name more than once in the same scope, TypeScript merges all the members into a single interface rather than throwing a duplicate-identifier error. This is unique to interfaces; type aliases cannot be declared twice with the same name.

4. Example

typescript

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

// No 'implements Point' anywhere — structural typing accepts this.
function printPoint(p: Point): void {
  console.log(`(${p.x}, ${p.y})`);
}

const rawObject = { x: 10, y: 20, label: "origin-ish" };
printPoint(rawObject); // extra 'label' property is fine on an existing variable

// Declaration merging: reopening the interface adds a member.
interface Point {
  z?: number;
}

const point3D: Point = { x: 1, y: 2, z: 3 };
console.log(point3D);

5. Output

text

(10, 20)
{ x: 1, y: 2, z: 3 }

6. Key Takeaways

An interface describes the shape of an object: property names, types, and method signatures.
TypeScript uses structural typing — any object matching the shape satisfies the interface, no explicit 'implements' needed for object literals.
Interfaces are erased at compile time; they produce no JavaScript output.
Interfaces support declaration merging: redeclaring the same interface name adds members to it.
Interfaces are the preferred tool for describing object and class contracts in idiomatic TypeScript.

Practice what you learned

1. What happens when you declare `interface Box { width: number }` twice in the same scope with different members each time?

2. Why does TypeScript allow passing an object that never declares 'implements User' to a function expecting a User interface?

3. What happens to interface declarations when TypeScript compiles to JavaScript?

4. Which of the following can an interface describe?

5. In the example, why did passing `rawObject` (which has an extra `label` property) to `printPoint(p: Point)` succeed?

Was this page helpful?

interface vs type in TypeScript

Related Study Notes in Programming

Browse all study notes

Programming

Apache Spark Study Notes

Programming · 30 topics

Programming

Apache Flink Study Notes

Programming · 30 topics

Programming

Hadoop Study Notes

Programming · 30 topics

Programming

Snowflake Study Notes

Programming · 30 topics

Programming

Apache Airflow Study Notes

Programming · 30 topics

Programming

dbt (Data Build Tool) Study Notes

Programming · 30 topics

Topics covered

#TypeScript#TypeScriptProgrammingStudyNotes#Programming#InterfacesInTypeScript#Interfaces#Syntax#Explanation#Example#StudyNotes#SkillVeris

1. Introduction

2. Syntax

3. Explanation

4. Example

5. Output

6. Key Takeaways

Practice what you learned

You May Also Like

Related Reading

Related Study Notes in Programming

Topics covered