How to Create an Interface in TypeScript

What you’ll build or solve

You’ll create a basic interface and then extend it to reuse structure across related types. By the end, you’ll know how to define interfaces correctly and organize object shapes in larger projects.

When this approach works best

This method works best when:

• You want to model structured data like users, products, or API responses.
• You need consistent object shapes across multiple files.
• You want to reuse and extend shared structure cleanly.

This is not ideal for defining unions of primitives such as "pending" | "approved". For that, use a type alias.

Prerequisites

• TypeScript installed
• Basic understanding of objects

You should be able to run:

tsc-v

Step-by-step instructions

Step 1: Create a basic interface

Use the interface keyword followed by a name and a block of properties.

interfaceUser {
  id:number;
  name:string;
  email:string;
}

Each property includes a name and a type. All properties are required by default.

You can define optional properties using ?:

interfaceProfile {
  username:string;
  bio?:string;
}

You can also define readonly properties:

interfaceConfig {
readonly apiKey:string;
}

What to look for

• Missing required properties trigger compile errors.
• Optional properties can be omitted.
• readonly properties cannot be reassigned after creation.
• Keep interface definitions focused on structure only. Avoid mixing logic inside them.

Step 2: Extend an interface

Use extends to build on top of an existing interface.

interfacePerson {
  name:string;
}

interfaceEmployeeextendsPerson {
  employeeId:number;
}

Employee now includes both name and employeeId.

You can extend multiple interfaces:

interfaceAddress {
  city:string;
  country:string;
}

interfaceCustomerextendsPerson, Address {
  id:number;
}

This combines properties from all parent interfaces.

What to look for

• Extended interfaces include all inherited properties.
• Type conflicts between parent interfaces cause errors.
• Child interfaces can add new properties but must respect parent types.
• This pattern helps you avoid repeating shared fields across similar models.

Examples you can copy

These examples show how created interfaces are typically applied in real projects.

Example 1: Basic object structure

interfaceProduct {
  id:number;
  title:string;
  price:number;
}

constproduct:Product= {
  id:1,
  title:"Laptop",
  price:999,
};

Example 2: Interface for function parameters

interfaceLoginData {
  email:string;
  password:string;
}

functionlogin(data:LoginData) {
console.log(data.email);
}

Example 3: Interface with arrays

interfaceTask {
  id:number;
  title:string;
  completed:boolean;
}

consttasks:Task[]= [
  { id:1, title:"Learn TypeScript", completed:false },
  { id:2, title:"Write code", completed:true },
];

These examples demonstrate how interfaces enforce consistent structure across different parts of your code.

Common mistakes and how to fix them

Mistake 1: Adding properties not defined in the interface

What someone might do:

interfaceUser {
  id:number;
  name:string;
}

constuser:User= {
  id:1,
  name:"Sam",
  age:30,
};

Why it breaks:

age is not defined in the interface.

Correct approach:

interfaceUser {
  id:number;
  name:string;
  age?:number;
}

Add the property to the interface if it belongs there.

Mistake 2: Forgetting required properties

What someone might do:

interfaceUser {
  id:number;
  name:string;
  email:string;
}

constuser:User= {
  id:1,
  name:"Sam",
};

Why it breaks:

email is required.

Correct approach:

Provide all required properties or mark them optional.

Mistake 3: Using interface for unions

What someone might do:

interfaceStatus="pending"|"approved";

Why it fails:

Interfaces describe object shapes, not unions.

Correct approach:

typeStatus="pending"|"approved";

Use type when defining unions.

Troubleshooting

If TypeScript reports that a property does not exist, confirm it is declared in the interface with the correct spelling.

If extending multiple interfaces causes conflicts, check for properties with the same name but different types.

If you see duplicate identifier errors, confirm you are not declaring the same interface name twice in the same scope.

If changes do not take effect, recompile using tsc.

Quick recap

• Use interface to define object shapes.
• Required properties must be provided.
• Use ? for optional properties and readonly for immutable ones.
• Use extends to reuse structure across related interfaces.
• Use type instead of interface for unions.