Skip to content
Takkatho University Takkatho University Takkatho
GitHub

Real-World Generics: အသုံးများသော ပုံစံများ

Data များကို Generic ပုံစံဖြင့် ယူခြင်း (Fetching Data):

Section titled “Data များကို Generic ပုံစံဖြင့် ယူခြင်း (Fetching Data):”

ကျွန်တော်တို့ Code ရေးတဲ့အခါ အပြင်က API (Application Programming Interface) တွေကနေ Data တွေ သွားယူရတာ အမြဲလိုလို လုပ်ရပါတယ်။ ဒီ Data ယူတဲ့ Logic (အလုပ်လုပ်ပုံ) ကို Generic ဖြစ်အောင် ရေးထားတာက အရမ်း အသုံးဝင်ပြီး လုပ်ရိုးလုပ်စဉ်လို ဖြစ်နေပါပြီ။

အရင် သင်ခန်းစာမှာ ကျွန်တော်တို့ ApiResponse ဆိုတဲ့ Generic Interface လေးတစ်ခု သတ်မှတ်ခဲ့တာ မှတ်မိဦးမယ် ထင်ပါတယ်။ API ကနေ ဘယ်လို Data အမျိုးအစား ပြန်လာလာ၊ ဒီ ApiResponse ပုံစံအတိုင်း ထည့်သုံးလို့ရတာပေါ့။

index.ts
// အရင်က ပြောခဲ့တဲ့ ApiResponse Interface (Data ရဲ့ Type ကို Generic လုပ်ထားတာ)
interface ApiResponse<DataType> {
  data: DataType;
  success: boolean;
  error?: string;
}


// API ကနေ User Data ပြန်လာရင် ဘယ်လိုပုံစံ ဖြစ်မယ်ဆိုတာ
interface User {
id: number;
name: string;
email: string;
}


// API ကနေ Data ယူတဲ့ Generic Function (ရိုးရှင်းအောင် ရေးထားတာ)
// ဒီ Function က ResponseType ဆိုတဲ့ Generic Type နဲ့ အလုပ်လုပ်မယ်
// ပြန်ထွက်လာမယ့် Data ကတော့ ApiResponse<ResponseType> ပုံစံ ဖြစ်မယ်လို့ Promise လုပ်ထားတယ်
async function fetchData<ResponseType>(url: string): Promise<ApiResponse<ResponseType>> {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: ApiResponse<ResponseType> = await response.json();
if (!data.success) {
throw new Error(data.error || "API returned success: false");
}
return data;
} catch (error) {
const message = error instanceof Error ? error.message : "Unknown fetch error";
// data ကို null လို့ သတ်မှတ်ထားတယ်၊ ဒါပေမယ့် ResponseType ဖြစ်ရမယ်လို့ 'as ResponseType' နဲ့ ပြောထားတယ်
return { data: null as ResponseType, success: false, error: message };
}
}


// ဒီ Generic fetchData Function ကို ဘယ်လို သုံးလဲ ကြည့်ရအောင်
async function getUser(userId: number) {
// fetchData ကို ခေါ်တဲ့အခါ ApiResponse ထဲက data က User Type ဖြစ်ရမယ်လို့ <User> နဲ့ ပြောလိုက်တယ်
const userResponse = await fetchData<User>(`/api/users/${userId}`);
if (userResponse.success) {
// userResponse.data ရဲ့ Type က User ဖြစ်မှန်း TypeScript က သိနေပြီ။ ဒါ့ကြောင့် .name ကို သုံးလို့ရတယ်
console.log("Fetched User:", userResponse.data.name);
} else {
// Error ရှိရင်လည်း userResponse.error ကို သုံးလို့ရတယ်
console.error("Failed to fetch user:", userResponse.error);
}
}

UI Component များ (ဥပမာ: React):

Section titled “UI Component များ (ဥပမာ: React):”

Website ဒါမှမဟုတ် Application တွေအတွက် UI (User Interface) Component တွေ ရေးတဲ့အခါ (ဥပမာ list တွေ၊ table တွေ၊ dropdown တွေ) Data အမျိုးမျိုးကို ပြသနိုင်တဲ့ Component တွေ လိုလာတတ်တယ်။ ဒီလို Component တွေကို Generic သုံးပြီး ရေးတာက တကယ် အသုံးဝင်ပါတယ်။

React Framework ကို ဥပမာယူပြီး ရေးထားတဲ့ Code လေး ကြည့်ရအောင် (ဒါက Concept ကို ပြချင်တာပါ၊ React Syntax ကို အသေးစိတ် နားမလည်ရင်လည်း ကိစ္စမရှိပါဘူး)။ Dropdown List (Select Box) Component လေးတစ်ခု ရေးကြည့်မယ်။

index.ts
import React from 'react';


// ValueType ဆိုတဲ့ Generic Type ကို သုံးထားတယ်
interface SelectOption<ValueType> {
label: string;
value: ValueType;
}


interface SelectProps<ValueType> {
options: SelectOption<ValueType>[];
selectedValue: ValueType | null;
onChange: (selectedValue: ValueType) => void;
label: string;
}


// Select Component (ValueType ရဲ့ Type အပေါ် Generic ဖြစ်အောင် ရေးထားတယ်)
// ValueType ဟာ string ဒါမှမဟုတ် number Type ထဲက တစ်ခုခု ဖြစ်ရမယ်လို့ ကန့်သတ်ထားတယ် (ဥပမာအတွက်)
function Select<ValueType extends string | number>(props: SelectProps<ValueType>) {


const { options, selectedValue, onChange, label } = props;


    // Generic Type ကြောင့် props တွေရဲ့ Type ကို TypeScript က အတိအကျ သိနေပြီ
    console.log("Received options:", options); // options ရဲ့ Type က SelectOption<ValueType>[] မှန်း သိတယ်
    console.log("Received selectedValue:", selectedValue); // selectedValue ရဲ့ Type က ValueType | null မှန်း သိတယ်






    return (
        <div>
            <p>{label} Select Component Placeholder</p>
            {/* တကယ့် select box UI rendering logic တွေ ဒီနေရာမှာ ရေးမယ် */}
        </div>
    );


}


// ဒီ Generic Select Component ကို ဘယ်လို သုံးမလဲ (Usage က Generic ရဲ့ အားသာချက်ကို ပြတယ်)
// Theme ရွေးဖို့ Dropdown (ValueType က Theme literal union)
type Theme = 'light' | 'dark'; // Theme Type ကို သတ်မှတ်လိုက်တယ် (string)


const themeOptions: SelectOption<Theme>[] = [ // options array ရဲ့ Type က SelectOption<Theme>[] ဖြစ်မယ်
{ label: "Light Mode", value: 'light' }, // value ရဲ့ Type က Theme (string)
{ label: "Dark Mode", value: 'dark' }
];


<Select
  options={themeOptions}
  selectedValue={currentTheme}
  onChange={handleThemeChange}
  label="Theme"
/>
// ဒီလို သုံးလိုက်တာနဲ့ Select ရဲ့ ValueType က Theme ဖြစ်သွားပြီ၊ onChange callback
ကလည်း Theme Type ကိုပဲ ပြန်ပို့ပေးမယ်လို့ TypeScript က သိတယ်


// Rating ရွေးဖို့ Dropdown (ValueType က number)
const ratingOptions: SelectOption<number>[] = [ // options array ရဲ့ Type က SelectOption<number>[] ဖြစ်မယ်
{ label: "⭐", value: 1 }, // value ရဲ့ Type က number
{ label: "⭐⭐", value: 2 },
{ label: "⭐⭐⭐", value: 3 }
];


// <Select options={ratingOptions} selectedValue={currentRating} onChange={handleRatingChange} label="Rating" />
// ဒီလို သုံးလိုက်တာနဲ့ Select Component ရဲ့ ValueType က number ဖြစ်သွားပြီ၊ onChange callback ကလည်း number Type ကိုပဲ ပြန်ပို့ပေးမယ်လို့ TypeScript က သိတယ်