Basic Type Aliases
Basic Type Aliases
Type aliases create a new name for an existing type using the type keyword.
Simple Aliases
// Primitive aliases
type ID = string | number;
type Name = string;
type Age = number;
// Usage
let userId: ID = 123;
let userName: Name = "Alice";
let userAge: Age = 30;
Object Aliases
type User = {
name: string;
age: number;
email: string;
};
const user: User = {
name: "Alice",
age: 30,
email: "alice@example.com"
};
Function Aliases
type Callback = (data: string) => void;
type AsyncLoader = () => Promise<string>;
function processData(callback: Callback): void {
callback("done");
}
Exporting Type Aliases
export type Point = {
x: number;
y: number;
};
import type { Point } from "./types";
Complex Types
Complex Types
Type aliases can create sophisticated type combinations.
Union Types in Aliases
type Status = "active" | "inactive" | "pending";
type Result = Success | Error;
type Success = {
status: "success";
data: unknown;
};
type Error = {
status: "error";
message: string;
};
Intersection Types in Aliases
type HasId = { id: number };
type HasTimestamp = { createdAt: Date };
type Entity = HasId & HasTimestamp & {
name: string;
};
Utility Type Aliases
// Partial - all properties optional
type PartialUser = Partial<User>;
// Required - all properties required
type RequiredConfig = Required<Config>;
// Pick - select specific properties
type UserSummary = Pick<User, "name" | "email">;
// Omit - exclude specific properties
type UserWithoutId = Omit<User, "id">;
Generic Type Aliases
type ApiResponse<T> = {
data: T;
status: number;
message: string;
};
// Usage
type UserResponse = ApiResponse<User>;
type ProductResponse = ApiResponse<Product>;
Type vs Interface
Type vs Interface
Key Differences
| Feature | Type | Interface |
|---|---|---|
| Extension | & (intersection) |
extends |
| Declaration Merging | No | Yes |
| Implements | Yes | Yes |
| Primitives | Yes | No |
| Tuples | Yes | No |
When to Use Each
Use Type When:
- Creating unions or intersections
- Working with primitives or tuples
- Need complex type transformations
// Type is better for unions
type Shape = Circle | Square;
// Type is better for primitives
type ID = string | number;
// Type is better for tuples
type Pair = [string, number];
Use Interface When:
- Defining object shapes
- Need declaration merging
- Creating class contracts
// Interface is better for objects
interface User {
name: string;
age: number;
}
// Interface supports declaration merging
interface Window {
myCustomProp: string;
}
Declaration Merging
// Only interfaces support this
interface User {
name: string;
}
interface User {
age: number;
}
// Result: User has both name and age
const user: User = { name: "Alice", age: 30 };
Practice Problems
Create a reusable React component implementing Type Aliases. Include proper state management and accessibility.
Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where neededWrite unit and integration tests for Type Aliases using React Testing Library.
Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility testsOptimize Type Aliases for performance. Consider memoization, code splitting, and bundle size.
Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysisQuiz
1. What keyword creates a type alias?
2. Which feature is exclusive to interfaces?
3. When should you prefer type aliases?
4. Can type aliases be generic?
Flashcards
Question
What keyword creates a type alias?
Click to reveal answer
Answer
The 'type' keyword
Question
What is declaration merging?
Click to reveal answer
Answer
Combining multiple interface declarations into one
Question
When to use type vs interface?
Click to reveal answer
Answer
Type for unions/primitives, Interface for objects/declaration merging
Question
How do you create a generic type alias?
Click to reveal answer
Answer
type Box<T> = { value: T }
Question
What is Type Aliases?
Click to reveal answer
Answer
Type Aliases is a key concept in frontend development.
Revision Notes
Key Takeaways
- 1.Type aliases create new names for existing types
- 2.Types are better for unions, primitives, and tuples
- 3.Interfaces are better for objects and declaration merging
- 4.Both support generic types
- 5.Type aliases cannot be merged like interfaces
Interview Tips
- •Explain when to choose type vs interface
- •Know the declaration merging difference
- •Understand union and intersection types in aliases
Cheat Sheet
Cheat Sheet
Basic Type Alias
type ID = string | number;
type User = { name: string; age: number };
Complex Types
type Status = "active" | "inactive";
type Entity = HasId & HasTimestamp;
type Response<T> = { data: T };
Type vs Interface
- Type: unions, primitives, tuples
- Interface: objects, declaration merging
Utility Types
type Partial<T> = { [K in keyof T]?: T[K] };
type Required<T> = { [K in keyof T]-?: T[K] };
type Pick<T, K> = { [P in K]: T[P] };
type Omit<T, K> = { [P in Exclude<keyof T, K>]: T[P] };