Swagger/OpenAPI जनरेशन TypeScript के लिए: लाइब्रेरीज़ और टूल्स

Swagger/OpenAPI जनरेशन TypeScript के लिए: API-क्लाइंट बनाने का स्वचालन

TypeScript में आधुनिक वेब एप्लिकेशन विकसित करते समय, OpenAPI स्पेसिफिकेशन (पहले Swagger के नाम से जाना जाता था) के माध्यम से वर्णित REST API के साथ एकीकरण की आवश्यकता अक्सर उत्पन्न होती है। टाइप, इंटरफ़ेस और क्लाइंट कोड को मैन्युअल रूप से लिखना न केवल बहुत समय लेता है, बल्कि इसमें त्रुटियों का भी खतरा होता है, खासकर जब बैकएंड बदलता है। OpenAPI स्पेसिफिकेशन से TypeScript कोड के स्वचालित जनरेशन के टूल्स मदद करते हैं। इस लेख में, हम तीन सबसे लोकप्रिय समाधानों पर विचार करेंगे: openapi-typescript, orval और swagger-typescript-api, और उनकी क्षमताओं की तुलना करेंगे।

OpenAPI से TypeScript जनरेशन की आवश्यकता क्यों है?

मुख्य उद्देश्य फ्रंटएंड और बैकएंड के बीच टाइप और क्लाइंट कोड का सिंक्रोनाइज़ेशन है। स्वचालित जनरेशन के लाभ:

• टाइप सुरक्षा: सभी एंडपॉइंट, अनुरोध पैरामीटर और प्रतिक्रियाएँ सख्त TypeScript टाइप प्राप्त करते हैं।
• अद्यतित रहना: स्पेसिफिकेशन बदलने पर, मैन्युअल रूप से संपादन किए बिना कोड को पुनः जनरेट करना पर्याप्त है।
• विकास में तेजी: डेवलपर को ऑटो-कम्प्लीशन (IntelliSense) के साथ API कॉल करने के लिए तैयार फ़ंक्शन मिलते हैं।
• त्रुटियों को कम करना: फ़ील्ड नामों में टाइपो और टाइप बेमेल को समाप्त करता है।

openapi-typescript

लाइब्रेरी openapi-typescript ( openapi-fetch के निर्माताओं द्वारा) एक हल्का टाइप जनरेटर है। यह केवल TypeScript इंटरफ़ेस और टाइप बनाता है, API कॉल के लिए क्लाइंट कोड उत्पन्न नहीं करता है। यह उन परियोजनाओं के लिए एक आदर्श विकल्प है जहाँ डेटा को सख्ती से टाइप करने की आवश्यकता होती है, लेकिन API कॉल करने का तरीका डेवलपर पर निर्भर रहता है (उदाहरण के लिए, fetch या axios के माध्यम से)।

स्थापना:

npm install -D openapi-typescript

उपयोग का उदाहरण (spec.yaml फ़ाइल से टाइप जनरेट करना):

npx openapi-typescript ./spec.yaml -o ./types/api.ts

परिणामस्वरूप, टाइप वाली एक फ़ाइल प्राप्त होती है जिसे आयात किया जा सकता है:

import type { paths } from './types/api';

// GET /users से प्रतिक्रिया के लिए टाइपtype UsersResponse = paths['/users']['get']['responses'][200]['content']['application/json'];

लाभ: न्यूनतमता, तेज़ जनरेशन, जटिल स्कीमा (allOf, oneOf) के लिए उत्कृष्ट समर्थन।
नुकसान: API कॉल के लिए तैयार फ़ंक्शन नहीं हैं, अतिरिक्त रैपर की आवश्यकता है।

orval

Orval एक शक्तिशाली जनरेटर है जो न केवल टाइप बनाता है, बल्कि पूरी तरह से काम करने वाले React हुक, साथ ही axios, fetch या Angular के लिए क्लाइंट भी बनाता है। यह विशेष रूप से React प्रोजेक्ट्स में उपयोगी है जहाँ React Query (TanStack Query) का उपयोग किया जाता है।

स्थापना:

npm install -D orval

फ़ाइल orval.config.ts में कॉन्फ़िगरेशन:

export default {  petstore: {    input: './swagger.yaml',    output: {      target: './src/generated',      client: 'react-query', // या 'axios', 'fetch', 'angular'    },  },};

जनरेशन चलाना:

npx orval

जनरेटेड हुक का उदाहरण:

import { useGetUsers } from './src/generated/users';

function UsersList() {  const { data, isLoading, error } = useGetUsers();  // data स्वचालित रूप से टाइप किया जाएगा}

लाभ: React Query के साथ तैयार एकीकरण, म्यूटेशन के लिए समर्थन, स्वचालित कैशिंग प्रबंधन।
नुकसान: जनरेटेड कोड की बड़ी मात्रा, एक विशिष्ट HTTP-क्लाइंट से बंधन।

swagger-typescript-api

लाइब्रेरी swagger-typescript-api लचीला जनरेशन प्रदान करती है: आप सरल टाइप और विभिन्न HTTP-क्लाइंट (axios, fetch) के समर्थन के साथ एक पूर्ण API-क्लाइंट दोनों प्राप्त कर सकते हैं। एक विशिष्ट विशेषता जनरेशन टेम्पलेट्स को अनुकूलित करने की क्षमता है।

स्थापना: