🔧 Class Properties and Methods: Building Class Members

🎯 Introduction

Welcome to the deep dive into TypeScript class properties and methods! 🎉 Think of this as your masterclass in crafting the perfect class members - the heart and soul of your objects.

Properties are like the DNA 🧬 of your objects (what they are), while methods are like their superpowers 💪 (what they can do). Together, they create the complete picture of your class’s capabilities.

By the end of this tutorial, you’ll be a class member wizard, crafting elegant, efficient, and maintainable code that your future self will thank you for! ✨

Let’s unlock the full potential of TypeScript class members! 🚀

📚 Understanding Class Members

🤔 What are Class Properties and Methods?

Class members are the building blocks of your classes:

• Properties 📊: Store data and state
• Methods ⚡: Define behavior and actions
• Accessors 🔍: Control how properties are accessed
• Static Members 🏛️: Belong to the class itself

Think of a smartphone 📱:

• Properties: battery level, screen size, storage capacity
• Methods: makeCall(), sendText(), takePhoto()
• Accessors: getBatteryLevel(), setVolume()
• Static: getManufacturer(), getModel()

💡 Why Master Class Members?

Here’s why understanding class members is crucial:

1. Encapsulation 🔒: Control access to your data
2. Flexibility 🤸: Adapt to changing requirements
3. Maintainability 🛠️: Easy to update and debug
4. Performance ⚡: Optimize memory usage and execution
5. Type Safety 🛡️: Catch errors at compile time

🔧 Property Initialization Patterns

📝 Basic Property Declaration

Let’s explore different ways to declare and initialize properties:

// 🎮 Game Character class with various property patterns
class GameCharacter {
  // 🎯 Explicit type with initial value
  name: string = "Unknown Hero";
  
  // 🔢 Number property with default
  level: number = 1;
  
  // 🎭 Optional property
  title?: string;
  
  // 🔒 Readonly property
  readonly id: string = crypto.randomUUID();
  
  // 📅 Computed property
  createdAt: Date = new Date();
  
  // 🎨 Union type property
  status: "active" | "inactive" | "banned" = "active";
  
  // 📊 Array property
  inventory: string[] = [];
  
  // 🗺️ Object property
  stats: { strength: number; agility: number; intelligence: number } = {
    strength: 10,
    agility: 10,
    intelligence: 10
  };
  
  constructor(name: string, title?: string) {
    this.name = name;
    if (title) {
      this.title = title;
    }
    
    console.log(`⚔️ ${this.name} has entered the game!`);
  }
}

// 🚀 Create characters
const warrior = new GameCharacter("Thorin", "The Brave");
const mage = new GameCharacter("Gandalf", "The Wise");
const archer = new GameCharacter("Legolas");

console.log(warrior.name);     // "Thorin"
console.log(warrior.title);    // "The Brave"
console.log(archer.title);     // undefined

⚡ Parameter Properties Shorthand

TypeScript’s parameter properties let you declare and initialize properties in one go:

// 🏪 Product class using parameter properties
class Product {
  // 🎯 Traditional way (verbose)
  // private _id: string;
  // public name: string;
  // protected price: number;
  // readonly category: string;
  // 
  // constructor(id: string, name: string, price: number, category: string) {
  //   this._id = id;
  //   this.name = name;
  //   this.price = price;
  //   this.category = category;
  // }
  
  // ✨ Parameter properties way (concise!)
  constructor(
    private _id: string,              // 🔒 Private property
    public name: string,              // ✅ Public property
    protected price: number,          // 👥 Protected property
    readonly category: string,        // 📖 Readonly property
    public description: string = "",  // 🎯 Default value
    public inStock: boolean = true    // 📦 Stock status
  ) {
    console.log(`📦 Product "${name}" created in ${category} category`);
  }
  
  // 🔍 Getter for private property
  get id(): string {
    return this._id;
  }
  
  // 💰 Price getter (formatted)
  get formattedPrice(): string {
    return `$${this.price.toFixed(2)}`;
  }
  
  // 📊 Product info
  getInfo(): string {
    const stock = this.inStock ? "✅ In Stock" : "❌ Out of Stock";
    return `🛍️ ${this.name} - ${this.formattedPrice} (${this.category}) ${stock}`;
  }
  
  // 🔄 Update stock status
  updateStock(inStock: boolean): void {
    this.inStock = inStock;
    const status = inStock ? "restocked" : "sold out";
    console.log(`📦 ${this.name} is now ${status}`);
  }
}

// 🚀 Create products
const laptop = new Product(
  "P001", 
  "Gaming Laptop", 
  2499.99, 
  "Electronics",
  "High-performance gaming laptop with RTX graphics"
);

const book = new Product("P002", "TypeScript Guide", 39.99, "Books");

console.log(laptop.getInfo());
console.log(book.formattedPrice);
laptop.updateStock(false);

💡 Method Patterns and Signatures

🎯 Method Overloading

Create flexible methods with multiple signatures:

// 📊 Calculator class with method overloading
class Calculator {
  // 🔢 Method overloads - different signatures
  add(a: number, b: number): number;
  add(a: string, b: string): string;
  add(a: number[], b: number[]): number[];
  add(a: any, b: any): any {
    // 🎯 Implementation handles all cases
    if (typeof a === "number" && typeof b === "number") {
      return a + b;
    }
    
    if (typeof a === "string" && typeof b === "string") {
      return a + b;
    }
    
    if (Array.isArray(a) && Array.isArray(b)) {
      return [...a, ...b];
    }
    
    throw new Error("❌ Unsupported types for addition");
  }
  
  // 🎨 Flexible subtract with optional parameters
  subtract(a: number, b: number): number;
  subtract(a: number, b: number, c: number): number;
  subtract(a: number, b?: number, c?: number): number {
    let result = a;
    if (b !== undefined) result -= b;
    if (c !== undefined) result -= c;
    return result;
  }
  
  // 📊 Statistics method with rest parameters
  average(...numbers: number[]): number {
    if (numbers.length === 0) return 0;
    const sum = numbers.reduce((acc, num) => acc + num, 0);
    return sum / numbers.length;
  }
  
  // 🎯 Generic method
  process<T>(items: T[], processor: (item: T) => T): T[] {
    return items.map(processor);
  }
}

// 🚀 Test the calculator
const calc = new Calculator();

console.log(calc.add(5, 3));                    // 8 (numbers)
console.log(calc.add("Hello", " World"));       // "Hello World" (strings)
console.log(calc.add([1, 2], [3, 4]));         // [1, 2, 3, 4] (arrays)

console.log(calc.subtract(10, 5));              // 5
console.log(calc.subtract(10, 5, 2));           // 3

console.log(calc.average(1, 2, 3, 4, 5));       // 3

// 🎨 Generic method usage
const doubled = calc.process([1, 2, 3], x => x * 2);
console.log(doubled); // [2, 4, 6]

🔄 Fluent Interface Pattern

Chain methods for elegant API design:

// 🎨 CSS Style Builder with fluent interface
class StyleBuilder {
  private styles: Record<string, string> = {};
  
  // 🎯 Color methods
  color(color: string): this {
    this.styles.color = color;
    return this;
  }
  
  backgroundColor(color: string): this {
    this.styles.backgroundColor = color;
    return this;
  }
  
  // 📏 Size methods
  width(width: string | number): this {
    this.styles.width = typeof width === "number" ? `${width}px` : width;
    return this;
  }
  
  height(height: string | number): this {
    this.styles.height = typeof height === "number" ? `${height}px` : height;
    return this;
  }
  
  // 📍 Position methods
  position(position: "static" | "relative" | "absolute" | "fixed"): this {
    this.styles.position = position;
    return this;
  }
  
  top(top: string | number): this {
    this.styles.top = typeof top === "number" ? `${top}px` : top;
    return this;
  }
  
  left(left: string | number): this {
    this.styles.left = typeof left === "number" ? `${left}px` : left;
    return this;
  }
  
  // 🎨 Typography methods
  fontSize(size: string | number): this {
    this.styles.fontSize = typeof size === "number" ? `${size}px` : size;
    return this;
  }
  
  fontWeight(weight: "normal" | "bold" | "bolder" | "lighter" | number): this {
    this.styles.fontWeight = weight.toString();
    return this;
  }
  
  textAlign(align: "left" | "center" | "right" | "justify"): this {
    this.styles.textAlign = align;
    return this;
  }
  
  // 📦 Layout methods
  display(display: "block" | "inline" | "flex" | "grid" | "none"): this {
    this.styles.display = display;
    return this;
  }
  
  flexDirection(direction: "row" | "column" | "row-reverse" | "column-reverse"): this {
    this.styles.flexDirection = direction;
    return this;
  }
  
  justifyContent(justify: "flex-start" | "flex-end" | "center" | "space-between" | "space-around"): this {
    this.styles.justifyContent = justify;
    return this;
  }
  
  // 🎯 Utility methods
  reset(): this {
    this.styles = {};
    return this;
  }
  
  build(): Record<string, string> {
    return { ...this.styles };
  }
  
  buildCSS(): string {
    return Object.entries(this.styles)
      .map(([key, value]) => `${key}: ${value};`)
      .join(' ');
  }
  
  // 🎨 Preset styles
  card(): this {
    return this
      .backgroundColor("#ffffff")
      .color("#333333")
      .width(300)
      .height(200)
      .position("relative")
      .display("flex")
      .flexDirection("column")
      .justifyContent("center");
  }
  
  button(): this {
    return this
      .backgroundColor("#007bff")
      .color("#ffffff")
      .width(120)
      .height(40)
      .fontSize(14)
      .fontWeight("bold")
      .textAlign("center")
      .display("flex")
      .justifyContent("center");
  }
}

// 🚀 Build styles with fluent interface
const cardStyle = new StyleBuilder()
  .card()
  .backgroundColor("#f8f9fa")
  .color("#212529")
  .build();

const buttonStyle = new StyleBuilder()
  .button()
  .backgroundColor("#28a745")
  .width(150)
  .buildCSS();

console.log("🎨 Card styles:", cardStyle);
console.log("🎨 Button CSS:", buttonStyle);

// 🔄 Chain multiple styles
const headerStyle = new StyleBuilder()
  .fontSize(24)
  .fontWeight("bold")
  .color("#333")
  .textAlign("center")
  .display("block")
  .buildCSS();

console.log("📰 Header CSS:", headerStyle);

🔍 Getters and Setters (Accessors)

🎯 Property Accessors

Control how properties are accessed and modified:

// 🌡️ Temperature class with smart accessors
class Temperature {
  private _celsius: number = 0;
  
  constructor(celsius: number = 0) {
    this.celsius = celsius; // Use setter for validation
  }
  
  // 🌡️ Celsius getter
  get celsius(): number {
    return this._celsius;
  }
  
  // 🌡️ Celsius setter with validation
  set celsius(value: number) {
    if (value < -273.15) {
      throw new Error("❄️ Temperature cannot be below absolute zero!");
    }
    this._celsius = value;
    console.log(`🌡️ Temperature set to ${value}°C`);
  }
  
  // 🇺🇸 Fahrenheit getter (computed property)
  get fahrenheit(): number {
    return (this._celsius * 9/5) + 32;
  }
  
  // 🇺🇸 Fahrenheit setter
  set fahrenheit(value: number) {
    this.celsius = (value - 32) * 5/9;
  }
  
  // 🔬 Kelvin getter
  get kelvin(): number {
    return this._celsius + 273.15;
  }
  
  // 🔬 Kelvin setter
  set kelvin(value: number) {
    this.celsius = value - 273.15;
  }
  
  // 🎯 Status getter
  get status(): string {
    if (this._celsius <= 0) return "🧊 Freezing";
    if (this._celsius < 20) return "❄️ Cold";
    if (this._celsius < 30) return "🌤️ Comfortable";
    if (this._celsius < 40) return "🌞 Hot";
    return "🔥 Extremely Hot";
  }
  
  // 📊 Temperature info
  getInfo(): string {
    return `${this.status} - ${this._celsius}°C / ${this.fahrenheit.toFixed(1)}°F / ${this.kelvin.toFixed(1)}K`;
  }
}

// 🚀 Test temperature conversions
const temp = new Temperature(25);
console.log(temp.getInfo());    // 🌤️ Comfortable - 25°C / 77.0°F / 298.2K

temp.fahrenheit = 100;          // Set via Fahrenheit
console.log(temp.getInfo());    // 🌞 Hot - 37.8°C / 100.0°F / 310.9K

temp.kelvin = 300;              // Set via Kelvin
console.log(temp.getInfo());    // 🌤️ Comfortable - 26.9°C / 80.3°F / 300.0K

// temp.celsius = -300;         // ❌ Would throw error!

🛡️ Validation and Computed Properties

// 👤 User Profile with smart validation
class UserProfile {
  private _email: string = "";
  private _age: number = 0;
  private _username: string = "";
  private _bio: string = "";
  
  constructor(username: string, email: string, age: number) {
    this.username = username;
    this.email = email;
    this.age = age;
  }
  
  // 📧 Email with validation
  get email(): string {
    return this._email;
  }
  
  set email(value: string) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      throw new Error("❌ Invalid email format");
    }
    this._email = value;
    console.log(`📧 Email updated to: ${value}`);
  }
  
  // 🎂 Age with validation
  get age(): number {
    return this._age;
  }
  
  set age(value: number) {
    if (value < 0 || value > 150) {
      throw new Error("❌ Age must be between 0 and 150");
    }
    this._age = value;
    console.log(`🎂 Age updated to: ${value}`);
  }
  
  // 👤 Username with validation
  get username(): string {
    return this._username;
  }
  
  set username(value: string) {
    if (value.length < 3 || value.length > 20) {
      throw new Error("❌ Username must be 3-20 characters");
    }
    if (!/^[a-zA-Z0-9_]+$/.test(value)) {
      throw new Error("❌ Username can only contain letters, numbers, and underscores");
    }
    this._username = value;
    console.log(`👤 Username updated to: ${value}`);
  }
  
  // 📝 Bio with length limit
  get bio(): string {
    return this._bio;
  }
  
  set bio(value: string) {
    if (value.length > 500) {
      throw new Error("❌ Bio cannot exceed 500 characters");
    }
    this._bio = value;
    console.log(`📝 Bio updated (${value.length} characters)`);
  }
  
  // 🎯 Computed properties
  get ageGroup(): string {
    if (this._age < 13) return "👶 Child";
    if (this._age < 20) return "🧒 Teenager";
    if (this._age < 65) return "🧑 Adult";
    return "👴 Senior";
  }
  
  get isAdult(): boolean {
    return this._age >= 18;
  }
  
  get profileCompleteness(): number {
    let score = 0;
    if (this._username) score += 25;
    if (this._email) score += 25;
    if (this._age > 0) score += 25;
    if (this._bio) score += 25;
    return score;
  }
  
  get profileStatus(): string {
    const completeness = this.profileCompleteness;
    if (completeness === 100) return "✅ Complete";
    if (completeness >= 75) return "🌟 Nearly Complete";
    if (completeness >= 50) return "⚡ Partial";
    return "🚧 Incomplete";
  }
  
  // 📊 Profile summary
  getProfileSummary(): string {
    return `
👤 ${this._username} (${this.ageGroup})
📧 ${this._email}
🎂 ${this._age} years old
📊 Profile: ${this.profileStatus} (${this.profileCompleteness}%)
📝 Bio: ${this._bio || "No bio available"}
    `.trim();
  }
}

// 🚀 Create and test user profile
const user = new UserProfile("john_doe", "[email protected]", 25);
user.bio = "TypeScript developer who loves building amazing applications! 🚀";

console.log(user.getProfileSummary());
console.log(`Adult status: ${user.isAdult}`);
console.log(`Age group: ${user.ageGroup}`);

🏛️ Static Members

🔧 Static Properties and Methods

// 🏦 Bank Account with static utilities
class BankAccount {
  private static nextAccountNumber: number = 1000;
  private static readonly BANK_NAME = "TypeScript Bank";
  private static readonly INTEREST_RATE = 0.02;
  private static accounts: BankAccount[] = [];
  
  private accountNumber: string;
  private balance: number;
  private accountHolder: string;
  private createdAt: Date;
  
  constructor(accountHolder: string, initialDeposit: number = 0) {
    this.accountNumber = BankAccount.generateAccountNumber();
    this.accountHolder = accountHolder;
    this.balance = initialDeposit;
    this.createdAt = new Date();
    
    // 📊 Add to static registry
    BankAccount.accounts.push(this);
    
    console.log(`🏦 Account ${this.accountNumber} created for ${accountHolder}`);
  }
  
  // 🔢 Static method to generate account numbers
  private static generateAccountNumber(): string {
    return `ACC${BankAccount.nextAccountNumber++}`;
  }
  
  // 🏛️ Static bank information
  static getBankInfo(): string {
    return `🏦 ${BankAccount.BANK_NAME} - Serving ${BankAccount.accounts.length} customers`;
  }
  
  // 📊 Static account statistics
  static getAccountStats(): {
    totalAccounts: number;
    totalDeposits: number;
    averageBalance: number;
  } {
    const totalAccounts = BankAccount.accounts.length;
    const totalDeposits = BankAccount.accounts.reduce((sum, acc) => sum + acc.balance, 0);
    const averageBalance = totalAccounts > 0 ? totalDeposits / totalAccounts : 0;
    
    return {
      totalAccounts,
      totalDeposits,
      averageBalance
    };
  }
  
  // 🔍 Static method to find account
  static findAccount(accountNumber: string): BankAccount | undefined {
    return BankAccount.accounts.find(acc => acc.accountNumber === accountNumber);
  }
  
  // 💰 Static interest calculator
  static calculateInterest(balance: number, months: number): number {
    return balance * BankAccount.INTEREST_RATE * (months / 12);
  }
  
  // 📈 Static method to get top accounts
  static getTopAccounts(count: number = 5): BankAccount[] {
    return BankAccount.accounts
      .sort((a, b) => b.balance - a.balance)
      .slice(0, count);
  }
  
  // 💳 Instance methods
  deposit(amount: number): void {
    if (amount <= 0) {
      console.log("❌ Deposit amount must be positive");
      return;
    }
    
    this.balance += amount;
    console.log(`💰 Deposited $${amount}. New balance: $${this.balance}`);
  }
  
  withdraw(amount: number): boolean {
    if (amount <= 0) {
      console.log("❌ Withdrawal amount must be positive");
      return false;
    }
    
    if (amount > this.balance) {
      console.log("❌ Insufficient funds");
      return false;
    }
    
    this.balance -= amount;
    console.log(`💸 Withdrew $${amount}. Remaining balance: $${this.balance}`);
    return true;
  }
  
  getAccountInfo(): string {
    return `🏦 Account: ${this.accountNumber} | Holder: ${this.accountHolder} | Balance: $${this.balance}`;
  }
  
  // 📊 Instance method using static method
  calculateFutureValue(months: number): number {
    const interest = BankAccount.calculateInterest(this.balance, months);
    return this.balance + interest;
  }
}

// 🚀 Test static and instance methods
console.log(BankAccount.getBankInfo());

// Create accounts
const account1 = new BankAccount("Alice Johnson", 1000);
const account2 = new BankAccount("Bob Smith", 2500);
const account3 = new BankAccount("Carol Davis", 1500);

// Instance operations
account1.deposit(500);
account2.withdraw(200);

// Static operations
console.log("\n📊 Bank Statistics:");
const stats = BankAccount.getAccountStats();
console.log(`Total Accounts: ${stats.totalAccounts}`);
console.log(`Total Deposits: $${stats.totalDeposits}`);
console.log(`Average Balance: $${stats.averageBalance.toFixed(2)}`);

// Find account
const foundAccount = BankAccount.findAccount("ACC1001");
console.log(`\n🔍 Found: ${foundAccount?.getAccountInfo()}`);

// Top accounts
console.log("\n🏆 Top Accounts:");
BankAccount.getTopAccounts(2).forEach(acc => {
  console.log(acc.getAccountInfo());
});

// Interest calculation
const futureValue = account1.calculateFutureValue(12);
console.log(`\n📈 Account 1 value after 12 months: $${futureValue.toFixed(2)}`);

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Uninitialized Properties

// ❌ Problematic - uninitialized properties
class BadUser {
  name: string;        // ❌ Not initialized
  email: string;       // ❌ Not initialized
  age: number;         // ❌ Not initialized
  
  constructor() {
    // Properties not set - will be undefined!
  }
}

// ✅ Better - initialize properties
class GoodUser {
  name: string = "";           // ✅ Default value
  email: string = "";          // ✅ Default value
  age: number = 0;             // ✅ Default value
  
  constructor(name?: string, email?: string, age?: number) {
    if (name) this.name = name;
    if (email) this.email = email;
    if (age) this.age = age;
  }
}

// ✅ Best - parameter properties
class BestUser {
  constructor(
    public name: string = "",
    public email: string = "",
    public age: number = 0
  ) {}
}

🤯 Pitfall 2: Incorrect ‘this’ binding

class EventHandler {
  private count: number = 0;
  
  // ❌ Problematic - 'this' can be lost
  handleClick() {
    this.count++;
    console.log(`Clicked ${this.count} times`);
  }
  
  // ✅ Solution - arrow function preserves 'this'
  handleClickSafe = () => {
    this.count++;
    console.log(`Clicked ${this.count} times`);
  }
  
  // ✅ Alternative - bind in constructor
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
}

🔒 Pitfall 3: Breaking encapsulation

// ❌ Bad - exposes internal state
class BadWallet {
  public balance: number = 0;  // ❌ Direct access to balance
  
  addMoney(amount: number) {
    this.balance += amount;
  }
}

// ✅ Good - controlled access
class GoodWallet {
  private balance: number = 0;  // 🔒 Private balance
  
  deposit(amount: number): void {
    if (amount <= 0) {
      throw new Error("❌ Amount must be positive");
    }
    this.balance += amount;
  }
  
  getBalance(): number {
    return this.balance;
  }
}

🛠️ Best Practices

1. 🎯 Use Parameter Properties: Reduce boilerplate with constructor parameters
2. 🔒 Prefer Private: Make properties private by default, expose through methods
3. ✨ Validate in Setters: Use setters for validation and business logic
4. 📊 Static for Utilities: Use static methods for class-level operations
5. 🎨 Fluent Interfaces: Enable method chaining for better APIs
6. 🔄 Immutable Patterns: Consider readonly properties for data integrity

🧪 Hands-On Exercise

🎯 Challenge: Build a Social Media Post System

Create a comprehensive social media post management system:

📋 Requirements:

• 📝 Post class with content, author, timestamp, and engagement metrics
• 👤 User class with profile information and post history
• 🏢 SocialMedia class to manage posts and users
• 💬 Comment system with nested replies
• 👍 Like/dislike functionality with user tracking
• 🔍 Search and filtering capabilities

🚀 Bonus Features:

• Hashtag extraction and trending topics
• Post scheduling system
• Analytics dashboard
• Content moderation system

💡 Solution

// 👤 User class with profile management
class User {
  private static nextUserId: number = 1;
  private _followers: Set<string> = new Set();
  private _following: Set<string> = new Set();
  
  constructor(
    public readonly id: string = `user_${User.nextUserId++}`,
    private _username: string,
    private _email: string,
    private _displayName: string,
    private _bio: string = ""
  ) {}
  
  // 👤 Username with validation
  get username(): string {
    return this._username;
  }
  
  set username(value: string) {
    if (value.length < 3 || value.length > 20) {
      throw new Error("❌ Username must be 3-20 characters");
    }
    this._username = value;
  }
  
  get displayName(): string {
    return this._displayName;
  }
  
  set displayName(value: string) {
    if (value.length > 50) {
      throw new Error("❌ Display name too long");
    }
    this._displayName = value;
  }
  
  get bio(): string {
    return this._bio;
  }
  
  set bio(value: string) {
    if (value.length > 200) {
      throw new Error("❌ Bio too long (max 200 characters)");
    }
    this._bio = value;
  }
  
  // 👥 Social features
  get followerCount(): number {
    return this._followers.size;
  }
  
  get followingCount(): number {
    return this._following.size;
  }
  
  follow(userId: string): void {
    this._following.add(userId);
  }
  
  unfollow(userId: string): void {
    this._following.delete(userId);
  }
  
  addFollower(userId: string): void {
    this._followers.add(userId);
  }
  
  removeFollower(userId: string): void {
    this._followers.delete(userId);
  }
  
  isFollowing(userId: string): boolean {
    return this._following.has(userId);
  }
  
  getProfile(): string {
    return `
👤 @${this._username} (${this._displayName})
📝 ${this._bio || "No bio"}
👥 ${this.followerCount} followers • ${this.followingCount} following
    `.trim();
  }
}

// 💬 Comment class
class Comment {
  private static nextCommentId: number = 1;
  private _likes: Set<string> = new Set();
  private _replies: Comment[] = [];
  
  constructor(
    public readonly id: string = `comment_${Comment.nextCommentId++}`,
    public readonly authorId: string,
    public readonly content: string,
    public readonly timestamp: Date = new Date(),
    public readonly parentCommentId: string | null = null
  ) {}
  
  get likeCount(): number {
    return this._likes.size;
  }
  
  get replyCount(): number {
    return this._replies.length;
  }
  
  like(userId: string): void {
    this._likes.add(userId);
  }
  
  unlike(userId: string): void {
    this._likes.delete(userId);
  }
  
  isLikedBy(userId: string): boolean {
    return this._likes.has(userId);
  }
  
  addReply(reply: Comment): void {
    this._replies.push(reply);
  }
  
  getReplies(): readonly Comment[] {
    return [...this._replies];
  }
}

// 📝 Social Media Post class
class SocialMediaPost {
  private static nextPostId: number = 1;
  private _likes: Set<string> = new Set();
  private _comments: Comment[] = [];
  private _hashtags: string[] = [];
  private _mentions: string[] = [];
  
  constructor(
    public readonly id: string = `post_${SocialMediaPost.nextPostId++}`,
    public readonly authorId: string,
    private _content: string,
    public readonly timestamp: Date = new Date(),
    public readonly imageUrl?: string
  ) {
    this.extractHashtagsAndMentions();
  }
  
  get content(): string {
    return this._content;
  }
  
  set content(value: string) {
    if (value.length > 280) {
      throw new Error("❌ Post too long (max 280 characters)");
    }
    this._content = value;
    this.extractHashtagsAndMentions();
  }
  
  get likeCount(): number {
    return this._likes.size;
  }
  
  get commentCount(): number {
    return this._comments.length;
  }
  
  get hashtags(): readonly string[] {
    return [...this._hashtags];
  }
  
  get mentions(): readonly string[] {
    return [...this._mentions];
  }
  
  // 📊 Engagement metrics
  get engagementScore(): number {
    return this.likeCount + this.commentCount * 2;
  }
  
  get timeAgo(): string {
    const now = new Date();
    const diffMs = now.getTime() - this.timestamp.getTime();
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);
    
    if (diffMins < 60) return `${diffMins}m`;
    if (diffHours < 24) return `${diffHours}h`;
    return `${diffDays}d`;
  }
  
  // 💝 Like functionality
  like(userId: string): void {
    this._likes.add(userId);
  }
  
  unlike(userId: string): void {
    this._likes.delete(userId);
  }
  
  isLikedBy(userId: string): boolean {
    return this._likes.has(userId);
  }
  
  // 💬 Comment functionality
  addComment(comment: Comment): void {
    this._comments.push(comment);
  }
  
  getComments(): readonly Comment[] {
    return [...this._comments];
  }
  
  // 🔍 Extract hashtags and mentions
  private extractHashtagsAndMentions(): void {
    const hashtagRegex = /#\w+/g;
    const mentionRegex = /@\w+/g;
    
    this._hashtags = (this._content.match(hashtagRegex) || [])
      .map(tag => tag.substring(1).toLowerCase());
    
    this._mentions = (this._content.match(mentionRegex) || [])
      .map(mention => mention.substring(1).toLowerCase());
  }
  
  // 📱 Format for display
  getFormattedPost(author: User): string {
    const heartIcon = this.likeCount > 0 ? "💖" : "🤍";
    const imageInfo = this.imageUrl ? " 📸" : "";
    
    return `
👤 ${author.displayName} @${author.username} • ${this.timeAgo}
📝 ${this._content}${imageInfo}
${heartIcon} ${this.likeCount} 💬 ${this.commentCount} 📊 ${this.engagementScore}
${this._hashtags.length > 0 ? `🏷️ ${this._hashtags.map(tag => `#${tag}`).join(' ')}` : ''}
    `.trim();
  }
}

// 🏢 Social Media Platform class
class SocialMediaPlatform {
  private users: Map<string, User> = new Map();
  private posts: Map<string, SocialMediaPost> = new Map();
  private usernameLookup: Map<string, string> = new Map();
  
  // 👤 User management
  registerUser(username: string, email: string, displayName: string): User {
    if (this.usernameLookup.has(username.toLowerCase())) {
      throw new Error("❌ Username already taken");
    }
    
    const user = new User(undefined, username, email, displayName);
    this.users.set(user.id, user);
    this.usernameLookup.set(username.toLowerCase(), user.id);
    
    console.log(`🎉 Welcome ${displayName}! Your account has been created.`);
    return user;
  }
  
  getUserById(userId: string): User | undefined {
    return this.users.get(userId);
  }
  
  getUserByUsername(username: string): User | undefined {
    const userId = this.usernameLookup.get(username.toLowerCase());
    return userId ? this.users.get(userId) : undefined;
  }
  
  // 📝 Post management
  createPost(authorId: string, content: string, imageUrl?: string): SocialMediaPost {
    const author = this.users.get(authorId);
    if (!author) {
      throw new Error("❌ Author not found");
    }
    
    const post = new SocialMediaPost(undefined, authorId, content, undefined, imageUrl);
    this.posts.set(post.id, post);
    
    console.log(`📝 New post by @${author.username}: "${content.substring(0, 50)}..."`);
    return post;
  }
  
  getPost(postId: string): SocialMediaPost | undefined {
    return this.posts.get(postId);
  }
  
  // 🔍 Search and filtering
  searchPosts(query: string): SocialMediaPost[] {
    const results: SocialMediaPost[] = [];
    const searchTerm = query.toLowerCase();
    
    for (const post of this.posts.values()) {
      if (post.content.toLowerCase().includes(searchTerm) ||
          post.hashtags.some(tag => tag.includes(searchTerm))) {
        results.push(post);
      }
    }
    
    return results.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
  }
  
  getPostsByHashtag(hashtag: string): SocialMediaPost[] {
    const results: SocialMediaPost[] = [];
    const normalizedTag = hashtag.toLowerCase().replace('#', '');
    
    for (const post of this.posts.values()) {
      if (post.hashtags.includes(normalizedTag)) {
        results.push(post);
      }
    }
    
    return results.sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime());
  }
  
  // 📊 Analytics
  getTrendingHashtags(limit: number = 10): Array<{tag: string, count: number}> {
    const tagCounts = new Map<string, number>();
    
    for (const post of this.posts.values()) {
      post.hashtags.forEach(tag => {
        tagCounts.set(tag, (tagCounts.get(tag) || 0) + 1);
      });
    }
    
    return Array.from(tagCounts.entries())
      .map(([tag, count]) => ({ tag, count }))
      .sort((a, b) => b.count - a.count)
      .slice(0, limit);
  }
  
  getTopPosts(limit: number = 10): SocialMediaPost[] {
    return Array.from(this.posts.values())
      .sort((a, b) => b.engagementScore - a.engagementScore)
      .slice(0, limit);
  }
  
  // 📈 Platform statistics
  getStats(): {
    totalUsers: number;
    totalPosts: number;
    totalEngagements: number;
    averageEngagementPerPost: number;
  } {
    const totalUsers = this.users.size;
    const totalPosts = this.posts.size;
    const totalEngagements = Array.from(this.posts.values())
      .reduce((sum, post) => sum + post.engagementScore, 0);
    const averageEngagementPerPost = totalPosts > 0 ? totalEngagements / totalPosts : 0;
    
    return {
      totalUsers,
      totalPosts,
      totalEngagements,
      averageEngagementPerPost
    };
  }
  
  // 📱 Display feed
  displayFeed(userId: string, limit: number = 10): void {
    const user = this.users.get(userId);
    if (!user) {
      console.log("❌ User not found");
      return;
    }
    
    const posts = Array.from(this.posts.values())
      .sort((a, b) => b.timestamp.getTime() - a.timestamp.getTime())
      .slice(0, limit);
    
    console.log(`\n📱 Feed for @${user.username}:`);
    console.log('='.repeat(50));
    
    posts.forEach(post => {
      const author = this.users.get(post.authorId)!;
      console.log(post.getFormattedPost(author));
      console.log('─'.repeat(30));
    });
  }
}

// 🚀 Demo the social media platform
const platform = new SocialMediaPlatform();

// Register users
const alice = platform.registerUser("alice_codes", "[email protected]", "Alice Johnson");
const bob = platform.registerUser("bob_dev", "[email protected]", "Bob Smith");
const carol = platform.registerUser("carol_design", "[email protected]", "Carol Davis");

// Create posts
platform.createPost(alice.id, "Just deployed my first TypeScript app! 🚀 #typescript #coding #webdev");
platform.createPost(bob.id, "Working on some cool #reactjs components today! @alice_codes check this out 👀");
platform.createPost(carol.id, "New UI design for our app is ready! 🎨 #design #ux #figma");
platform.createPost(alice.id, "TypeScript classes are so powerful! 💪 #typescript #oop");

// Interact with posts
const posts = Array.from(platform['posts'].values());
posts[0].like(bob.id);
posts[0].like(carol.id);
posts[1].like(alice.id);

// Add comments
const comment1 = new Comment(undefined, bob.id, "Amazing work! 🎉");
posts[0].addComment(comment1);

// Display feed
platform.displayFeed(alice.id);

// Show trending hashtags
console.log("\n🔥 Trending Hashtags:");
platform.getTrendingHashtags(5).forEach(({tag, count}) => {
  console.log(`#${tag}: ${count} posts`);
});

// Platform stats
console.log("\n📊 Platform Statistics:");
const stats = platform.getStats();
console.log(`👥 Users: ${stats.totalUsers}`);
console.log(`📝 Posts: ${stats.totalPosts}`);
console.log(`💫 Total Engagements: ${stats.totalEngagements}`);
console.log(`📈 Avg Engagement/Post: ${stats.averageEngagementPerPost.toFixed(1)}`);

🎓 Key Takeaways

Fantastic! You’ve mastered TypeScript class properties and methods! Here’s what you can now do:

• ✅ Create flexible properties with various initialization patterns 🔧
• ✅ Use parameter properties for cleaner, more concise code ⚡
• ✅ Implement method overloading for versatile APIs 🎯
• ✅ Build fluent interfaces with method chaining 🔄
• ✅ Control access with getters and setters 🔍
• ✅ Utilize static members for class-level functionality 🏛️

Remember: Well-designed class members are the foundation of maintainable, scalable applications! 🚀

🤝 Next Steps

Incredible progress! 🎉 You’ve become a class member expert!

Your journey continues with:

1. 💻 Complete the social media platform exercise above
2. 🏗️ Refactor existing code to use advanced patterns
3. 📚 Next tutorial: Constructors in TypeScript - Initializing Objects
4. 🌟 Experiment with your own class-based projects!

Remember: Great code is built one property and method at a time. Keep crafting, keep learning! 💪

Happy coding! 🎉🔧✨