TypeScript Type Aliases and Interfaces
TypeScript allows types to be defined separately from the variables that use them.
Aliases and Interfaces allows types to be easily shared between different variables/objects.
Type Aliases
Type Aliases allow defining types with a custom name (an Alias).
Type Aliases can be used for primitives like string or more complex types such as objects and arrays:
Example
type CarYear = number
type CarType = string
type CarModel = string
type Car = {
year: CarYear,
type: CarType,
model: CarModel
}
const carYear: CarYear = 2001
const carType: CarType = "Toyota"
const carModel: CarModel = "Corolla"
const car: Car = {
year: carYear,
type: carType,
model: carModel
};
Try it Yourself »
Example: Union and Intersection Types
type Animal = { name: string };
type Bear = Animal & { honey: boolean };
const bear: Bear = { name: "Winnie", honey: true };
type Status = "success" | "error";
let response: Status = "success";
Interfaces
Interfaces are similar to type aliases, except they only apply to object types.
Example
interface Rectangle {
height: number,
width: number
}
const rectangle: Rectangle = {
height: 20,
width: 10
};
Try it Yourself »
Example: Interface Merging
interface Animal { name: string; }
interface Animal { age: number; }
const dog: Animal = { name: "Fido", age: 5 };
Type vs Interface: Key Differences
- Extending: Both can be extended, but interfaces support declaration merging.
- Unions/Intersections: Only type aliases support union and intersection types.
- Implements: Classes can implement either.
- Recommendation: Use
interfacefor objects,typefor everything else.
Best Practices:
- Use
interfacefor defining object shapes and public APIs. - Use
typefor unions, intersections, and primitives. - Favor composition over inheritance for types.
- Document your types and interfaces for clarity.
Common Pitfalls:
- Using
typewhen you need declaration merging (useinterface). - Overcomplicating types—keep them simple and focused.
- Forgetting to update types/interfaces as code evolves.
Extending Interfaces
Interfaces can extend each other's definition.
Extending an interface means you are creating a new interface with the same properties as the original, plus something new.
Example
interface Rectangle {
height: number,
width: number
}
interface ColoredRectangle extends Rectangle {
color: string
}
const coloredRectangle: ColoredRectangle = {
height: 20,
width: 10,
color: "red"
};
Try it Yourself »
