รู้จักกับ Colocation ขยับโค้ดให้ใกล้ชิดกัน เพื่อการอ่านที่ง่ายขึ้น

// user-module.ts
class UserService {
    private users: Map<number, string> = new Map();

    constructor() {
        this.initUsers();
    }

    private initUsers(): void {
        this.users.set(1, "Alice");
        this.users.set(2, "Bob");
        this.users.set(3, "Charlie");
    }

    public getUserById(id: number): string | undefined {
        return this.users.get(id);
    }
}

class UserComponent {
    private userService: UserService;

    constructor(userService: UserService) {
        this.userService = userService;
    }

    public displayUserName(userId: number): void {
        const userName = this.userService.getUserById(userId);
        if (userName) {
            console.log(`User Name: ${userName}`);
        } else {
            console.log("User not found.");
        }
    }
}

const userService = new UserService();
const userComponent = new UserComponent(userService);
userComponent.displayUserName(2);

// user.service.ts
class UserService {
    // implementation...
}

// user.component.ts
class UserComponent {
    // implementation...
}

// File: app.module.ts
// Contains module-level configurations, unrelated to UserService or UserComponent.

import React from 'react';

// components/user/Users.js
function UserComponent({ userName }) {
  return (
    <div>
      <h1>User Name: {userName}</h1>
    </div>
  );
}

export default UserComponent;

// components/user/UserService.js
class UserService {
  getUsers() {
    // Fetch users from API or database
    return [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' },
    ];
  }
}

export default UserService;

// components/UserComponent.js
import React from 'react';

function UserComponent({ userName }) {
  return (
    <div>
      <h1>User Name: {userName}</h1>
    </div>
  );
}

export default UserComponent;

// services/UserService.js
class UserService {
  getUsers() {
    // Fetch users from API or database
    return [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
      { id: 3, name: 'Charlie' },
    ];
  }
}

export default UserService;