Loading lesson path
TypeScript allows types to be defined separately from the variables that use them.
Formula
Aliases and Interfaces allows types to be easily shared between different variables/objects.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
};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 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
};Example: Interface Merging interface Animal { name: string; }
interface Animal { age: number; }
const dog: Animal = { name: "Fido", age: 5 };Both can be extended, but interfaces support declaration merging.
Only type aliases support union and intersection types.
Classes can implement either.
Use interface for objects, type for everything else.Use interface for defining object shapes and public APIs.Use type for unions, intersections, and primitives. Favor composition over inheritance for types. Document your types and interfaces for clarity.
Using type when you need declaration merging (use interface ).
Formula
Overcomplicating types - keep them simple and focused.
Forgetting to update types/interfaces as code evolves.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"
};