Interfaces and Object Types
Describe object shapes with interface and type, extend interfaces, use optional properties with ?, and readonly for immutability.
Interfaces and Object Types is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
interface vs type
Both interface and type describe object shapes. The key difference: interfaces can be merged (declaration merging) and are generally preferred for defining public API shapes. type aliases are more flexible for complex types.
// interface:
interface User {
id: number;
name: string;
}
// type alias (equivalent for objects):
type User = {
id: number;
name: string;
};Defining an Interface
Use interface to define the shape of an object. All properties are required by default. Separate properties with semicolons.
interface Product {
id: number;
name: string;
price: number;
description: string;
inStock: boolean;
category: string;
}Optional and Readonly Properties
Mark properties optional with ?. Use readonly to prevent mutation. Readonly enforces immutability at compile time.
interface Config {
host: string;
port?: number; // optional: number | undefined
readonly apiKey: string; // can't change after assignment
}
const config: Config = { host: 'localhost', apiKey: 'abc' };
config.port = 8080; // OK
config.apiKey = 'new'; // Error: readonlyExtending Interfaces
Use extends to create a new interface that includes all properties of another. Multiple inheritance is supported.
interface Animal {
name: string;
sound(): string;
}
interface Dog extends Animal {
breed: string;
fetch(): void;
}
interface ServiceDog extends Dog {
task: string;
}Index Signatures — Dynamic Keys
When you don't know property names upfront but know their value types, use an index signature.
interface StringMap {
[key: string]: string;
}
const headers: StringMap = {
'Content-Type': 'application/json',
'Authorization': 'Bearer token123'
};
// Also for translating:
interface Translations {
[locale: string]: { [key: string]: string };
}Function Types in Interfaces
Define method signatures inside an interface — both the shorthand and full property syntax work.
interface Logger {
log(message: string): void;
warn(message: string): void;
error(message: string, err?: Error): void;
}
// Also valid:
interface Logger2 {
log: (message: string) => void;
}Implementing Interfaces in Classes
A class can implement one or more interfaces. TypeScript verifies the class provides all required members.
interface Serialisable {
serialise(): string;
deserialise(data: string): this;
}
class User implements Serialisable {
constructor(public name: string) {}
serialise() { return JSON.stringify({ name: this.name }); }
deserialise(data: string) {
const obj = JSON.parse(data);
return new User(obj.name) as this;
}
}Declaration Merging
Multiple interface declarations with the same name are merged into one. Useful for extending third-party types. Type aliases do not support this.
interface Window {
myPlugin: { version: string };
}
// Now window.myPlugin is typed everywhereNested Object Types
Interface properties can themselves have object types — either inline or via reference to another interface.
interface Order {
id: string;
customer: {
name: string;
email: string;
};
items: Array<{
productId: string;
quantity: number;
price: number;
}>;
total: number;
}Structural Typing — Duck Typing
TypeScript uses structural typing: a value satisfies a type if it has at least the required properties. No need for explicit implements. Any object with the right shape is compatible.
interface Named {
name: string;
}
function greet(obj: Named) {
console.log(`Hello, ${obj.name}!`);
}
// No 'implements Named' needed:
greet({ name: 'Alice', age: 30 }); // OK — has the name propertyDiscriminated Unions with Interfaces
Add a literal type discriminant property to differentiate variants in a union. TypeScript narrows the type in switch/if based on the discriminant.
interface Circle { kind: 'circle'; radius: number; }
interface Square { kind: 'square'; side: number; }
type Shape = Circle | Square;
function area(shape: Shape): number {
switch (shape.kind) {
case 'circle': return Math.PI * shape.radius ** 2;
case 'square': return shape.side ** 2;
}
}Quick Check
What is the key difference between interface and type in TypeScript?
Recap: Interfaces
interface describes object shapes with required, optional, and readonly properties. Extend interfaces with extends. Index signatures for dynamic keys. Classes implement interfaces. Declaration merging is unique to interfaces. TypeScript uses structural typing — shape is what matters, not explicit declaration.
Frequently asked questions
Is the “Interfaces and Object Types” lesson free?
Yes — the full text of “Interfaces and Object Types” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Interfaces and Object Types”?
Describe object shapes with interface and type, extend interfaces, use optional properties with ?, and readonly for immutability. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Interfaces and Object Types” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.