📘 Interpreter Pattern: Domain Language

🎯 Introduction

Welcome to this exciting tutorial on the Interpreter Pattern! 🎉 In this guide, we’ll explore how to create your own mini programming languages and expression evaluators using TypeScript.

You’ll discover how the Interpreter Pattern can transform complex string expressions into executable code. Whether you’re building query languages 🔍, formula calculators 🧮, or configuration DSLs 📋, understanding this pattern is essential for creating flexible, extensible systems.

By the end of this tutorial, you’ll feel confident implementing your own domain-specific languages! Let’s dive in! 🏊‍♂️

📚 Understanding Interpreter Pattern

🤔 What is the Interpreter Pattern?

The Interpreter Pattern is like having a translator for your own custom language 🌐. Think of it as creating a mini programming language that understands specific commands for your application.

In TypeScript terms, it defines a grammar for a language and provides an interpreter to process sentences in that language. This means you can:

✨ Create custom query languages
🚀 Build expression evaluators
🛡️ Parse and execute domain-specific commands

💡 Why Use the Interpreter Pattern?

Here’s why developers love this pattern:

Domain-Specific Languages 🔒: Create languages tailored to your problem
Flexibility 💻: Users can write expressions without changing code
Extensibility 📖: Easy to add new operations and expressions
Separation of Concerns 🔧: Grammar separate from execution logic

Real-world example: Imagine building a spreadsheet formula engine 📊. With the Interpreter Pattern, you can parse formulas like “=SUM(A1:A10)” and execute them dynamically.

🔧 Basic Syntax and Usage

📝 Simple Example

Let’s start with a friendly math expression interpreter:

// 👋 Hello, Interpreter Pattern!
interface Expression {
  interpret(): number;
}

// 🔢 Number expression
class NumberExpression implements Expression {
  constructor(private value: number) {}
  
  interpret(): number {
    return this.value; // 🎯 Simply return the number
  }
}

// ➕ Addition expression
class AddExpression implements Expression {
  constructor(
    private left: Expression,
    private right: Expression
  ) {}
  
  interpret(): number {
    // ✨ Add left and right expressions
    return this.left.interpret() + this.right.interpret();
  }
}

// 🎮 Let's use it!
const expression = new AddExpression(
  new NumberExpression(5),
  new NumberExpression(3)
);
console.log(expression.interpret()); // 8 🎉

💡 Explanation: Each expression type knows how to interpret itself. Numbers return their value, and operations combine their sub-expressions!

🎯 Common Patterns

Here are patterns you’ll use when building interpreters:

// 🏗️ Pattern 1: Abstract syntax tree node
abstract class ASTNode {
  abstract evaluate(context: Map<string, any>): any;
}

// 🎨 Pattern 2: Context for variables
class Context {
  private variables = new Map<string, any>();
  
  set(name: string, value: any): void {
    this.variables.set(name, value);
  }
  
  get(name: string): any {
    return this.variables.get(name);
  }
}

// 🔄 Pattern 3: Parser result
interface ParseResult {
  expression: Expression;
  remainingInput: string;
}

💡 Practical Examples

🛒 Example 1: Shopping Discount Language

Let’s build a discount rule interpreter:

// 🛍️ Discount rule interpreter
interface DiscountRule {
  evaluate(cart: ShoppingCart): number;
}

// 🛒 Shopping cart context
interface ShoppingCart {
  items: Array<{ name: string; price: number; quantity: number; category: string }>;
  totalAmount: number;
  customerType: "regular" | "premium" | "vip";
}

// 💰 Percentage discount rule
class PercentageDiscount implements DiscountRule {
  constructor(private percentage: number) {}
  
  evaluate(cart: ShoppingCart): number {
    console.log(`🎯 Applying ${this.percentage}% discount`);
    return cart.totalAmount * (this.percentage / 100);
  }
}

// 📦 Category discount rule
class CategoryDiscount implements DiscountRule {
  constructor(
    private category: string,
    private discount: number
  ) {}
  
  evaluate(cart: ShoppingCart): number {
    const categoryTotal = cart.items
      .filter(item => item.category === this.category)
      .reduce((sum, item) => sum + (item.price * item.quantity), 0);
    
    console.log(`🏷️ ${this.discount}% off ${this.category} items`);
    return categoryTotal * (this.discount / 100);
  }
}

// 🔗 Combine multiple rules
class CompositeDiscount implements DiscountRule {
  constructor(private rules: DiscountRule[]) {}
  
  evaluate(cart: ShoppingCart): number {
    // 🎯 Sum all discounts
    return this.rules.reduce((total, rule) => 
      total + rule.evaluate(cart), 0
    );
  }
}

// 🎮 Let's use our discount language!
const cart: ShoppingCart = {
  items: [
    { name: "TypeScript Book", price: 30, quantity: 2, category: "books" },
    { name: "Coffee Maker", price: 80, quantity: 1, category: "electronics" }
  ],
  totalAmount: 140,
  customerType: "premium"
};

const discountRules = new CompositeDiscount([
  new PercentageDiscount(10), // 10% off everything
  new CategoryDiscount("books", 20) // Extra 20% off books
]);

const totalDiscount = discountRules.evaluate(cart);
console.log(`💰 Total discount: $${totalDiscount}`);

🎯 Try it yourself: Add a rule for VIP customers or minimum purchase amounts!

🎮 Example 2: Game Command Language

Let’s create a simple game command interpreter:

// 🎮 Game command interpreter
interface GameCommand {
  execute(player: Player): void;
}

// 🎭 Player context
class Player {
  constructor(
    public name: string,
    public x: number = 0,
    public y: number = 0,
    public health: number = 100,
    public inventory: string[] = []
  ) {}
  
  status(): void {
    console.log(`📍 ${this.name} at (${this.x}, ${this.y}) | ❤️ ${this.health} HP`);
    console.log(`🎒 Inventory: ${this.inventory.join(", ") || "empty"}`);
  }
}

// 🚶 Move command
class MoveCommand implements GameCommand {
  constructor(
    private direction: "north" | "south" | "east" | "west",
    private distance: number = 1
  ) {}
  
  execute(player: Player): void {
    const moves = {
      north: { x: 0, y: this.distance },
      south: { x: 0, y: -this.distance },
      east: { x: this.distance, y: 0 },
      west: { x: -this.distance, y: 0 }
    };
    
    const move = moves[this.direction];
    player.x += move.x;
    player.y += move.y;
    
    console.log(`🚶 ${player.name} moved ${this.direction} ${this.distance} steps`);
  }
}

// 🎁 Pickup command
class PickupCommand implements GameCommand {
  constructor(private item: string) {}
  
  execute(player: Player): void {
    player.inventory.push(this.item);
    console.log(`✨ ${player.name} picked up ${this.item}!`);
  }
}

// 💊 Heal command
class HealCommand implements GameCommand {
  constructor(private amount: number) {}
  
  execute(player: Player): void {
    player.health = Math.min(100, player.health + this.amount);
    console.log(`💚 ${player.name} healed ${this.amount} HP!`);
  }
}

// 🔄 Macro command (multiple commands)
class MacroCommand implements GameCommand {
  constructor(private commands: GameCommand[]) {}
  
  execute(player: Player): void {
    console.log("🎬 Executing macro...");
    this.commands.forEach(cmd => cmd.execute(player));
  }
}

// 📜 Simple command parser
class CommandParser {
  parse(input: string): GameCommand {
    const parts = input.toLowerCase().split(" ");
    const command = parts[0];
    
    switch (command) {
      case "move":
        return new MoveCommand(
          parts[1] as any,
          parseInt(parts[2]) || 1
        );
      case "pickup":
        return new PickupCommand(parts.slice(1).join(" "));
      case "heal":
        return new HealCommand(parseInt(parts[1]) || 20);
      default:
        throw new Error(`Unknown command: ${command} 😕`);
    }
  }
}

// 🎮 Game time!
const player = new Player("Hero");
const parser = new CommandParser();

const commands = [
  "move north 2",
  "pickup magic sword",
  "move east",
  "heal 30",
  "pickup health potion"
];

commands.forEach(cmd => {
  const command = parser.parse(cmd);
  command.execute(player);
});

player.status();

🚀 Advanced Concepts

🧙‍♂️ Building a Formula Language

When you’re ready to level up, try this advanced formula interpreter:

// 🎯 Advanced formula interpreter with variables
interface FormulaExpression {
  evaluate(context: Map<string, number>): number;
}

// 🔤 Variable expression
class VariableExpression implements FormulaExpression {
  constructor(private name: string) {}
  
  evaluate(context: Map<string, number>): number {
    const value = context.get(this.name);
    if (value === undefined) {
      throw new Error(`Variable ${this.name} not found! 😱`);
    }
    return value;
  }
}

// 🎲 Function expression (SUM, AVG, MAX, etc.)
class FunctionExpression implements FormulaExpression {
  constructor(
    private func: string,
    private args: FormulaExpression[]
  ) {}
  
  evaluate(context: Map<string, number>): number {
    const values = this.args.map(arg => arg.evaluate(context));
    
    switch (this.func.toUpperCase()) {
      case "SUM":
        return values.reduce((a, b) => a + b, 0);
      case "AVG":
        return values.reduce((a, b) => a + b, 0) / values.length;
      case "MAX":
        return Math.max(...values);
      case "MIN":
        return Math.min(...values);
      default:
        throw new Error(`Unknown function: ${this.func} 🤷`);
    }
  }
}

// ✨ Formula evaluator
class FormulaEvaluator {
  evaluate(formula: FormulaExpression, data: Record<string, number>): number {
    const context = new Map(Object.entries(data));
    return formula.evaluate(context);
  }
}

🏗️ Creating a Query DSL

For the brave developers, here’s a query language:

// 🚀 Type-safe query builder
interface QueryExpression<T> {
  matches(item: T): boolean;
}

// 🔍 Comparison operators
class ComparisonExpression<T> implements QueryExpression<T> {
  constructor(
    private field: keyof T,
    private operator: "=" | ">" | "<" | "!=" | "contains",
    private value: any
  ) {}
  
  matches(item: T): boolean {
    const fieldValue = item[this.field];
    
    switch (this.operator) {
      case "=": return fieldValue === this.value;
      case ">": return fieldValue > this.value;
      case "<": return fieldValue < this.value;
      case "!=": return fieldValue !== this.value;
      case "contains": 
        return String(fieldValue).includes(this.value);
      default: return false;
    }
  }
}

// 🔗 Logical operators
class AndExpression<T> implements QueryExpression<T> {
  constructor(private expressions: QueryExpression<T>[]) {}
  
  matches(item: T): boolean {
    return this.expressions.every(expr => expr.matches(item));
  }
}

// 🎯 Query builder for type safety
class QueryBuilder<T> {
  private expressions: QueryExpression<T>[] = [];
  
  where(field: keyof T, operator: "=" | ">" | "<" | "!=" | "contains", value: any): this {
    this.expressions.push(new ComparisonExpression(field, operator, value));
    return this;
  }
  
  build(): QueryExpression<T> {
    return new AndExpression(this.expressions);
  }
}

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Infinite Recursion

// ❌ Wrong way - no base case!
class BadExpression implements Expression {
  interpret(): number {
    return new BadExpression().interpret(); // 💥 Stack overflow!
  }
}

// ✅ Correct way - proper termination
class GoodExpression implements Expression {
  constructor(private value?: number) {}
  
  interpret(): number {
    if (this.value !== undefined) {
      return this.value; // 🛡️ Base case
    }
    // Process sub-expressions...
    return 0;
  }
}

🤯 Pitfall 2: Missing Context Validation

// ❌ Dangerous - no validation!
class UnsafeVariable implements Expression {
  constructor(private name: string) {}
  
  interpret(context: any): number {
    return context[this.name]; // 💥 Could be undefined!
  }
}

// ✅ Safe - validate context
class SafeVariable implements Expression {
  constructor(private name: string) {}
  
  interpret(context: Map<string, number>): number {
    if (!context.has(this.name)) {
      console.log(`⚠️ Variable '${this.name}' not found!`);
      return 0; // Or throw an error
    }
    return context.get(this.name)!;
  }
}

🛠️ Best Practices

🎯 Keep Grammar Simple: Start with basic expressions and grow
📝 Document Your Language: Users need to know the syntax
🛡️ Validate Everything: Check inputs before interpreting
🎨 Use Abstract Syntax Trees: Separate parsing from execution
✨ Provide Clear Errors: Help users fix their expressions

🧪 Hands-On Exercise

🎯 Challenge: Build a CSS-like Style Language

Create a mini styling language interpreter:

📋 Requirements:

✅ Parse style rules like “color: red; size: 20px”
🏷️ Support different property types (color, size, position)
👤 Apply styles to UI elements
📅 Support variables like “$primary-color”
🎨 Each style needs validation!

🚀 Bonus Points:

Add nested selectors
Implement style inheritance
Create a style validator

💡 Solution

🔍 Click to see solution

// 🎯 Our style language interpreter!
interface StyleRule {
  apply(element: UIElement): void;
}

// 🎨 UI Element to style
class UIElement {
  public styles: Map<string, any> = new Map();
  
  constructor(public name: string) {}
  
  applyStyle(property: string, value: any): void {
    this.styles.set(property, value);
    console.log(`🎨 ${this.name}: ${property} = ${value}`);
  }
  
  showStyles(): void {
    console.log(`📋 Styles for ${this.name}:`);
    this.styles.forEach((value, prop) => {
      console.log(`  ${prop}: ${value}`);
    });
  }
}

// 🎨 Color style rule
class ColorRule implements StyleRule {
  constructor(private color: string) {}
  
  apply(element: UIElement): void {
    element.applyStyle("color", this.color);
  }
}

// 📏 Size style rule
class SizeRule implements StyleRule {
  constructor(
    private value: number,
    private unit: "px" | "rem" | "%"
  ) {}
  
  apply(element: UIElement): void {
    element.applyStyle("size", `${this.value}${this.unit}`);
  }
}

// 🔤 Variable storage
class StyleVariables {
  private vars = new Map<string, string>();
  
  set(name: string, value: string): void {
    this.vars.set(name, value);
    console.log(`💾 Variable $${name} = ${value}`);
  }
  
  get(name: string): string {
    const value = this.vars.get(name);
    if (!value) {
      throw new Error(`Variable $${name} not defined! 😱`);
    }
    return value;
  }
}

// 📜 Style parser
class StyleParser {
  constructor(private variables: StyleVariables) {}
  
  parse(styleString: string): StyleRule[] {
    const rules: StyleRule[] = [];
    const declarations = styleString.split(";").filter(s => s.trim());
    
    declarations.forEach(decl => {
      const [property, value] = decl.split(":").map(s => s.trim());
      
      // 🔍 Check for variables
      const resolvedValue = value.startsWith("$") 
        ? this.variables.get(value.substring(1))
        : value;
      
      switch (property) {
        case "color":
          rules.push(new ColorRule(resolvedValue));
          break;
        case "size":
          const match = resolvedValue.match(/(\d+)(px|rem|%)/);
          if (match) {
            rules.push(new SizeRule(
              parseInt(match[1]),
              match[2] as any
            ));
          }
          break;
      }
    });
    
    return rules;
  }
}

// 🎮 Test it out!
const variables = new StyleVariables();
variables.set("primary-color", "#007bff");
variables.set("base-size", "16px");

const parser = new StyleParser(variables);
const button = new UIElement("Button");

const styles = "color: $primary-color; size: 20px";
const rules = parser.parse(styles);

rules.forEach(rule => rule.apply(button));
button.showStyles();

🎓 Key Takeaways

You’ve learned so much! Here’s what you can now do:

✅ Create domain-specific languages with confidence 💪
✅ Build expression evaluators for complex rules 🛡️
✅ Parse and interpret custom syntaxes 🎯
✅ Apply the pattern to real-world problems 🐛
✅ Design extensible language systems! 🚀

Remember: The Interpreter Pattern lets you give your users a powerful way to express complex logic without changing code! 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered the Interpreter Pattern!

Here’s what to do next:

💻 Practice with the exercises above
🏗️ Build a mini query language for your app
📚 Move on to our next tutorial: Iterator Pattern
🌟 Create your own domain-specific language!

Remember: Every powerful system started with simple expressions. Keep building, keep learning, and most importantly, have fun creating your own languages! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn