டைப்ஸ்கிரிப்ட் யூட்டிலிட்டி டைப்ஸ்களில் தேர்ச்சி பெறுதல்: உலகளாவிய டெவலப்பர்களுக்கான ஒரு நடைமுறை வழிகாட்டி

டைப்ஸ்கிரிப்ட், உங்கள் குறியீட்டின் டைப் பாதுகாப்பு, வாசிப்புத்திறன் மற்றும் பராமரிப்புத்திறனை கணிசமாக மேம்படுத்தக்கூடிய, சக்திவாய்ந்த உள்ளமைக்கப்பட்ட யூட்டிலிட்டி டைப்ஸ்களின் தொகுப்பை வழங்குகிறது. இந்த யூட்டிலிட்டி டைப்ஸ் அடிப்படையில் முன்பே வரையறுக்கப்பட்ட டைப் மாற்றங்கள் ஆகும். இவற்றை ஏற்கனவே உள்ள டைப்ஸ்களுக்குப் பயன்படுத்தலாம். இது மீண்டும் மீண்டும் எழுதப்படும் மற்றும் பிழையான குறியீட்டை எழுதுவதிலிருந்து உங்களைக் காப்பாற்றுகிறது. இந்த வழிகாட்டி, உலகெங்கிலும் உள்ள டெவலப்பர்களுடன் தொடர்புடைய நடைமுறை எடுத்துக்காட்டுகளுடன் பல்வேறு யூட்டிலிட்டி டைப்ஸ்களை ஆராயும்.

யூட்டிலிட்டி டைப்ஸ்களை ஏன் பயன்படுத்த வேண்டும்?

யூட்டிலிட்டி டைப்ஸ் பொதுவான டைப் கையாளுதல் சூழ்நிலைகளைக் கையாளுகின்றன. அவற்றைப் பயன்படுத்துவதன் மூலம், நீங்கள்:

• தேவையற்ற குறியீட்டைக் குறைத்தல்: மீண்டும் மீண்டும் டைப் வரையறைகளை எழுதுவதைத் தவிர்க்கவும்.
• டைப் பாதுகாப்பை மேம்படுத்துதல்: உங்கள் குறியீடு டைப் கட்டுப்பாடுகளுக்கு இணங்குவதை உறுதிசெய்யுங்கள்.
• குறியீட்டின் வாசிப்புத்திறனை மேம்படுத்துதல்: உங்கள் டைப் வரையறைகளை மிகவும் சுருக்கமாகவும், புரிந்துகொள்ள எளிதாகவும் ஆக்குங்கள்.
• பராமரிப்புத்திறனை அதிகரித்தல்: மாற்றங்களை எளிதாக்குங்கள் மற்றும் பிழைகளை அறிமுகப்படுத்தும் அபாயத்தைக் குறைக்கவும்.

முக்கிய யூட்டிலிட்டி டைப்ஸ்

Partial<T>

Partial<T> என்பது T இன் அனைத்து பண்புகளும் (properties) விருப்பத்திற்குரியதாக (optional) அமைக்கப்பட்டுள்ள ஒரு டைப்பை உருவாக்குகிறது. பகுதி புதுப்பிப்புகள் (partial updates) அல்லது உள்ளமைவு ஆப்ஜெக்ட்களுக்கான (configuration objects) ஒரு டைப்பை உருவாக்க விரும்பும்போது இது மிகவும் பயனுள்ளதாக இருக்கும்.

எடுத்துக்காட்டு:

நீங்கள் பல்வேறு பிராந்தியங்களில் இருந்து வாடிக்கையாளர்களைக் கொண்ட ஒரு இ-காமர்ஸ் தளத்தை உருவாக்குகிறீர்கள் என்று கற்பனை செய்து கொள்ளுங்கள். உங்களிடம் ஒரு 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) உறுதிப்படுத்த மதிப்புமிக்கது.

எடுத்துக்காட்டு:

உங்கள் உலகளாவிய பயன்பாட்டிற்கான ஒரு உள்ளமைவு ஆப்ஜெக்டை (configuration object) கருத்தில் கொள்ளுங்கள்:

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 என்பது நீங்கள் சேர்க்க விரும்பும் பண்புப் பெயர்களைக் குறிக்கும் ஸ்டிரிங் லிட்டரல் டைப்ஸ்களின் யூனியன் (union) ஆகும்.

எடுத்துக்காட்டு:

உங்களிடம் பல்வேறு பண்புகளுடன் ஒரு Event இன்டர்ஃபேஸ் இருப்பதாக வைத்துக்கொள்வோம்:

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

ஒரு குறிப்பிட்ட காட்சிப் பகுதிக்கு (display component) உங்களுக்கு 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 இன்டர்ஃபேஸைப் பயன்படுத்தி, நீங்கள் புதிய நிகழ்வுகளை உருவாக்குவதற்கான ஒரு டைப்பை உருவாக்க விரும்பினால், பொதுவாக பின்களத்தால் (backend) உருவாக்கப்படும் id பண்பை நீங்கள் தவிர்க்க விரும்பலாம்:

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

function createEvent(event: NewEvent): void {
  // ... ஒரு புதிய நிகழ்வை உருவாக்குவதற்கான செயலாக்கம்
}

Record<K, T>

Record<K, T> என்பது ஒரு ஆப்ஜெக்ட் டைப்பை உருவாக்குகிறது, அதன் பண்பு விசைகள் (property keys) K ஆகவும் அதன் பண்பு மதிப்புகள் (property values) T ஆகவும் இருக்கும். K என்பது ஸ்டிரிங் லிட்டரல் டைப்ஸ், எண் லிட்டரல் டைப்ஸ், அல்லது ஒரு சிம்பலின் (symbol) யூனியனாக இருக்கலாம். இது அகராதிகள் (dictionaries) அல்லது மேப்ஸ்களை (maps) உருவாக்க ஏற்றது.

எடுத்துக்காட்டு:

உங்கள் பயன்பாட்டின் பயனர் இடைமுகத்திற்கான மொழிபெயர்ப்புகளை நீங்கள் சேமிக்க வேண்டும் என்று கற்பனை செய்து பாருங்கள். உங்கள் மொழிபெயர்ப்புகளுக்கான ஒரு டைப்பை வரையறுக்க நீங்கள் 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 என்ற ஃபங்ஷன் டைப்பின் அளவுருக்களின் (parameters) டைப்ஸ்களிலிருந்து ஒரு டப்பிள் (tuple) டைப்பை உருவாக்குகிறது.

எடுத்துக்காட்டு:

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) அமைக்கப்பட்டுள்ள ஒரு டைப்பை உருவாக்குகிறது. இது அனைத்து விருப்பத்திற்குரிய (optional) பண்புகளையும் கட்டாயமாக்குகிறது.

எடுத்துக்காட்டு:

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;
}

// API பதிலை மிகவும் படிக்கக்கூடிய வடிவத்திற்கு மாற்றவும்
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; // வெவ்வேறு சூழல்களுக்கான விருப்பத்திற்குரிய API URL
  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);