TypeScript und ChatGPT: Erstellen eines KI-Assistenten von Grund auf

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Warum TypeScript und ChatGPT das ideale Paar für moderne Entwickler sind

\n\n

Stellen Sie sich vor: Sie schreiben Code in TypeScript und müssen plötzlich schnell eine komplexe SQL-Abfrage generieren, veraltetes JavaScript umschreiben oder sogar einen vollwertigen Chatbot für den Benutzersupport erstellen. Früher hat das Stunden gedauert, jetzt nur noch Minuten. Alles dank der Tatsache, dass TypeScript und ChatGPT nicht nur trendige Werkzeuge sind, sondern ein echtes Arbeitstier für Tausende von Entwicklern weltweit.

\n\n

In diesem Artikel werden wir keine langweiligen Vorträge halten. Wir legen einfach los und machen es: Wir schreiben Code, der wirklich funktioniert. Sie erfahren, wie Sie TypeScript mit der OpenAI API verbinden, Ihren ersten KI-Assistenten erstellen und verstehen, wie Sie ChatGPT in der Entwicklung zur Automatisierung von Routineaufgaben einsetzen. Los geht's!

\n\n

Was Sie für den Start benötigen

\n\n

Bevor wir in den Code eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

\n\n
    \n
  • Node.js Version 18+ (wir verwenden modernes fetch)
  • \n
  • npm oder yarn zum Installieren von Paketen
  • \n
  • API-Schlüssel von OpenAI — holen Sie ihn sich auf platform.openai.com (es ist kostenlos, wenn Sie gerade erst anfangen)
  • \n
  • Grundlegendes Verständnis von TypeScript: Typen, Interfaces, async/await
  • \n
\n\n

Alles andere machen wir gemeinsam. Selbst wenn Sie noch nie mit neuronalen Netzen gearbeitet haben – kein Problem, ich erkläre jeden Schritt.

\n\n

Schritt 1: TypeScript-Projekt für die Arbeit mit KI einrichten

\n\n

Erstellen Sie einen neuen Ordner und initialisieren Sie das Projekt:

\n\n
mkdir ai-chatbot\ncd ai-chatbot\nnpm init -y\nnpm install typescript @types/node ts-node --save-dev\nnpx tsc --init
\n\n

Jetzt installieren wir den Client für OpenAI. Früher haben alle die Bibliothek openai verwendet, aber in den Jahren 2024-2025 empfiehlt OpenAI sein offizielles SDK:

\n\n
npm install openai dotenv
\n\n

Erstellen Sie eine Datei .env im Stammverzeichnis des Projekts und fügen Sie Ihren Schlüssel hinzu:

\n\n
OPENAI_API_KEY=Ihr_geheimer_Schlüssel_hier
\n\n

Wichtig: Committen Sie .env niemals in das Repository! Fügen Sie es zur .gitignore hinzu.

\n\n

Schritt 2: Erste TypeScript-Funktion zur Kommunikation mit ChatGPT schreiben

\n\n

Erstellen Sie eine Datei chat.ts. Wir beginnen einfach: Wir senden eine Nachricht an das neuronale Netz und erhalten eine Antwort. So sieht das aus:

\n\n
import OpenAI from 'openai';\nimport dotenv from 'dotenv';\n\ndotenv.config();\n\nconst openai = new OpenAI({\n  apiKey: process.env.OPENAI_API_KEY,\n});\n\ninterface ChatResponse {\n  content: string | null;\n  error?: string;\n}\n\nasync function askChatGPT(prompt: string): Promise<ChatResponse> {\n  try {\n    const response = await openai.chat.completions.create({\n      model: 'gpt-4o-mini', // schnelles und günstiges Modell\n      messages: [\n        {\n          role: 'system',\n          content: 'Du bist ein hilfreicher Assistent für TypeScript-Entwickler. Antworte kurz und mit Codebeispielen.',\n        },\n        {\n          role: 'user',\n          content: prompt,\n        },\n      ],\n      max_tokens: 500,\n      temperature: 0.7,\n    });\n\n    return {\n      content: response.choices[0]?.message?.content || null,\n    };\n  } catch (error) {\n    console.error('Fehler bei der Anfrage an OpenAI:', error);\n    return {\n      content: null,\n      error: 'Antwort vom neuronalen Netz konnte nicht abgerufen werden',\n    };\n  }\n}\n\n// Beispiel zur Verwendung\nasync function main() {\n  const result = await askChatGPT('Schreibe eine Funktion in TypeScript, die prüft, ob ein String ein Palindrom ist');\n  \n  if (result.content) {\n    console.log('Antwort von ChatGPT:');\n    console.log(result.content);\n  } else {\n    console.error('Fehler:', result.error);\n  }\n}\n\nmain();
\n\n

Führen Sie das Skript mit dem Befehl npx ts-node chat.ts aus. Wenn alles richtig konfiguriert ist, sehen Sie in der Konsole die Antwort des neuronalen Netzes mit Code und Erklärungen. Die ChatGPT-Integration

Blogs

Buchempfehlungen