టైప్‌స్క్రిప్ట్‌తో టైప్-సేఫ్ API కాల్స్: ఒక సమగ్ర గైడ్

ఆధునిక వెబ్ డెవలప్‌మెంట్‌లో, APIలతో ఇంటరాక్ట్ అవ్వడం ఒక ప్రాథమికమైన పని. టైప్‌స్క్రిప్ట్, దాని శక్తివంతమైన టైప్ సిస్టమ్‌తో, టైప్-సేఫ్ API కాల్స్‌ను ప్రారంభించడం ద్వారా మీ అప్లికేషన్‌ల విశ్వసనీయత మరియు నిర్వహణను నిర్ధారించడంలో గణనీయమైన ప్రయోజనాన్ని అందిస్తుంది. ఈ గైడ్ టైప్‌స్క్రిప్ట్ యొక్క ఫీచర్‌లను ఉపయోగించి శక్తివంతమైన మరియు దోషరహిత API ఇంటరాక్షన్‌లను ఎలా నిర్మించాలో అన్వేషిస్తుంది, ఉత్తమ పద్ధతులు, అధునాతన టెక్నిక్‌లు మరియు వాస్తవ-ప్రపంచ ఉదాహరణలను కవర్ చేస్తుంది.

API కాల్స్ కోసం టైప్ సేఫ్టీ ఎందుకు ముఖ్యం

APIలతో పనిచేస్తున్నప్పుడు, మీరు తప్పనిసరిగా బాహ్య మూలం నుండి వస్తున్న డేటాతో వ్యవహరిస్తున్నారు. ఈ డేటా మీరు ఊహించిన ఫార్మాట్‌లో ఎల్లప్పుడూ ఉండకపోవచ్చు, ఇది రన్‌టైమ్ ఎర్రర్‌లకు మరియు ఊహించని ప్రవర్తనకు దారితీస్తుంది. టైప్ సేఫ్టీ మీరు స్వీకరించే డేటా ముందుగా నిర్వచించిన నిర్మాణానికి అనుగుణంగా ఉందని ధృవీకరించడం ద్వారా ఒక కీలకమైన రక్షణ పొరను అందిస్తుంది, డెవలప్‌మెంట్ ప్రక్రియలో ప్రారంభంలోనే సంభావ్య సమస్యలను పట్టుకుంటుంది.

• తగ్గిన రన్‌టైమ్ ఎర్రర్స్: కంపైల్ సమయంలో టైప్ చెకింగ్, అవి ప్రొడక్షన్‌కు చేరకముందే టైప్-సంబంధిత ఎర్రర్‌లను గుర్తించి, సరిచేయడానికి సహాయపడుతుంది.
• మెరుగైన కోడ్ మెయింటెనెబిలిటీ: స్పష్టమైన టైప్ నిర్వచనాలు మీ కోడ్‌ను అర్థం చేసుకోవడానికి మరియు సవరించడానికి సులభతరం చేస్తాయి, రీఫ్యాక్టరింగ్ సమయంలో బగ్స్‌ను ప్రవేశపెట్టే ప్రమాదాన్ని తగ్గిస్తాయి.
• మెరుగైన కోడ్ రీడబిలిటీ: టైప్ అనోటేషన్లు విలువైన డాక్యుమెంటేషన్‌ను అందిస్తాయి, డెవలపర్‌లకు ఆశించిన డేటా నిర్మాణాలను అర్థం చేసుకోవడం సులభతరం చేస్తాయి.
• మెరుగైన డెవలపర్ అనుభవం: టైప్ చెకింగ్ మరియు ఆటోకంప్లీషన్ కోసం IDE మద్దతు డెవలపర్ అనుభవాన్ని గణనీయంగా మెరుగుపరుస్తుంది మరియు ఎర్రర్‌ల సంభావ్యతను తగ్గిస్తుంది.

మీ టైప్‌స్క్రిప్ట్ ప్రాజెక్ట్‌ను సెటప్ చేయడం

API కాల్స్‌లోకి వెళ్లే ముందు, మీకు ఒక టైప్‌స్క్రిప్ట్ ప్రాజెక్ట్ సెటప్ చేయబడిందని నిర్ధారించుకోండి. మీరు మొదటి నుండి ప్రారంభిస్తుంటే, మీరు దీనిని ఉపయోగించి ఒక కొత్త ప్రాజెక్ట్‌ను ప్రారంభించవచ్చు:

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

`tsconfig.json` ఫైల్‌ను డిఫాల్ట్ టైప్‌స్క్రిప్ట్ కంపైలర్ ఆప్షన్‌లతో ఇది సృష్టిస్తుంది. మీ ప్రాజెక్ట్ అవసరాలకు అనుగుణంగా మీరు ఈ ఆప్షన్‌లను కస్టమైజ్ చేయవచ్చు. ఉదాహరణకు, మీరు కఠినమైన టైప్ చెకింగ్ కోసం స్ట్రిక్ట్ మోడ్‌ను ఎనేబుల్ చేయాలనుకోవచ్చు:

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

API రెస్పాన్స్‌ల కోసం టైప్‌లను నిర్వచించడం

టైప్-సేఫ్ API కాల్స్‌ను సాధించడంలో మొదటి దశ, API నుండి మీరు స్వీకరించాలని ఆశించే డేటా యొక్క నిర్మాణాన్ని సూచించే టైప్‌స్క్రిప్ట్ టైప్‌లను నిర్వచించడం. ఇది సాధారణంగా `interface` లేదా `type` డిక్లరేషన్‌లను ఉపయోగించి చేయబడుతుంది.

ఇంటర్‌ఫేస్‌లను ఉపయోగించడం

ఆబ్జెక్ట్ యొక్క ఆకారాన్ని నిర్వచించడానికి ఇంటర్‌ఫేస్‌లు ఒక శక్తివంతమైన మార్గం. ఉదాహరణకు, మీరు ఒక API నుండి యూజర్ల జాబితాను పొందుతుంటే, మీరు ఈ విధంగా ఒక ఇంటర్‌ఫేస్‌ను నిర్వచించవచ్చు:

interface User {
  id: number;
  name: string;
  email: string;
  address?: string; // Optional property
  phone?: string; // Optional property
  website?: string; // Optional property
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

ప్రాపర్టీ పేరు తర్వాత ఉన్న `?` ఆ ప్రాపర్టీ ఆప్షనల్ అని సూచిస్తుంది. కొన్ని ఫీల్డ్స్ మిస్ అయ్యే అవకాశం ఉన్న API రెస్పాన్స్‌లను హ్యాండిల్ చేయడానికి ఇది ఉపయోగపడుతుంది.

టైప్‌లను ఉపయోగించడం

టైప్‌లు ఇంటర్‌ఫేస్‌ల మాదిరిగానే ఉంటాయి కానీ యూనియన్ టైప్స్ మరియు ఇంటర్‌సెక్షన్ టైప్స్‌ను నిర్వచించే సామర్థ్యంతో సహా మరింత ఫ్లెక్సిబిలిటీని అందిస్తాయి. పైన పేర్కొన్న ఇంటర్‌ఫేస్‌తో సమానమైన ఫలితాన్ని మీరు ఒక టైప్‌ను ఉపయోగించి సాధించవచ్చు:

type User = {
  id: number;
  name: string;
  email: string;
  address?: string; // Optional property
  phone?: string; // Optional property
  website?: string; // Optional property
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

సాధారణ ఆబ్జెక్ట్ నిర్మాణాల కోసం, ఇంటర్‌ఫేస్‌లు మరియు టైప్‌లు తరచుగా పరస్పరం మార్చుకోవచ్చు. అయితే, మరింత సంక్లిష్టమైన సందర్భాలతో వ్యవహరించేటప్పుడు టైప్‌లు మరింత శక్తివంతంగా మారతాయి.

ఆక్సియోస్‌తో API కాల్స్ చేయడం

జావాస్క్రిప్ట్ మరియు టైప్‌స్క్రిప్ట్‌లో API రిక్వెస్ట్‌లను చేయడానికి ఆక్సియోస్ (Axios) ఒక ప్రసిద్ధ HTTP క్లయింట్. ఇది ఒక శుభ్రమైన మరియు స్పష్టమైన APIని అందిస్తుంది, వివిధ HTTP పద్ధతులు, రిక్వెస్ట్ హెడర్‌లు మరియు రెస్పాన్స్ డేటాను హ్యాండిల్ చేయడం సులభం చేస్తుంది.

ఆక్సియోస్‌ను ఇన్‌స్టాల్ చేయడం

npm install axios

ఒక టైప్డ్ API కాల్ చేయడం

ఆక్సియోస్‌తో ఒక టైప్-సేఫ్ 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 fetching users:', error);
    throw error;
  }
}

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

ఈ ఉదాహరణలో, `axios.get('...')` టైప్‌స్క్రిప్ట్‌కు రెస్పాన్స్ డేటా `User` ఆబ్జెక్ట్‌ల శ్రేణిగా ఉండాలని చెబుతుంది. ఇది రెస్పాన్స్ డేటాతో పనిచేసేటప్పుడు టైప్‌స్క్రిప్ట్ టైప్ చెకింగ్ మరియు ఆటోకంప్లీషన్ అందించడానికి అనుమతిస్తుంది.

వివిధ HTTP పద్ధతులను హ్యాండిల్ చేయడం

ఆక్సియోస్ `GET`, `POST`, `PUT`, `DELETE`, మరియు `PATCH` వంటి వివిధ HTTP పద్ధతులకు మద్దతు ఇస్తుంది. వివిధ రకాల 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 creating user:', 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('Created user:', user);
});

ఈ ఉదాహరణలో, `Omit` ఒక టైప్‌ను సృష్టిస్తుంది, అది `User` మాదిరిగానే ఉంటుంది కానీ `id` ప్రాపర్టీ లేకుండా ఉంటుంది. కొత్త యూజర్‌ను సృష్టించేటప్పుడు `id` సాధారణంగా సర్వర్ ద్వారా జనరేట్ చేయబడుతుంది కాబట్టి ఇది ఉపయోగకరంగా ఉంటుంది.

ఫెచ్ APIని ఉపయోగించడం

ఫెచ్ (Fetch) API అనేది HTTP రిక్వెస్ట్‌లను చేయడానికి ఒక అంతర్నిర్మిత జావాస్క్రిప్ట్ API. ఇది ఆక్సియోస్ కంటే ప్రాథమికమైనది అయినప్పటికీ, టైప్-సేఫ్ API కాల్స్‌ను సాధించడానికి దీనిని టైప్‌స్క్రిప్ట్‌తో కూడా ఉపయోగించవచ్చు. మీ అవసరాలకు సరిపోతే ఒక డిపెండెన్సీని జోడించకుండా ఉండటానికి మీరు దీనిని ఇష్టపడవచ్చు.

ఫెచ్‌తో ఒక టైప్డ్ API కాల్ చేయడం

ఫెచ్‌తో ఒక టైప్-సేఫ్ 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 fetching users:', error);
    throw error;
  }
}

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

ఈ ఉదాహరణలో, `const data: User[] = await response.json();` టైప్‌స్క్రిప్ట్‌కు రెస్పాన్స్ డేటాను `User` ఆబ్జెక్ట్‌ల శ్రేణిగా పరిగణించాలని చెబుతుంది. ఇది టైప్‌స్క్రిప్ట్ టైప్ చెకింగ్ మరియు ఆటోకంప్లీషన్ చేయడానికి అనుమతిస్తుంది.

ఫెచ్‌తో వివిధ HTTP పద్ధతులను హ్యాండిల్ చేయడం

ఫెచ్‌తో వివిధ రకాల API రిక్వెస్ట్‌లను చేయడానికి, మీరు `method` మరియు `body` వంటి వివిధ ఆప్షన్‌లతో `fetch` ఫంక్షన్‌ను ఉపయోగించవచ్చు. ఉదాహరణకు, ఒక కొత్త యూజర్‌ను సృష్టించడానికి, మీరు ఈ క్రింది కోడ్‌ను ఉపయోగించవచ్చు:

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 creating user:', 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('Created user:', user);
});

API ఎర్రర్‌లను హ్యాండిల్ చేయడం

API కాల్స్‌లో ఎర్రర్ హ్యాండ్లింగ్ ఒక క్లిష్టమైన అంశం. నెట్‌వర్క్ కనెక్టివిటీ సమస్యలు, సర్వర్ ఎర్రర్‌లు మరియు చెల్లని రిక్వెస్ట్‌లతో సహా అనేక కారణాల వల్ల APIలు విఫలం కావచ్చు. మీ అప్లికేషన్ క్రాష్ అవ్వకుండా లేదా ఊహించని ప్రవర్తనను ప్రదర్శించకుండా నివారించడానికి ఈ ఎర్రర్‌లను సునాయాసంగా హ్యాండిల్ చేయడం చాలా అవసరం.

ట్రై-క్యాచ్ బ్లాక్‌లను ఉపయోగించడం

అసింక్రోనస్ కోడ్‌లో ఎర్రర్‌లను హ్యాండిల్ చేయడానికి అత్యంత సాధారణ మార్గం ట్రై-క్యాచ్ (try-catch) బ్లాక్‌లను ఉపయోగించడం. ఇది API కాల్ సమయంలో త్రో చేయబడిన ఏవైనా ఎక్సెప్షన్‌లను క్యాచ్ చేయడానికి మరియు వాటిని తగిన విధంగా హ్యాండిల్ చేయడానికి మిమ్మల్ని అనుమతిస్తుంది.

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  } catch (error) {
    console.error('Error fetching users:', error);
    // Handle the error, e.g., display an error message to the user
    throw error; // Re-throw the error to allow calling code to handle it as well
  }
}

నిర్దిష్ట ఎర్రర్ కోడ్‌లను హ్యాండిల్ చేయడం

APIలు తరచుగా జరిగిన ఎర్రర్ రకాన్ని సూచించడానికి నిర్దిష్ట ఎర్రర్ కోడ్‌లను తిరిగి ఇస్తాయి. మరింత నిర్దిష్టమైన ఎర్రర్ హ్యాండ్లింగ్ అందించడానికి మీరు ఈ ఎర్రర్ కోడ్‌లను ఉపయోగించవచ్చు. ఉదాహరణకు, మీరు 500 ఇంటర్నల్ సర్వర్ ఎర్రర్ కంటే 404 నాట్ ఫౌండ్ ఎర్రర్ కోసం వేరే ఎర్రర్ సందేశాన్ని ప్రదర్శించాలనుకోవచ్చు.

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(`User with ID ${id} not found.`);
      return null; // Or throw a custom error
    } else {
      console.error('Error fetching user:', error);
      throw error;
    }
  }
}

fetchUser(123).then(user => {
  if (user) {
    console.log('User:', user);
  } else {
    console.log('User not found.');
  } 
});

కస్టమ్ ఎర్రర్ టైప్‌లను సృష్టించడం

మరింత సంక్లిష్టమైన ఎర్రర్ హ్యాండ్లింగ్ దృశ్యాల కోసం, మీరు వివిధ రకాల 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, `User with ID ${id} not found.`);
    } else {
      console.error('Error fetching user:', error);
      throw new ApiError(500, 'Internal Server Error'); //Or any other suitable status code
    }
  }
}

fetchUser(123).catch(error => {
  if (error instanceof ApiError) {
    console.error(`API Error: ${error.statusCode} - ${error.message}`);
  } else {
    console.error('An unexpected error occurred:', error);
  } 
});

డేటా వాలిడేషన్

టైప్‌స్క్రిప్ట్ యొక్క టైప్ సిస్టమ్‌తో కూడా, మీరు APIల నుండి స్వీకరించే డేటాను రన్‌టైమ్‌లో వాలిడేట్ చేయడం చాలా ముఖ్యం. APIలు తమ రెస్పాన్స్ నిర్మాణాన్ని నోటీసు లేకుండా మార్చవచ్చు, మరియు మీ టైప్‌స్క్రిప్ట్ టైప్‌లు API యొక్క వాస్తవ రెస్పాన్స్‌తో ఎల్లప్పుడూ సంపూర్ణంగా సింక్రొనైజ్ కాకపోవచ్చు.

రన్‌టైమ్ వాలిడేషన్ కోసం Zodని ఉపయోగించడం

రన్‌టైమ్ డేటా వాలిడేషన్ కోసం Zod ఒక ప్రసిద్ధ టైప్‌స్క్రిప్ట్ లైబ్రరీ. ఇది మీ డేటా యొక్క ఆశించిన నిర్మాణాన్ని వివరించే స్కీమాలను నిర్వచించడానికి మిమ్మల్ని అనుమతిస్తుంది మరియు ఆ తర్వాత రన్‌టైమ్‌లో ఆ స్కీమాలకు వ్యతిరేకంగా డేటాను వాలిడేట్ చేయడానికి అనుమతిస్తుంది.

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 fetching users:', error);
    throw error;
  }
}

ఈ ఉదాహరణలో, `z.array(userSchema).parse(response.data)` రెస్పాన్స్ డేటా `userSchema`కు అనుగుణంగా ఉన్న ఆబ్జెక్ట్‌ల శ్రేణి అని వాలిడేట్ చేస్తుంది. డేటా స్కీమాకు అనుగుణంగా లేకపోతే, Zod ఒక ఎర్రర్‌ను త్రో చేస్తుంది, దానిని మీరు తగిన విధంగా హ్యాండిల్ చేయవచ్చు.

అధునాతన టెక్నిక్‌లు

పునర్వినియోగ API ఫంక్షన్‌ల కోసం జెనరిక్స్‌ను ఉపయోగించడం

వివిధ రకాల డేటాను హ్యాండిల్ చేయగల పునర్వినియోగ API ఫంక్షన్‌లను వ్రాయడానికి జెనరిక్స్ మిమ్మల్ని అనుమతిస్తాయి. ఉదాహరణకు, మీరు ఏ API ఎండ్‌పాయింట్ నుండి అయినా డేటాను ఫెచ్ చేసి, దానిని సరైన టైప్‌తో తిరిగి ఇచ్చే ఒక జెనరిక్ `fetchData` ఫంక్షన్‌ను సృష్టించవచ్చు.

async function fetchData(url: string): Promise {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error(`Error fetching data from ${url}:`, error);
    throw error;
  }
}

// Usage
fetchData('https://jsonplaceholder.typicode.com/users').then(users => {
  console.log('Users:', users);
});

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

గ్లోబల్ ఎర్రర్ హ్యాండ్లింగ్ కోసం ఇంటర్‌సెప్టర్‌లను ఉపయోగించడం

ఆక్సియోస్ మీ కోడ్ ద్వారా హ్యాండిల్ చేయబడకముందే రిక్వెస్ట్‌లు మరియు రెస్పాన్స్‌లను ఇంటర్‌సెప్ట్ చేయడానికి మిమ్మల్ని అనుమతించే ఇంటర్‌సెప్టర్‌లను అందిస్తుంది. మీరు ఎర్రర్‌లను లాగింగ్ చేయడం లేదా యూజర్‌కు ఎర్రర్ సందేశాలను ప్రదర్శించడం వంటి గ్లోబల్ ఎర్రర్ హ్యాండ్లింగ్‌ను అమలు చేయడానికి ఇంటర్‌సెప్టర్‌లను ఉపయోగించవచ్చు.

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('Global error handler:', error);
    // Display an error message to the user
    return Promise.reject(error);
  }
);

API URLల కోసం ఎన్విరాన్‌మెంట్ వేరియబుల్స్‌ను ఉపయోగించడం

మీ కోడ్‌లో API URLలను హార్డ్‌కోడింగ్ చేయకుండా ఉండటానికి, మీరు URLలను నిల్వ చేయడానికి ఎన్విరాన్‌మెంట్ వేరియబుల్స్‌ను ఉపయోగించవచ్చు. ఇది డెవలప్‌మెంట్, స్టేజింగ్ మరియు ప్రొడక్షన్ వంటి వివిధ ఎన్విరాన్‌మెంట్‌ల కోసం మీ అప్లికేషన్‌ను కాన్ఫిగర్ చేయడం సులభం చేస్తుంది.

`.env` ఫైల్ మరియు `dotenv` ప్యాకేజీని ఉపయోగించి ఉదాహరణ.

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

// Install dotenv
npm install dotenv

// Import and configure dotenv
import * as dotenv from 'dotenv'
dotenv.config()

const apiUrl = process.env.API_URL || 'http://localhost:3000'; // provide a default value

async function fetchData(endpoint: string): Promise {
  try {
    const response = await axios.get(`${apiUrl}/${endpoint}`);
    return response.data;
  } catch (error) {
    console.error(`Error fetching data from ${apiUrl}/${endpoint}:`, error);
    throw error;
  }
}

ముగింపు

శక్తివంతమైన, నిర్వహించగల, మరియు దోషరహిత వెబ్ అప్లికేషన్‌లను నిర్మించడానికి టైప్-సేఫ్ API కాల్స్ చాలా అవసరం. టైప్‌స్క్రిప్ట్ API రెస్పాన్స్‌ల కోసం టైప్‌లను నిర్వచించడానికి, రన్‌టైమ్‌లో డేటాను వాలిడేట్ చేయడానికి మరియు ఎర్రర్‌లను సునాయాసంగా హ్యాండిల్ చేయడానికి మిమ్మల్ని అనుమతించే శక్తివంతమైన ఫీచర్‌లను అందిస్తుంది. ఈ గైడ్‌లో వివరించిన ఉత్తమ పద్ధతులు మరియు టెక్నిక్‌లను అనుసరించడం ద్వారా, మీరు మీ API ఇంటరాక్షన్‌ల నాణ్యత మరియు విశ్వసనీయతను గణనీయంగా మెరుగుపరచవచ్చు.

టైప్‌స్క్రిప్ట్ మరియు ఆక్సియోస్, Zod వంటి లైబ్రరీలను ఉపయోగించడం ద్వారా, మీ API కాల్స్ టైప్-సేఫ్ అని, మీ డేటా వాలిడేట్ చేయబడిందని మరియు మీ ఎర్రర్‌లు సునాయాసంగా హ్యాండిల్ చేయబడ్డాయని మీరు నిర్ధారించుకోవచ్చు. ఇది మరింత శక్తివంతమైన మరియు నిర్వహించగల అప్లికేషన్‌లకు దారితీస్తుంది.

టైప్‌స్క్రిప్ట్ యొక్క టైప్ సిస్టమ్‌తో కూడా, మీ డేటాను రన్‌టైమ్‌లో ఎల్లప్పుడూ వాలిడేట్ చేయాలని గుర్తుంచుకోండి. APIలు మారవచ్చు, మరియు మీ టైప్‌లు API యొక్క వాస్తవ రెస్పాన్స్‌తో ఎల్లప్పుడూ సంపూర్ణంగా సింక్రొనైజ్ కాకపోవచ్చు. మీ డేటాను రన్‌టైమ్‌లో వాలిడేట్ చేయడం ద్వారా, మీ అప్లికేషన్‌లో సమస్యలను కలిగించే ముందు మీరు సంభావ్య సమస్యలను పట్టుకోవచ్చు.

హ్యాపీ కోడింగ్!