TypeScript Type Aliases
Create custom names for any type
🏷️ What are Type Aliases?
Type aliases let you create custom names for types, making complex types easier to read and reuse. Use the 'type' keyword to define aliases for primitives, unions, tuples, objects, and more.
// Simple type alias
type Username = string;
type Age = number;
let user: Username = "john_doe";
let userAge: Age = 25;
Common Type Alias Uses
Primitive Aliases
Name basic types
type ID = string;
type Count = number;
type IsActive = boolean;Union Types
Combine multiple types
type Status =
"active" | "inactive";
type Result =
string | number;Object Types
Define object shapes
type User = {
name: string;
age: number;
};Function Types
Type function signatures
type Callback =
(data: string) => void;🔹 Basic Type Aliases
Create simple aliases for primitive types:
type Email = string;
type Price = number;
type IsAvailable = boolean;
let userEmail: Email = "[email protected]";
let productPrice: Price = 99.99;
let inStock: IsAvailable = true;
console.log(`Email: ${userEmail}`);
console.log(`Price: $${productPrice}`);
console.log(`In Stock: ${inStock}`);Output:
🔹 Object Type Aliases
Define reusable object structures:
type Person = {
name: string;
age: number;
email: string;
};
let employee: Person = {
name: "Alice",
age: 30,
email: "[email protected]"
};
console.log(`${employee.name} is ${employee.age} years old`);Output:
Alice is 30 years old
🔹 Union Type Aliases
Combine multiple types into one:
type StringOrNumber = string | number;
type Status = "pending" | "approved" | "rejected";
let value: StringOrNumber = "hello";
value = 42; // Also valid
let orderStatus: Status = "pending";
function displayValue(val: StringOrNumber) {
console.log(`Value: ${val}`);
}
displayValue("TypeScript");
displayValue(100);Output:
Value: TypeScript
Value: 100
🔹 Function Type Aliases
Define function signatures as types:
type MathOperation = (a: number, b: number) => number;
type Logger = (message: string) => void;
const add: MathOperation = (a, b) => a + b;
const multiply: MathOperation = (a, b) => a * b;
const log: Logger = (msg) => console.log(msg);
console.log(add(5, 3));
console.log(multiply(4, 7));
log("Function types are useful!");Output:
8
28
Function types are useful!
🔹 Tuple Type Aliases
Create named tuple types:
type Coordinate = [number, number];
type RGB = [number, number, number];
let point: Coordinate = [10, 20];
let color: RGB = [255, 128, 0];
console.log(`Point: (${point[0]}, ${point[1]})`);
console.log(`Color: rgb(${color[0]}, ${color[1]}, ${color[2]})`);Output:
Point: (10, 20)
Color: rgb(255, 128, 0)
🔹 Intersection Types
Combine multiple types using &:
type Name = {
firstName: string;
lastName: string;
};
type Contact = {
email: string;
phone: string;
};
type Employee = Name & Contact;
let worker: Employee = {
firstName: "John",
lastName: "Doe",
email: "[email protected]",
phone: "555-0100"
};
console.log(`${worker.firstName} ${worker.lastName}`);
console.log(`Contact: ${worker.email}`);Output:
John Doe
Contact: [email protected]
🔹 Practical Example
Building a user management system with type aliases:
type UserID = string;
type UserRole = "admin" | "editor" | "viewer";
type User = {
id: UserID;
username: string;
role: UserRole;
isActive: boolean;
};
type UserList = User[];
const users: UserList = [
{ id: "u1", username: "alice", role: "admin", isActive: true },
{ id: "u2", username: "bob", role: "editor", isActive: true }
];
function displayUser(user: User) {
console.log(`${user.username} (${user.role})`);
}
users.forEach(displayUser);Output:
alice (admin)
bob (editor)