การใช้งาน Generic และ Generic Collection ในภาษา Next.js แบบง่าย ๆ

เมื่อพูดถึงการพัฒนาเว็บแอปพลิเคชันในยุคปัจจุบัน หลายคนคงคุ้นเคยกับ Next.js ซึ่งเป็นเฟรมเวิร์คที่ช่วยให้การสร้างเว็บแอปที่มีทั้งการเรนเดอร์จากฝั่งเซิร์ฟเวอร์ (SSR) และจากฝั่งคลายนต์ (Static) เท่ากับว่ามันช่วยเพิ่มประสิทธิภาพและความรวดเร็วให้กับงานพัฒนาของเรา สำหรับหมวดหมู่นี้ เราจะมาพูดถึงความสำคัญของ "Generic" และ "Generic Collection" ที่ช่วยให้การเขียนโค้ดใน Next.js เป็นเรื่องง่ายและสนุกยิ่งขึ้น

Generic คืออะไร?

"Generic" เป็นแนวคิดที่ช่วยให้เราสามารถสร้างฟังก์ชันหรือคลาสที่ไม่ต้องระบุชนิดของข้อมูลที่แน่ชัด แอปพลิเคชันของเราจะยังคงทำงานได้อย่างมีประสิทธิภาพและสามารถสนับสนุนชนิดข้อมูลที่แตกต่างกันได้มากมาย

การใช้งาน Generic นั้นมีข้อดีหลายประการ เช่น:

Generic Collection คืออะไร?

"Generic Collection" คือการใช้งาน Generic ร่วมกับการรวบรวมข้อมูล (Collections) เช่น Array หรือ List ซึ่งช่วยให้เราเก็บ รวบรวม หรือจัดการข้อมูลได้อย่างมีระเบียบ

ตัวอย่างการใช้งาน Generic และ Generic Collection ใน Next.js

การสร้าง Generic Function

สมมุติว่าเราต้องการสร้างฟังก์ชันที่คืนค่าอาร์เรย์ของชนิดข้อมูลที่ส่งเข้ามา เราสามารถทำได้ตามตัวอย่างนี้:

 // Generic function ที่รับ input array ของชนิด T และคืนค่าอาร์เรย์ที่จัดเรียงใหม่
function sortArray<T>(arr: T[]): T[] {
    return arr.sort();
}

const numberArray = [5, 2, 8, 1, 4];
const sortedNumbers = sortArray(numberArray);
console.log(sortedNumbers); // [1, 2, 4, 5, 8]

const stringArray = ["banana", "apple", "cherry"];
const sortedStrings = sortArray(stringArray);
console.log(sortedStrings); // ['apple', 'banana', 'cherry']

การสร้าง Generic Collection

เราสามารถสร้าง Generic Collection ที่เก็บค่าของชนิดข้อมูลที่เราต้องการได้ เช่น เราต้องการสร้าง List ที่เก็บข้อมูลของผู้ใช้

 // สร้าง interface สำหรับผู้ใช้
interface User {
    id: number;
    name: string;
}

// Generic Collection สำหรับการเก็บค่าผู้ใช้
class UserList<T extends User> {
    private users: T[] = [];

    addUser(user: T) {
        this.users.push(user);
    }

    getUserList(): T[] {
        return this.users;
    }
}

// การใช้งาน UserList
const userList = new UserList<User>();
userList.addUser({ id: 1, name: "John Doe" });
userList.addUser({ id: 2, name: "Jane Smith" });

console.log(userList.getUserList());
// [ { id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' } ]

Use Case ในโลกจริงของ Generic และ Generic Collection

 import React from 'react';

interface DropdownProps<T> {
    items: T[];
    onSelect: (item: T) => void;
}

const Dropdown = <T,>({ items, onSelect }: DropdownProps<T>) => {
    return (
        <select onChange={(e) => onSelect(items[Number(e.target.value)])}>
            {items.map((item, index) => (
                <option key={index} value={index}>
                    {JSON.stringify(item)}
                </option>
            ))}
        </select>
    );
};

// การใช้งาน Dropdown
const MyComponent = () => {
    const names = ['Alice', 'Bob', 'Charlie'];
    return (
        <Dropdown
            items={names}
            onSelect={(name) => console.log(`Selected: ${name}`)}
        />
    );
};

สรุป

ในที่สุด การใช้ Generic และ Generic Collection ใน Next.js นั้นเป็นเครื่องมือที่มีประสิทธิภาพ และมีความยืดหยุ่นที่ช่วยให้เราสามารถสร้างโค้ดที่ชัดเจนและง่ายต่อการบำรุงรักษา ในโลกของการพัฒนาเว็บแอปพลิเคชันที่มีแนวโน้มเติบโตขึ้นอย่างรวดเร็ว ความเข้าใจในแนวคิดเหล่านี้จึงถือเป็นข้อได้เปรียบที่จะช่วยให้เราสามารถพัฒนาแอปพลิเคชันที่มีคุณภาพสูง

หากคุณอยากเรียนรู้เพิ่มเติมเกี่ยวกับการพัฒนาเว็บแอปพลิเคชันและแนวคิดเหล่านี้ เราขอเชิญคุณมาศึกษาเบื้องต้นกับเราได้ที่ EPT (Expert-Programming-Tutor) ที่นี่เรามีหลักสูตรที่ช่วยให้คุณก้าวข้ามอุปสรรคและนำไปสู่ความสำเร็จในสายงานการพัฒนาเว็บได้อย่างแน่นอน!

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