টাইপস্ক্রিপ্ট ইউটিলিটি টাইপস আয়ত্ত করা: বিশ্বব্যাপী ডেভেলপারদের জন্য একটি ব্যবহারিক নির্দেশিকা

টাইপস্ক্রিপ্ট কিছু শক্তিশালী বিল্ট-ইন ইউটিলিটি টাইপস সরবরাহ করে যা আপনার কোডের টাইপ সেফটি, পঠনযোগ্যতা এবং রক্ষণাবেক্ষণযোগ্যতা উল্লেখযোগ্যভাবে বাড়াতে পারে। এই ইউটিলিটি টাইপগুলি মূলত পূর্ব-সংজ্ঞায়িত টাইপ ট্রান্সফরমেশন যা আপনি বিদ্যমান টাইপগুলিতে প্রয়োগ করতে পারেন, যা আপনাকে পুনরাবৃত্তিমূলক এবং ত্রুটি-প্রবণ কোড লেখা থেকে বাঁচায়। এই নির্দেশিকা বিশ্বজুড়ে ডেভেলপারদের জন্য ব্যবহারিক উদাহরণ সহ বিভিন্ন ইউটিলিটি টাইপস অন্বেষণ করবে।

ইউটিলিটি টাইপস কেন ব্যবহার করবেন?

ইউটিলিটি টাইপগুলি সাধারণ টাইপ ম্যানিপুলেশনের পরিস্থিতিগুলি সমাধান করে। এগুলি ব্যবহার করে, আপনি করতে পারেন:

• বয়লারপ্লেট কোড হ্রাস: পুনরাবৃত্তিমূলক টাইপ সংজ্ঞা লেখা এড়িয়ে চলুন।
• টাইপ সেফটি উন্নত করা: নিশ্চিত করুন যে আপনার কোড টাইপের সীমাবদ্ধতা মেনে চলে।
• কোডের পঠনযোগ্যতা বৃদ্ধি: আপনার টাইপ সংজ্ঞাগুলিকে আরও সংক্ষিপ্ত এবং সহজে বোঝার যোগ্য করে তুলুন।
• রক্ষণাবেক্ষণযোগ্যতা বৃদ্ধি: পরিবর্তন সহজ করুন এবং ত্রুটি প্রবর্তনের ঝুঁকি হ্রাস করুন।

কোর ইউটিলিটি টাইপস

Partial<T>

Partial<T> এমন একটি টাইপ তৈরি করে যেখানে T-এর সমস্ত প্রোপার্টি ঐচ্ছিক (optional) হিসাবে সেট করা হয়। এটি আংশিক আপডেট বা কনফিগারেশন অবজেক্টের জন্য টাইপ তৈরি করার সময় বিশেষভাবে কার্যকর।

উদাহরণ:

কল্পনা করুন আপনি বিভিন্ন অঞ্চলের গ্রাহকদের জন্য একটি ই-কমার্স প্ল্যাটফর্ম তৈরি করছেন। আপনার কাছে একটি Customer টাইপ আছে:

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

একজন গ্রাহকের তথ্য আপডেট করার সময়, আপনি হয়তো সমস্ত ফিল্ডকে বাধ্যতামূলক করতে চাইবেন না। Partial<Customer> আপনাকে এমন একটি টাইপ সংজ্ঞায়িত করতে দেয় যেখানে Customer-এর সমস্ত প্রোপার্টি ঐচ্ছিক:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... প্রদত্ত আইডি দিয়ে গ্রাহক আপডেট করার ইমপ্লিমেন্টেশন
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // বৈধ
updateCustomer("456", { address: { city: "London" } }); // বৈধ

Readonly<T>

Readonly<T> এমন একটি টাইপ তৈরি করে যেখানে T-এর সমস্ত প্রোপার্টি readonly হিসাবে সেট করা হয়, যা ইনিশিয়ালাইজেশনের পরে পরিবর্তন প্রতিরোধ করে। এটি অপরিবর্তনীয়তা (immutability) নিশ্চিত করার জন্য মূল্যবান।

উদাহরণ:

আপনার গ্লোবাল অ্যাপ্লিকেশনের জন্য একটি কনফিগারেশন অবজেক্ট বিবেচনা করুন:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // সংস্করণ যোগ করা হয়েছে
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

ইনিশিয়ালাইজেশনের পরে কনফিগারেশনের আকস্মিক পরিবর্তন রোধ করতে, আপনি Readonly<AppConfig> ব্যবহার করতে পারেন:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // ত্রুটি: 'apiUrl'-এ অ্যাসাইন করা যাবে না কারণ এটি একটি রিড-অনলি প্রোপার্টি।

Pick<T, K>

Pick<T, K> একটি টাইপ তৈরি করে T থেকে K প্রোপার্টিগুলির সেট বেছে নিয়ে, যেখানে K হল স্ট্রিং লিটারাল টাইপের একটি ইউনিয়ন যা আপনি অন্তর্ভুক্ত করতে চান এমন প্রোপার্টির নামগুলিকে প্রতিনিধিত্ব করে।

উদাহরণ:

ধরুন আপনার কাছে বিভিন্ন প্রোপার্টি সহ একটি Event ইন্টারফেস আছে:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

যদি আপনার একটি নির্দিষ্ট ডিসপ্লে কম্পোনেন্টের জন্য শুধুমাত্র title, location, এবং startTime প্রয়োজন হয়, তাহলে আপনি Pick ব্যবহার করতে পারেন:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Event: ${event.title} at ${event.location} on ${event.startTime}`);
}

Omit<T, K>

Omit<T, K> একটি টাইপ তৈরি করে T থেকে K প্রোপার্টিগুলির সেট বাদ দিয়ে, যেখানে K হল স্ট্রিং লিটারাল টাইপের একটি ইউনিয়ন যা আপনি বাদ দিতে চান এমন প্রোপার্টির নামগুলিকে প্রতিনিধিত্ব করে। এটি Pick-এর বিপরীত।

উদাহরণ:

একই Event ইন্টারফেস ব্যবহার করে, যদি আপনি নতুন ইভেন্ট তৈরির জন্য একটি টাইপ তৈরি করতে চান, তাহলে আপনি id প্রোপার্টিটি বাদ দিতে চাইতে পারেন, যা সাধারণত ব্যাকএন্ড দ্বারা তৈরি করা হয়:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... নতুন ইভেন্ট তৈরির ইমপ্লিমেন্টেশন
}

Record<K, T>

Record<K, T> এমন একটি অবজেক্ট টাইপ তৈরি করে যার প্রোপার্টি কী (key) হল K এবং প্রোপার্টি ভ্যালু (value) হল T। K স্ট্রিং লিটারাল টাইপ, নম্বর লিটারাল টাইপ বা একটি সিম্বলের ইউনিয়ন হতে পারে। এটি ডিকশনারি বা ম্যাপ তৈরির জন্য উপযুক্ত।

উদাহরণ:

কল্পনা করুন আপনার অ্যাপ্লিকেশনের ইউজার ইন্টারফেসের জন্য আপনার অনুবাদ সংরক্ষণ করতে হবে। আপনি আপনার অনুবাদের জন্য একটি টাইপ সংজ্ঞায়িত করতে Record ব্যবহার করতে পারেন:

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; //সরলীকৃত
  return translations[key] || key; // কোনো অনুবাদ না পাওয়া গেলে কী-তে ফলব্যাক করুন
}

console.log(translate("hello", "en")); // আউটপুট: Hello
console.log(translate("hello", "fr")); // আউটপুট: Bonjour
console.log(translate("nonexistent", "en")); // আউটপুট: nonexistent

Exclude<T, U>

Exclude<T, U> একটি টাইপ তৈরি করে T থেকে সেই সমস্ত ইউনিয়ন সদস্যদের বাদ দিয়ে যা U-তে অ্যাসাইন করা যায়। এটি একটি ইউনিয়ন থেকে নির্দিষ্ট টাইপ ফিল্টার করার জন্য দরকারী।

উদাহরণ:

আপনার কাছে বিভিন্ন ইভেন্টের ধরন প্রতিনিধিত্বকারী একটি টাইপ থাকতে পারে:

type EventType = "concert" | "conference" | "workshop" | "webinar";

আপনি যদি এমন একটি টাইপ তৈরি করতে চান যা "webinar" ইভেন্টগুলিকে বাদ দেয়, আপনি Exclude ব্যবহার করতে পারেন:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent এখন "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Attending a ${event}`);
}

// attendPhysicalEvent("webinar"); // ত্রুটি: '"webinar"' টাইপের আর্গুমেন্ট '"concert" | "conference" | "workshop"' টাইপের প্যারামিটারে অ্যাসাইন করা যাবে না।

attendPhysicalEvent("concert"); // বৈধ

Extract<T, U>

Extract<T, U> একটি টাইপ তৈরি করে T থেকে সেই সমস্ত ইউনিয়ন সদস্যদের এক্সট্র্যাক্ট করে যা U-তে অ্যাসাইন করা যায়। এটি Exclude-এর বিপরীত।

উদাহরণ:

একই EventType ব্যবহার করে, আপনি ওয়েবিনার ইভেন্টের ধরন এক্সট্র্যাক্ট করতে পারেন:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent এখন "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Attending a ${event} online`);
}

attendOnlineEvent("webinar"); // বৈধ
// attendOnlineEvent("concert"); // ত্রুটি: '"concert"' টাইপের আর্গুমেন্ট '"webinar"' টাইপের প্যারামিটারে অ্যাসাইন করা যাবে না।

NonNullable<T>

NonNullable<T> একটি টাইপ তৈরি করে T থেকে null এবং undefined বাদ দিয়ে।

উদাহরণ:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString এখন string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // ত্রুটি: 'null' টাইপের আর্গুমেন্ট 'string' টাইপের প্যারামিটারে অ্যাসাইন করা যাবে না।
// processString(undefined); // ত্রুটি: 'undefined' টাইপের আর্গুমেন্ট 'string' টাইপের প্যারামিটারে অ্যাসাইন করা যাবে না।
processString("hello"); // বৈধ

ReturnType<T>

ReturnType<T> একটি ফাংশন T-এর রিটার্ন টাইপ নিয়ে একটি টাইপ তৈরি করে।

উদাহরণ:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting এখন string

const message: Greeting = greet("World");

console.log(message);

Parameters<T>

Parameters<T> একটি ফাংশন টাইপ T-এর প্যারামিটারের টাইপগুলি থেকে একটি টাপল টাইপ তৈরি করে।

উদাহরণ:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Event: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams এখন [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters<T>

ConstructorParameters<T> একটি কনস্ট্রাক্টর ফাংশন টাইপ T-এর প্যারামিটারের টাইপগুলি থেকে একটি টাপল বা অ্যারে টাইপ তৈরি করে। এটি একটি ক্লাসের কনস্ট্রাক্টরে যে আর্গুমেন্টগুলি পাস করতে হবে তাদের টাইপগুলি অনুমান করে।

উদাহরণ:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams এখন [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // আউটপুট: Hello, World

Required<T>

Required<T> একটি টাইপ তৈরি করে যেখানে T-এর সমস্ত প্রোপার্টি আবশ্যক (required) হিসাবে সেট করা থাকে। এটি সমস্ত ঐচ্ছিক প্রোপার্টিকে আবশ্যক করে তোলে।

উদাহরণ:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile এখন { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // ত্রুটি: '{ name: string; }' টাইপে 'age' প্রোপার্টিটি নেই কিন্তু 'Required' টাইপে এটি আবশ্যক।

অ্যাডভান্সড ইউটিলিটি টাইপস

টেমপ্লেট লিটারাল টাইপস

টেমপ্লেট লিটারাল টাইপস আপনাকে বিদ্যমান স্ট্রিং লিটারাল টাইপ, নম্বর লিটারাল টাইপ এবং আরও অনেক কিছু সংযুক্ত করে নতুন স্ট্রিং লিটারাল টাইপ তৈরি করতে দেয়। এটি শক্তিশালী স্ট্রিং-ভিত্তিক টাইপ ম্যানিপুলেশন সক্ষম করে।

উদাহরণ:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL এখন "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Making request to ${url}`);
}

makeRequest("GET /api/users"); // বৈধ
// makeRequest("INVALID /api/users"); // ত্রুটি

কন্ডিশনাল টাইপস

কন্ডিশনাল টাইপস আপনাকে এমন টাইপ সংজ্ঞায়িত করতে দেয় যা একটি শর্তের উপর নির্ভর করে, যা টাইপ রিলেশনশিপ হিসাবে প্রকাশ করা হয়। তারা টাইপের তথ্য এক্সট্র্যাক্ট করার জন্য infer কীওয়ার্ড ব্যবহার করে।

উদাহরণ:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// যদি T একটি Promise হয়, তবে টাইপটি হল U; অন্যথায়, টাইপটি হল T।

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data এখন number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // আবশ্যক
  city?: string; // ঐচ্ছিক
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// ফর্মের প্রাথমিক মান (ঐচ্ছিক ফিল্ড)
type InitialFormValues = Partial<FormData>;

// আপডেট করা ফর্মের মান (কিছু ফিল্ড অনুপস্থিত থাকতে পারে)
type UpdatedFormValues = Partial<FormData>;

// সাবমিশনের জন্য আবশ্যক ফিল্ড
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// আপনার ফর্ম কম্পোনেন্টগুলিতে এই টাইপগুলি ব্যবহার করুন
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // ত্রুটি: 'country' অনুপস্থিত
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; // ঠিক আছে

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// এপিআই প্রতিক্রিয়াকে আরও পঠনযোগ্য ফর্ম্যাটে রূপান্তর করুন
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

function fetchAndTransformData(url: string): Promise<UserData> {
    return fetch(url)
        .then(response => response.json())
        .then(data => transformApiResponse(data));
}


// আপনি এমনকি এইভাবে টাইপ প্রয়োগ করতে পারেন:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // বিভিন্ন পরিবেশের জন্য ঐচ্ছিক এপিআই ইউআরএল
  timeout?: number;  //ঐচ্ছিক
}

// ডিফল্ট সেটিংস
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// ব্যবহারকারীর সেটিংসকে ডিফল্ট সেটিংসের সাথে মার্জ করার ফাংশন
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// আপনার অ্যাপ্লিকেশনে মার্জ করা সেটিংস ব্যবহার করুন
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);