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