M

MLOG

मराठी

मजबूत, सुलभ आणि त्रुटी-मुक्त वेब ॲप्लिकेशन्ससाठी टाइपस्क्रिप्टमध्ये टाइप-सेफ API कॉल्समध्ये प्राविण्य मिळवा. सर्वोत्तम पद्धती आणि प्रगत तंत्रे शिका.

टाइपस्क्रिप्टसह टाइप-सेफ API कॉल्स: एक सर्वसमावेशक मार्गदर्शक

आधुनिक वेब डेव्हलपमेंटमध्ये, API सह संवाद साधणे हे एक मूलभूत कार्य आहे. टाइपस्क्रिप्ट, आपल्या शक्तिशाली टाइप सिस्टमसह, टाइप-सेफ API कॉल्स सक्षम करून आपल्या ॲप्लिकेशन्सची विश्वसनीयता आणि देखभाल सुलभता सुनिश्चित करण्यात महत्त्वपूर्ण फायदा देते. हे मार्गदर्शक टाइपस्क्रिप्टच्या वैशिष्ट्यांचा वापर करून मजबूत आणि त्रुटी-मुक्त API संवाद कसे तयार करावे हे स्पष्ट करेल, ज्यामध्ये सर्वोत्तम पद्धती, प्रगत तंत्रे आणि वास्तविक-जगातील उदाहरणे समाविष्ट आहेत.

API कॉल्ससाठी टाइप सेफ्टी का महत्त्वाची आहे

जेव्हा तुम्ही API सह काम करता, तेव्हा तुम्ही मुळात बाह्य स्रोताकडून येणाऱ्या डेटाशी व्यवहार करत असता. हा डेटा नेहमी तुमच्या अपेक्षेनुसार फॉरमॅटमध्ये असेलच असे नाही, ज्यामुळे रनटाइम त्रुटी आणि अनपेक्षित वर्तन होऊ शकते. टाइप सेफ्टी संरक्षणाची एक महत्त्वाची थर प्रदान करते, ज्याद्वारे तुम्हाला मिळणारा डेटा पूर्वनिर्धारित संरचनेनुसार आहे की नाही हे तपासले जाते, ज्यामुळे विकासाच्या प्रक्रियेच्या सुरुवातीलाच संभाव्य समस्या पकडता येतात.

तुमचा टाइपस्क्रिप्ट प्रोजेक्ट सेट करणे

API कॉल्समध्ये जाण्यापूर्वी, तुमचा टाइपस्क्रिप्ट प्रोजेक्ट सेट असल्याची खात्री करा. तुम्ही सुरवातीपासून सुरू करत असाल, तर तुम्ही नवीन प्रोजेक्ट सुरू करण्यासाठी हे वापरू शकता:

npm init -y
npm install typescript --save-dev
tsc --init

हे `tsconfig.json` फाईल डिफॉल्ट टाइपस्क्रिप्ट कंपाइलर पर्यायांसह तयार करेल. तुम्ही तुमच्या प्रोजेक्टच्या गरजेनुसार हे पर्याय कस्टमाइझ करू शकता. उदाहरणार्थ, तुम्ही अधिक कठोर टाइप तपासणीसाठी स्ट्रिक्ट मोड (strict mode) सक्षम करू शकता:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

API रिस्पॉन्ससाठी टाइप परिभाषित करणे

टाइप-सेफ API कॉल्स साध्य करण्यासाठी पहिली पायरी म्हणजे API कडून मिळणाऱ्या डेटाची रचना दर्शवणारे टाइपस्क्रिप्ट टाइप्स परिभाषित करणे. हे सहसा `interface` किंवा `type` घोषणा वापरून केले जाते.

इंटरफेस वापरणे

इंटरफेस हे ऑब्जेक्टचा आकार परिभाषित करण्याचा एक शक्तिशाली मार्ग आहे. उदाहरणार्थ, जर तुम्ही API मधून वापरकर्त्यांची (users) यादी मिळवत असाल, तर तुम्ही असा इंटरफेस परिभाषित करू शकता:

interface User {
  id: number;
  name: string;
  email: string;
  address?: string; // ऐच्छिक प्रॉपर्टी
  phone?: string; // ऐच्छिक प्रॉपर्टी
  website?: string; // ऐच्छिक प्रॉपर्टी
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

प्रॉपर्टीच्या नावानंतरचे `?` चिन्ह दर्शवते की प्रॉपर्टी ऐच्छिक आहे. हे अशा API प्रतिसादांना हाताळण्यासाठी उपयुक्त आहे जेथे काही फील्ड्स गहाळ असू शकतात.

टाइप्स वापरणे

टाइप्स हे इंटरफेससारखेच असतात परंतु ते अधिक लवचिकता देतात, ज्यात युनियन टाइप्स आणि इंटरसेक्शन टाइप्स परिभाषित करण्याची क्षमता समाविष्ट आहे. तुम्ही वरील इंटरफेसप्रमाणेच परिणाम टाइप वापरून मिळवू शकता:

type User = {
  id: number;
  name: string;
  email: string;
  address?: string; // ऐच्छिक प्रॉपर्टी
  phone?: string; // ऐच्छिक प्रॉपर्टी
  website?: string; // ऐच्छिक प्रॉपर्टी
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

साध्या ऑब्जेक्ट रचनांसाठी, इंटरफेस आणि टाइप्स अनेकदा अदलाबदल करण्यायोग्य असतात. तथापि, अधिक क्लिष्ट परिस्थिती हाताळताना टाइप्स अधिक शक्तिशाली ठरतात.

Axios सह API कॉल्स करणे

Axios हे जावास्क्रिप्ट आणि टाइपस्क्रिप्टमध्ये API विनंत्या करण्यासाठी एक लोकप्रिय HTTP क्लायंट आहे. हे एक स्वच्छ आणि अंतर्ज्ञानी API प्रदान करते, ज्यामुळे विविध HTTP मेथड्स, रिक्वेस्ट हेडर्स आणि रिस्पॉन्स डेटा हाताळणे सोपे होते.

Axios इन्स्टॉल करणे

npm install axios

टाइप केलेला API कॉल करणे

Axios सह टाइप-सेफ API कॉल करण्यासाठी, तुम्ही `axios.get` मेथड वापरू शकता आणि जेनेरिक्स वापरून अपेक्षित रिस्पॉन्स टाइप निर्दिष्ट करू शकता:

import axios from 'axios';

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  } catch (error) {
    console.error('वापरकर्त्यांना आणताना त्रुटी:', error);
    throw error;
  }
}

fetchUsers().then(users => {
  users.forEach(user => {
    console.log(user.name);
  });
});

या उदाहरणात, `axios.get('...')` टाइपस्क्रिप्टला सांगते की रिस्पॉन्स डेटा `User` ऑब्जेक्ट्सचा ॲरे (array) असणे अपेक्षित आहे. यामुळे टाइपस्क्रिप्टला रिस्पॉन्स डेटासह काम करताना टाइप तपासणी आणि ऑटो-कम्प्लिशन प्रदान करण्याची परवानगी मिळते.

विविध HTTP मेथड्स हाताळणे

Axios विविध HTTP मेथड्सना समर्थन देते, ज्यात `GET`, `POST`, `PUT`, `DELETE`, आणि `PATCH` यांचा समावेश आहे. तुम्ही विविध प्रकारच्या API विनंत्या करण्यासाठी संबंधित मेथड्स वापरू शकता. उदाहरणार्थ, नवीन वापरकर्ता तयार करण्यासाठी, तुम्ही `axios.post` मेथड वापरू शकता:

async function createUser(user: Omit): Promise {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/users', user);
    return response.data;
  } catch (error) {
    console.error('वापरकर्ता तयार करताना त्रुटी:', error);
    throw error;
  }
}

const newUser = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  address: '123 Main St',
  phone: '555-1234',
  website: 'example.com',
  company: {
    name: 'Example Corp',
    catchPhrase: 'Leading the way',
    bs: 'Innovative solutions'
  }
};

createUser(newUser).then(user => {
  console.log('तयार केलेला वापरकर्ता:', user);
});

या उदाहरणात, `Omit` एक असा टाइप तयार करतो जो `User` सारखाच असतो पण त्यात `id` प्रॉपर्टी नसते. हे उपयुक्त आहे कारण `id` सामान्यतः नवीन वापरकर्ता तयार करताना सर्व्हरद्वारे तयार केले जाते.

Fetch API वापरणे

Fetch API हे HTTP विनंत्या करण्यासाठी एक अंगभूत (built-in) जावास्क्रिप्ट API आहे. जरी ते Axios पेक्षा अधिक मूलभूत असले तरी, ते टाइपस्क्रिप्टसह टाइप-सेफ API कॉल्स साध्य करण्यासाठी देखील वापरले जाऊ शकते. तुमच्या गरजेनुसार असल्यास, तुम्ही अतिरिक्त डिपेन्डन्सी टाळण्यासाठी याला प्राधान्य देऊ शकता.

Fetch सह टाइप केलेला API कॉल करणे

Fetch सह टाइप-सेफ API कॉल करण्यासाठी, तुम्ही `fetch` फंक्शन वापरू शकता आणि नंतर अपेक्षित रिस्पॉन्स टाइप निर्दिष्ट करून प्रतिसाद JSON म्हणून पार्स करू शकता:

async function fetchUsers(): Promise {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data: User[] = await response.json();
    return data;
  } catch (error) {
    console.error('वापरकर्त्यांना आणताना त्रुटी:', error);
    throw error;
  }
}

fetchUsers().then(users => {
  users.forEach(user => {
    console.log(user.name);
  });
});

या उदाहरणात, `const data: User[] = await response.json();` टाइपस्क्रिप्टला सांगते की रिस्पॉन्स डेटा `User` ऑब्जेक्ट्सचा ॲरे (array) म्हणून हाताळला पाहिजे. यामुळे टाइपस्क्रिप्टला टाइप तपासणी आणि ऑटो-कम्प्लिशन करण्याची परवानगी मिळते.

Fetch सह विविध HTTP मेथड्स हाताळणे

Fetch सह विविध प्रकारच्या API विनंत्या करण्यासाठी, तुम्ही `fetch` फंक्शन विविध पर्यायांसह वापरू शकता, जसे की `method` आणि `body` पर्याय. उदाहरणार्थ, नवीन वापरकर्ता तयार करण्यासाठी, तुम्ही खालील कोड वापरू शकता:

async function createUser(user: Omit): Promise {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data: User = await response.json();
    return data;
  } catch (error) {
    console.error('वापरकर्ता तयार करताना त्रुटी:', error);
    throw error;
  }
}

const newUser = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  address: '123 Main St',
  phone: '555-1234',
  website: 'example.com',
  company: {
    name: 'Example Corp',
    catchPhrase: 'Leading the way',
    bs: 'Innovative solutions'
  }
};

createUser(newUser).then(user => {
  console.log('तयार केलेला वापरकर्ता:', user);
});

API त्रुटी हाताळणे

त्रुटी हाताळणे (Error handling) हे API कॉल्सचे एक महत्त्वाचे पैलू आहे. नेटवर्क कनेक्टिव्हिटी समस्या, सर्व्हर त्रुटी आणि अवैध विनंत्या यांसारख्या अनेक कारणांमुळे API अयशस्वी होऊ शकतात. तुमचा ॲप्लिकेशन क्रॅश होण्यापासून किंवा अनपेक्षित वर्तन प्रदर्शित करण्यापासून रोखण्यासाठी या त्रुटींना व्यवस्थित हाताळणे आवश्यक आहे.

Try-Catch ब्लॉक्स वापरणे

अससिंक्रोनस कोडमधील त्रुटी हाताळण्याचा सर्वात सामान्य मार्ग म्हणजे try-catch ब्लॉक्स वापरणे. हे तुम्हाला API कॉल दरम्यान फेकल्या गेलेल्या कोणत्याही अपवादांना (exceptions) पकडण्याची आणि त्यांना योग्यरित्या हाताळण्याची परवानगी देते.

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  } catch (error) {
    console.error('वापरकर्त्यांना आणताना त्रुटी:', error);
    // त्रुटी हाताळा, उदा., वापरकर्त्याला त्रुटी संदेश दर्शवा
    throw error; // त्रुटी पुन्हा फेका जेणेकरून कॉलिंग कोडलाही ती हाताळता येईल
  }
}

विशिष्ट एरर कोड्स हाताळणे

API अनेकदा झालेल्या त्रुटीचा प्रकार दर्शवण्यासाठी विशिष्ट एरर कोड परत करतात. तुम्ही अधिक विशिष्ट त्रुटी हाताळणी प्रदान करण्यासाठी हे एरर कोड वापरू शकता. उदाहरणार्थ, तुम्ही 404 Not Found त्रुटीसाठी 500 Internal Server Error पेक्षा वेगळा त्रुटी संदेश दाखवू इच्छित असाल.

async function fetchUser(id: number): Promise {
  try {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    return response.data;
  } catch (error: any) {
    if (error.response?.status === 404) {
      console.log(`ID ${id} असलेला वापरकर्ता सापडला नाही.`);
      return null; // किंवा सानुकूल त्रुटी फेका
    } else {
      console.error('वापरकर्ता आणताना त्रुटी:', error);
      throw error;
    }
  }
}

fetchUser(123).then(user => {
  if (user) {
    console.log('वापरकर्ता:', user);
  } else {
    console.log('वापरकर्ता सापडला नाही.');
  }
});

सानुकूल एरर टाइप्स तयार करणे

अधिक क्लिष्ट त्रुटी हाताळणीच्या परिस्थितीसाठी, तुम्ही विविध प्रकारच्या API त्रुटी दर्शवण्यासाठी सानुकूल एरर टाइप्स तयार करू शकता. हे तुम्हाला अधिक संरचित त्रुटी माहिती प्रदान करण्यास आणि त्रुटी अधिक प्रभावीपणे हाताळण्यास अनुमती देते.

class ApiError extends Error {
  constructor(public statusCode: number, message: string) {
    super(message);
    this.name = 'ApiError';
  }
}

async function fetchUser(id: number): Promise {
  try {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    return response.data;
  } catch (error: any) {
    if (error.response?.status === 404) {
      throw new ApiError(404, `ID ${id} असलेला वापरकर्ता सापडला नाही.`);
    } else {
      console.error('वापरकर्ता आणताना त्रुटी:', error);
      throw new ApiError(500, 'Internal Server Error'); //किंवा इतर कोणताही योग्य स्टेटस कोड
    }
  }
}

fetchUser(123).catch(error => {
  if (error instanceof ApiError) {
    console.error(`API त्रुटी: ${error.statusCode} - ${error.message}`);
  } else {
    console.error('एक अनपेक्षित त्रुटी आली:', error);
  }
});

डेटा व्हॅलिडेशन (Data Validation)

टाइपस्क्रिप्टच्या टाइप सिस्टमसह देखील, तुम्हाला API कडून रनटाइमवर मिळणाऱ्या डेटाची पडताळणी करणे महत्त्वाचे आहे. API सूचना न देता त्यांच्या प्रतिसादाची रचना बदलू शकतात आणि तुमचे टाइपस्क्रिप्ट टाइप्स API च्या वास्तविक प्रतिसादाशी नेहमीच पूर्णपणे जुळतील असे नाही.

रनटाइम व्हॅलिडेशनसाठी Zod वापरणे

Zod ही रनटाइम डेटा व्हॅलिडेशनसाठी एक लोकप्रिय टाइपस्क्रिप्ट लायब्ररी आहे. हे तुम्हाला तुमच्या डेटाच्या अपेक्षित रचनेचे वर्णन करणारे स्कीमा (schemas) परिभाषित करण्यास आणि नंतर रनटाइमवर त्या स्कीमांविरुद्ध डेटाची पडताळणी करण्यास अनुमती देते.

Zod इन्स्टॉल करणे

npm install zod

Zod सह API प्रतिसादांची पडताळणी करणे

Zod सह API प्रतिसादांची पडताळणी करण्यासाठी, तुम्ही तुमच्या टाइपस्क्रिप्ट टाइपशी जुळणारा Zod स्कीमा परिभाषित करू शकता आणि नंतर डेटाची पडताळणी करण्यासाठी `parse` मेथड वापरू शकता.

import { z } from 'zod';

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  address: z.string().optional(),
  phone: z.string().optional(),
  website: z.string().optional(),
  company: z.object({
    name: z.string(),
    catchPhrase: z.string(),
    bs: z.string(),
  }).optional(),
});

type User = z.infer;

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    const data = z.array(userSchema).parse(response.data);
    return data;
  } catch (error) {
    console.error('वापरकर्त्यांना आणताना त्रुटी:', error);
    throw error;
  }
}

या उदाहरणात, `z.array(userSchema).parse(response.data)` हे प्रमाणित करते की प्रतिसाद डेटा `userSchema` शी सुसंगत असलेल्या ऑब्जेक्ट्सचा ॲरे (array) आहे. जर डेटा स्कीमाशी सुसंगत नसेल, तर Zod एक त्रुटी फेकेल, जी तुम्ही नंतर योग्यरित्या हाताळू शकता.

प्रगत तंत्रे

पुन्हा वापरता येण्याजोग्या API फंक्शन्ससाठी जेनेरिक्स वापरणे

जेनेरिक्स तुम्हाला पुन्हा वापरता येण्याजोगी API फंक्शन्स लिहिण्याची परवानगी देतात जे विविध प्रकारच्या डेटा हाताळू शकतात. उदाहरणार्थ, तुम्ही एक जेनेरिक `fetchData` फंक्शन तयार करू शकता जे कोणत्याही API एंडपॉइंटवरून डेटा मिळवू शकते आणि तो योग्य टाइपसह परत करू शकते.

async function fetchData(url: string): Promise {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error(`${url} वरून डेटा आणताना त्रुटी:`, error);
    throw error;
  }
}

// वापर
fetchData('https://jsonplaceholder.typicode.com/users').then(users => {
  console.log('वापरकर्ते:', users);
});

fetchData<{ title: string; body: string }>('https://jsonplaceholder.typicode.com/todos/1').then(todo => {
    console.log('Todo', todo)
});

ग्लोबल एरर हँडलिंगसाठी इंटरसेप्टर्स वापरणे

Axios इंटरसेप्टर्स प्रदान करते जे तुम्हाला तुमच्या कोडद्वारे हाताळण्यापूर्वी विनंत्या आणि प्रतिसादांना अडवण्याची परवानगी देतात. तुम्ही ग्लोबल एरर हँडलिंग लागू करण्यासाठी इंटरसेप्टर्स वापरू शकता, जसे की त्रुटी लॉग करणे किंवा वापरकर्त्याला त्रुटी संदेश प्रदर्शित करणे.

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('ग्लोबल एरर हँडलर:', error);
    // वापरकर्त्याला त्रुटी संदेश दर्शवा
    return Promise.reject(error);
  }
);

API URLs साठी एनव्हायर्नमेंट व्हेरिएबल्स वापरणे

तुमच्या कोडमध्ये API URLs हार्डकोड करणे टाळण्यासाठी, तुम्ही URLs संग्रहित करण्यासाठी एनव्हायर्नमेंट व्हेरिएबल्स वापरू शकता. यामुळे विकास (development), स्टेजिंग (staging) आणि उत्पादन (production) यासारख्या विविध वातावरणासाठी तुमच्या ॲप्लिकेशनला कॉन्फिगर करणे सोपे होते.

`.env` फाईल आणि `dotenv` पॅकेज वापरून उदाहरण.

// .env
API_URL=https://api.example.com

// dotenv इन्स्टॉल करा
npm install dotenv

// dotenv इम्पोर्ट आणि कॉन्फिगर करा
import * as dotenv from 'dotenv'
dotenv.config()

const apiUrl = process.env.API_URL || 'http://localhost:3000'; // एक डिफॉल्ट मूल्य प्रदान करा

async function fetchData(endpoint: string): Promise {
  try {
    const response = await axios.get(`${apiUrl}/${endpoint}`);
    return response.data;
  } catch (error) {
    console.error(`${apiUrl}/${endpoint} वरून डेटा आणताना त्रुटी:`, error);
    throw error;
  }
}

निष्कर्ष

मजबूत, सुलभ आणि त्रुटी-मुक्त वेब ॲप्लिकेशन्स तयार करण्यासाठी टाइप-सेफ API कॉल्स आवश्यक आहेत. टाइपस्क्रिप्ट शक्तिशाली वैशिष्ट्ये प्रदान करते जे तुम्हाला API प्रतिसादांसाठी टाइप्स परिभाषित करण्यास, रनटाइमवर डेटाची पडताळणी करण्यास आणि त्रुटींना व्यवस्थित हाताळण्यास सक्षम करते. या मार्गदर्शकामध्ये वर्णन केलेल्या सर्वोत्तम पद्धती आणि तंत्रांचे पालन करून, तुम्ही तुमच्या API संवादांची गुणवत्ता आणि विश्वसनीयता लक्षणीयरीत्या सुधारू शकता.

टाइपस्क्रिप्ट आणि Axios व Zod सारख्या लायब्ररी वापरून, तुम्ही खात्री करू शकता की तुमचे API कॉल्स टाइप-सेफ आहेत, तुमचा डेटा प्रमाणित आहे, आणि तुमच्या त्रुटी व्यवस्थित हाताळल्या जातात. यामुळे अधिक मजबूत आणि सुलभ ॲप्लिकेशन्स तयार होतील.

लक्षात ठेवा, टाइपस्क्रिप्टच्या टाइप सिस्टमसह देखील, तुमचा डेटा नेहमी रनटाइमवर प्रमाणित करा. APIs बदलू शकतात, आणि तुमचे टाइप्स API च्या वास्तविक प्रतिसादाशी नेहमीच पूर्णपणे जुळतील असे नाही. रनटाइमवर तुमचा डेटा प्रमाणित करून, तुम्ही तुमच्या ॲप्लिकेशनमध्ये समस्या निर्माण होण्यापूर्वी संभाव्य समस्या पकडू शकता.

हॅपी कोडिंग!

टाइपस्क्रिप्टसह टाइप-सेफ API कॉल्स: एक सर्वसमावेशक मार्गदर्शक | MLOG