TypeScript Tutorial: Interfaces
Define object shapes with interfaces — the backbone of TypeScript's structural type system.
Defining an Interface
An interface describes the **shape** of an object:
```typescript
interface User {
id: number;
name: string;
email: string;
}
const user: User = {
id: 1,
name: "Alice",
email: "alice@example.com",
};
```
---
Optional Properties
Use `?` to mark a property as optional:
```typescript
interface Product {
id: number;
name: string;
description?: string; // optional
price: number;
}
const shirt: Product = { id: 1, name: "T-Shirt", price: 19.99 }; // ✓
const mug: Product = { id: 2, name: "Mug", description: "16oz", price: 12.99 }; // ✓
```
---
Readonly Properties
Prevent a property from being reassigned after creation:
```typescript
interface Config {
readonly apiUrl: string;
timeout: number;
}
const config: Config = { apiUrl: "https://api.example.com", timeout: 3000 };
config.timeout = 5000; // ✓ allowed
config.apiUrl = "..."; // ✗ Error: Cannot assign to 'apiUrl'
```
---
Function Types in Interfaces
```typescript
interface Calculator {
add(a: number, b: number): number;
multiply(a: number, b: number): number;
}
const calc: Calculator = {
add: (a, b) => a + b,
multiply: (a, b) => a * b,
};
```
---
Extending Interfaces
Interfaces can extend other interfaces to compose shapes:
```typescript
interface Animal {
name: string;
sound(): string;
}
interface Dog extends Animal {
breed: string;
}
const dog: Dog = {
name: "Rex",
breed: "Labrador",
sound: () => "Woof!",
};
```
---
Interface vs Type Alias
Both work for most cases. Key differences:
| | Interface | Type Alias |
|---|---|---|
| Extending | `extends` keyword | `&` intersection |
| Declaration merging | ✓ (multiple declarations merge) | ✗ |
| Primitives/unions | ✗ | ✓ |
Prefer `interface` for object shapes, `type` for unions and complex types.
---
What's Next?
Next: **Type Aliases and Union Types** — compose multiple types into one.
What you'll learn in this TypeScript interfaces tutorial
This interactive TypeScript tutorial has 13 hands-on exercises. Estimated time: 12 minutes.
- Interfaces define object shapes — An interface describes the shape an object must have. TypeScript checks every object against it at compile time.
- Optional properties — the ? modifier — Mark properties with `?` to make them optional. Inside functions, TypeScript knows they might be `undefined` and require…
- Readonly properties — immutable fields — `readonly` properties can only be set once (in the constructor or object literal). Mutating them after creation is a com…
- Interface extending — inherit and add — An interface can extend another, inheriting all its properties and adding new ones. This composes shapes without duplica…
- Multiple inheritance — extend several interfaces — TypeScript interfaces can extend multiple interfaces simultaneously, combining their shapes.
- Interface vs type alias — the differences — Both `interface` and `type` can describe object shapes. Key difference: interfaces support declaration merging, `type` s…
- Function interfaces — describe callable shapes — Interfaces can describe functions — their parameter types and return type. This creates reusable function type contracts…
- Index signatures — dynamic property names — Index signatures describe objects with dynamic keys. Use them for dictionaries, caches, and any object where keys aren't…
- Interfaces for class contracts — Classes can explicitly declare that they implement an interface. TypeScript verifies all interface methods are present.
- Discriminated union with interfaces — Multiple interfaces sharing a literal `type` (or `kind`) field create a discriminated union. TypeScript narrows to the r…
- Nested interfaces — complex data shapes — Interfaces can reference other interfaces, creating deeply typed data structures. TypeScript tracks types at every level…
- Generic interfaces — reusable type shapes — Interfaces can have type parameters, making them reusable across different data types. This is how standard library type…
- Interface declaration merging — TypeScript merges multiple interface declarations with the same name. This is how global type extensions work — adding p…
TypeScript Interfaces concepts covered
- Defining an Interface
- Optional Properties
- Readonly Properties
- Function Types in Interfaces
- Extending Interfaces
- Interface vs Type Alias
- What's Next?