TypeScript course menu
TypeScript Type Aliases: Naming Types with the type Keyword
Learn TypeScript type aliases: naming object types, unions, tuples and function types with type, reusing and composing aliases, readonly and optional properties, generic aliases, and naming conventions.
On this page
A type alias gives a name to any type with the type keyword. Names make types reusable, keep code readable, and give you one place to change a type that is used everywhere.
Naming an object type#
type Student = {
id: number;
name: string;
email: string;
marks: number[];
};
function average(student: Student): number {
return student.marks.reduce((a, b) => a + b, 0) / student.marks.length;
}
const asha: Student = { id: 1, name: "Asha", email: "asha@example.com", marks: [92, 85, 88] };
console.log(`${asha.name}: ${average(asha).toFixed(1)}`);Asha: 88.3An alias does not create a new runtime value or class; it is only a name for the type, and disappears when the code is compiled.
Aliasing any kind of type#
Unlike interfaces, which only describe objects, type can name any type:
type ID = string | number; // a union
type Point = [x: number, y: number]; // a tuple
type Status = "draft" | "published" | "archived"; // literal union
type Formatter = (value: number) => string; // a function type
const productId: ID = "SKU-42";
const origin: Point = [0, 0];
const state: Status = "published";
const asRupees: Formatter = (v) => `₹${v.toLocaleString("en-IN")}`;
console.log(productId, origin, state, asRupees(125000));SKU-42 [ 0, 0 ] published ₹1,25,000Union Types and Literal Types explain the | syntax.
Building types from other types#
Aliases can use other aliases, so you can build up a model piece by piece:
type Address = {
line1: string;
city: string;
pin: string;
};
type Customer = {
name: string;
phone?: string;
shippingAddress: Address;
billingAddress?: Address;
};
type Order = {
readonly id: number;
customer: Customer;
items: { productId: string; qty: number }[];
status: "placed" | "shipped" | "delivered";
};
const order: Order = {
id: 1042,
customer: { name: "Ravi", shippingAddress: { line1: "12 MG Road", city: "Bengaluru", pin: "560001" } },
items: [{ productId: "SKU-42", qty: 2 }],
status: "placed",
};
console.log(order.customer.shippingAddress.city, order.items.length);Bengaluru 1Combining object types with & (intersections) is covered in Intersection Types.
Generic aliases#
An alias can take type parameters, like a function takes arguments:
type ApiResponse<T> = {
ok: boolean;
data: T;
error?: string;
};
const userResponse: ApiResponse<{ name: string }> = { ok: true, data: { name: "Asha" } };
const countResponse: ApiResponse<number> = { ok: true, data: 42 };
console.log(userResponse.data.name, countResponse.data + 1);Asha 43Generics are covered in depth in Generics.
Naming conventions#
- Use
PascalCasefor type names:Student,ApiResponse. - Name types after what the data is, not after where it is used:
Productrather thanProductCardProps, unless it really is only for that component. - Do not prefix names with
TorI(TStudent,IStudent); this is an old convention most modern codebases avoid.
type or interface?#
For object shapes, type and interface are nearly interchangeable. The next lesson, Interfaces, compares them. A common, simple rule: use interface for object shapes that might be extended, and type for everything else (unions, tuples, functions, and combinations).
Practice#
Practice exercise
Create type aliases Money (a number), Category ("food" | "travel" | "bills") and Expense (with amount: Money, category: Category, note?: string). Write totalByCategory(expenses: Expense[], category: Category): Money, and test it.
Show solution
type Money = number;
type Category = "food" | "travel" | "bills";
type Expense = {
amount: Money;
category: Category;
note?: string;
};
function totalByCategory(expenses: Expense[], category: Category): Money {
return expenses.filter((e) => e.category === category).reduce((sum, e) => sum + e.amount, 0);
}
const expenses: Expense[] = [
{ amount: 250, category: "food", note: "Lunch" },
{ amount: 1200, category: "travel" },
{ amount: 180, category: "food" },
];
console.log(totalByCategory(expenses, "food"));
console.log(totalByCategory(expenses, "bills"));430
0Key takeaway#
Finished this lesson?