TypeScript के लिए Swagger/OpenAPI जनरेशन: सर्वश्रेष्ठ टूल्स

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

Swagger/OpenAPI से TypeScript जनरेशन: टूल्स की पूरी गाइड

आधुनिक वेब एप्लिकेशन को TypeScript में डेवलप करते समय टाइप-सेफ API क्लाइंट बनाना ज़रूरी होता है। हर एंडपॉइंट के लिए मैन्युअली इंटरफेस लिखना समय लेने वाला और गलतियों से भरा काम है। सौभाग्य से, एक शक्तिशाली तरीका है — OpenAPI (Swagger) स्पेसिफिकेशन से ऑटोमैटिक TypeScript कोड जनरेट करना। इस आर्टिकल में हम इसके सबसे अच्छे टूल्स, उनकी क्षमताएं और उपयोग के उदाहरण देखेंगे।

OpenAPI से जनरेशन क्यों अपनाएं?

OpenAPI (पहले Swagger) REST API को डिस्क्राइब करने का एक स्टैंडर्ड है। YAML या JSON फ़ाइल का उपयोग करके आप पाते हैं:

  • 100% टाइपिंग — TypeScript इंटरफेस जो रिक्वेस्ट और रिस्पॉन्स स्कीमा से बिल्कुल मेल खाते हैं
  • बैकएंड के साथ सिंक — API बदलने पर बस कोड रीजनरेट करें
  • गलतियां कम होंगी — TypeScript कंपाइलर डेवलपमेंट के दौरान ही टाइप मिसमैच पकड़ लेता है
  • IDE में ऑटोकम्प्लीट — IntelliSense फील्ड और टाइप्स सुझाता है

OpenAPI से TypeScript जनरेशन के टॉप टूल्स

1. openapi-typescript-codegen (सुझाया गया)

यह टूल अपनी सादगी और आधुनिक दृष्टिकोण के लिए लोकप्रिय है। यह axios या fetch के साथ साफ, अच्छी तरह से स्ट्रक्चर्ड कोड जनरेट करता है।

इंस्टॉलेशन:

npm install -D openapi-typescript-codegen

उपयोग का उदाहरण:

npx openapi-typescript-codegen --input ./spec.yaml --output ./generated --client axios

जनरेट होने वाला कोड:

// generated/models/User.ts
export interface User {
    id: number;
    name: string;
    email: string;
    role: 'admin' | 'user';
}

// generated/services/UserService.ts
export class UserService {
    public async getUsers(): Promise<User[]> {
        return this.httpRequest.request({
            method: 'GET',
            url: '/users',
        });
    }
}

फायदे:

  • OpenAPI 3.0 और 3.1 का सपोर्ट
  • मॉडल, सर्विस और रिक्वेस्ट टाइप्स का जनरेशन
  • React Query के लिए हुक्स का ऑप्शनल जनरेशन
  • Handlebars के ज़रिए कस्टमाइज़ेबल टेम्पलेट्स

2. OpenAPI Generator (openapi-generator)

OpenAPI कम्युनिटी का ऑफिशियल जनरेटर। यह TypeScript सहित 50 से अधिक भाषाओं को सपोर्ट करता है (कई जनरेटर के साथ)।

इंस्टॉलेशन:

npm install -D @openapitools/openapi-generator-cli

उपयोग का उदाहरण:

npx openapi-generator-cli generate \
    -i spec.yaml \
    -g typescript-axios \
    -o ./generated

जनरेट होने वाला कोड:

// generated/api.ts
export const UsersApiAxiosParamCreator = {
    getUsers: async (options?: AxiosRequestConfig): Promise<RequestArgs> => {
        const localVarPath = `/users`;
        return {
            url: localVarPath,
            method: 'GET',
        };
    }
}

खासियतें:

  • जनरेटर: typescript-axios, typescript-fetch, typescript-angular
  • ऑथराइज़ेशन सपोर्ट (OAuth2, API Key)
  • डॉक्यूमेंटेशन और टेस्ट का जनरेशन
  • CLI या Maven/Gradle प्लगइन के ज़रिए काम

3. swagger-typescript-api

हल्का और तेज़ जनरेटर, जो बिना अनावश्यक डिपेंडेंसी के साफ TypeScript पर फोकस करता है।

इंस्टॉलेशन:

npm install -D swagger-typescript-api

उपयोग का उदाहरण:

npx swagger-typescript-api -p ./spec.yaml -o ./generated -n api.ts

जनरेट होने वाला कोड:

// generated/api.ts
export type GetUsersResponse = {
    data: Use                    

अनुशंसाएँ