دمج ChatGPT API مع TypeScript: دليل خطوة بخطوة

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

كيف يصبح ChatGPT و TypeScript أفضل الأصدقاء

تخيل: أنت تكتب كودًا بلغة TypeScript، وفجأة تكتسب خدمتك قوة خارقة — القدرة على فهم وتوليد النص البشري. ChatGPT API يجعل هذا حقيقة واقعة. في هذه المقالة، لن نقوم فقط بربط API — بل سنبني وحدة كاملة للتواصل مع الشبكة العصبية، ستكون مستقرة، ومكتوبة بأنواع محددة، وجاهزة للإنتاج.

إذا كنت تعتقد أن دمج الذكاء الاصطناعي هو شيء من عالم الخيال أو حكر على عمالقة مثل Google، فأنا أسارع لإسعادك: OpenAI توفر REST API بسيط، و TypeScript مع كتابته الصارمة للأنواع يجعل العمل معه آمنًا وقابلًا للتنبؤ. دعنا نتعمق في التطبيق العملي.



إعداد البيئة: ما تحتاج إلى تثبيته

قبل كتابة الكود، دعنا نتأكد من أن لديك كل ما يلزم. للعمل مع ChatGPT API على TypeScript ستحتاج إلى:

  • Node.js الإصدار 18 أو أعلى (أوصي بالإصدار 20 LTS)
  • npm أو yarn لإدارة الحزم
  • مفتاح API من OpenAI — احصل عليه من platform.openai.com
  • محرر أكواد (VS Code, WebStorm — أي محرر يناسبك)

لننشئ مشروعًا جديدًا ونثبت التبعيات:

mkdir chatgpt-typescriptcd chatgpt-typescriptnpm init -ynpm install openai dotenvnpm install -D typescript @types/node ts-node

لاحظ: نحن نستخدم SDK الرسمي من OpenAI، والذي يعمل بشكل ممتاز مع TypeScript. سنحتاج حزمة dotenv لتخزين مفتاح API بشكل آمن.



إعداد TypeScript ومتغيرات البيئة

لننشئ ملف tsconfig.json بالإعدادات الأساسية:

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "lib": ["ES2020"],    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true,    "skipLibCheck": true,    "forceConsistentCasingInFileNames": true  },  "include": ["src/**/*"]}

الآن لننشئ ملف .env في جذر المشروع:

OPENAI_API_KEY=مفتاحك_السري_الفائق

هام: أضف .env إلى ملف .gitignore لتجنب إرسال المفتاح عن طريق الخطأ إلى المستودع!



كتابة أول طلب إلى ChatGPT باستخدام TypeScript

لننشئ مجلد src وملف index.ts. لنبدأ بشيء بسيط: إرسال رسالة والحصول على رد.

import OpenAI from 'openai';import dotenv from 'dotenv';

dotenv.config();

const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY,});

async function chatWithGPT(prompt: string): Promise<string> { try { const response = await openai.chat.completions.create({ model: 'gpt-4', messages: [ { role: 'system', content: 'أنت مساعد مفيد.' }, { role: 'user', content: prompt }, ], temperature: 0.7, max_tokens: 500, });

return response.choices[0]?.message?.content || 'لا يوجد رد'; } catch (error) { console.error('خطأ في الطلب إلى ChatGPT:', error); throw error; }}

// الاستخدام(async () => { const answer = await chatWithGPT('أخبرني نكتة قصيرة عن المبرمجين'); console.log('ChatGPT يقول:', answer);})();

شغّل الكود باستخدام الأمر npx ts-node src/index.ts. إذا كان كل شيء مضبوطًا بشكل صحيح، سترى ردًا من الشبكة العصبية. لاحظ كتابة الأنواع: TypeScript يلمح تلقائيًا إلى بنية كائن response، مما يجعل التطوير مريحًا.



تحليل المعلمات الرئيسية

  • model: gpt-4 — النموذج الأذكى حاليًا. لتوفير التكاليف يمكن استخدام gpt-3.5-turbo.
  • messages

المدونات

توصيات الكتب