Skip to content
intermediatePhase 35 · TypeScript

Type Aliases

Create reusable type names with the type keyword for complex types.

30m
0 problems
Topic Progress0%

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

0/3solved
Build Type Aliases Component

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 needed
Type Aliases Testing

Write 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 tests
Type Aliases Performance

Optimize 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 analysis

Quiz

1. What keyword creates a type alias?

Question 1 options

2. Which feature is exclusive to interfaces?

Question 2 options

3. When should you prefer type aliases?

Question 3 options

4. Can type aliases be generic?

Question 4 options

Flashcards

Question

What keyword creates a type alias?

Answer

The 'type' keyword

Question

What is declaration merging?

Answer

Combining multiple interface declarations into one

Question

When to use type vs interface?

Answer

Type for unions/primitives, Interface for objects/declaration merging

Question

How do you create a generic type alias?

Answer

type Box<T> = { value: T }

Question

What is Type Aliases?

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] };