การใช้ Interface ใน OOP ด้วย Next.js: ความเข้าใจง่าย ๆ พร้อมตัวอย่าง

การโปรแกรมเชิงวัตถุ (Object-Oriented Programming หรือ OOP) เป็นแนวคิดที่ช่วยให้เราสร้างโค้ดที่มีระเบียบและเข้าใจง่ายขึ้น โดย OOP จะช่วยให้เราสามารถใช้แนวคิดการสร้างวัตถุและโมเดลเพื่อแก้ไขปัญหาต่าง ๆ ได้อย่างมีประสิทธิภาพ ในภาษา Next.js ซึ่งเป็นเฟรมเวิร์กที่ใช้ JavaScript บน Node.js เราสามารถนำแนวคิด OOP มาใช้ได้อย่างคล่องตัว โดยเฉพาะอย่างยิ่งการใช้ “Interface”

Interface คืออะไร?

Interface เปรียบเสมือนสัญญาหรือข้อตกลงระหว่างคลาสต่าง ๆ ว่าคลาสที่ทำการ implement interface นั้น ๆ จะต้องมีการทำงานตามที่ระบุไว้ใน interface หากไม่มีการทำงานที่ตรงตามสัญญา จะเกิดข้อผิดพลาด

ทำไมต้องใช้ Interface?

วิธีการใช้ Interface ในโค้ด Next.js

เรามาดูตัวอย่างง่าย ๆ เกี่ยวกับการใช้ Interface ใน Next.js กันดีกว่า โดยในตัวอย่างนี้เราจะสร้างระบบในการจัดการพนักงานของบริษัท

 // Employee.ts
export interface Employee {
    id: number;
    name: string;
    position: string;
    displayInfo(): string;
}

 // Manager.ts
import { Employee } from './Employee';

export class Manager implements Employee {
    constructor(public id: number, public name: string, public position: string) {}

    displayInfo(): string {
        return `Manager Name: ${this.name}, Position: ${this.position}`;
    }
}

// Developer.ts
import { Employee } from './Employee';

export class Developer implements Employee {
    constructor(public id: number, public name: string, public position: string) {}

    displayInfo(): string {
        return `Developer Name: ${this.name}, Position: ${this.position}`;
    }
}

ในโค้ดด้านล่างนี้เราจะสร้าง API route ที่จะแสดงข้อมูลพนักงานในบริษัท

 // pages/api/employees.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import { Manager } from '../../models/Manager';
import { Developer } from '../../models/Developer';

const employees: Employee[] = [
    new Manager(1, 'John Doe', 'Manager'),
    new Developer(2, 'Jane Smith', 'Developer'),
];

export default function handler(req: NextApiRequest, res: NextApiResponse) {
    res.status(200).json(employees.map(emp => emp.displayInfo()));
}

การทำงานของโค้ด

Use Case ในโลกจริง

สรุป

การใช้ Interface ใน OOP อังกฤษ Next.js เป็นวิธีที่ยอดเยี่ยมในการสร้างโค้ดที่มีระเบียบและสามารถนำกลับมาใช้ซ้ำได้ ตัวอย่างที่เรานำเสนอในบทความนี้สามารถเป็นจุดเริ่มต้นในการสร้างระบบที่ซับซ้อนมากขึ้นซึ่งใช้แนวคิด OOP อย่างเหมาะสม

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง