TypeScript и ChatGPT: создаём ИИ-ассистента с нуля

Почему TypeScript и ChatGPT — идеальная пара для современного разработчика

Представьте: вы пишете код на TypeScript, и вдруг вам нужно быстро сгенерировать сложный SQL-запрос, переписать устаревший JavaScript или даже создать полноценного чат-бота для поддержки пользователей. Раньше на это уходили часы, а теперь — минуты. Всё благодаря тому, что TypeScript и ChatGPT стали не просто модными инструментами, а реальной рабочей лошадкой для тысяч разработчиков по всему миру.

В этой статье мы не будем читать скучные лекции. Мы возьмём и сделаем: напишем код, который действительно работает. Вы узнаете, как подружить TypeScript с OpenAI API, создадите своего первого ИИ-ассистента и поймёте, как использовать ChatGPT в разработке для автоматизации рутины. Поехали!

Что вам понадобится для старта

Прежде чем мы нырнём в код, убедитесь, что у вас есть:

• Node.js версии 18+ (мы будем использовать современный fetch)
• npm или yarn для установки пакетов
• API-ключ от OpenAI — получите его на platform.openai.com (это бесплатно, если вы только начинаете)
• Базовое понимание TypeScript: типы, интерфейсы, async/await

Всё остальное мы сделаем вместе. Даже если вы никогда не работали с нейросетями — не страшно, я объясню каждый шаг.

Шаг 1: Настраиваем TypeScript-проект для работы с ИИ

Создайте новую папку и инициализируйте проект:

mkdir ai-chatbot
cd ai-chatbot
npm init -y
npm install typescript @types/node ts-node --save-dev
npx tsc --init

Теперь установим клиент для OpenAI. Раньше все использовали библиотеку openai, но в 2024-2025 годах OpenAI рекомендует свой официальный SDK:

npm install openai dotenv

Создайте файл .env в корне проекта и добавьте туда ваш ключ:

OPENAI_API_KEY=ваш_секретный_ключ_здесь

Важно: Никогда не коммитьте .env в репозиторий! Добавьте его в .gitignore.

Шаг 2: Пишем первую TypeScript-функцию для общения с ChatGPT

Создайте файл chat.ts. Мы начнём с простого: отправим сообщение нейросети и получим ответ. Вот как это выглядит:

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

dotenv.config();

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

interface ChatResponse {
  content: string | null;
  error?: string;
}

async function askChatGPT(prompt: string): Promise<ChatResponse> {
  try {
    const response = await openai.chat.completions.create({
      model: 'gpt-4o-mini', // быстрая и дешёвая модель
      messages: [
        {
          role: 'system',
          content: 'Ты — полезный ассистент для разработчика на TypeScript. Отвечай кратко и с примерами кода.',
        },
        {
          role: 'user',
          content: prompt,
        },
      ],
      max_tokens: 500,
      temperature: 0.7,
    });

    return {
      content: response.choices[0]?.message?.content || null,
    };
  } catch (error) {
    console.error('Ошибка при запросе к OpenAI:', error);
    return {
      content: null,
      error: 'Не удалось получить ответ от нейросети',
    };
  }
}

// Пример использования
async function main() {
  const result = await askChatGPT('Напиши функцию на TypeScript, которая проверяет, является ли строка палиндромом');
  
  if (result.content) {
    console.log('Ответ ChatGPT:');
    console.log(result.content);
  } else {
    console.error('Ошибка:', result.error);
  }
}

main();

Запустите скрипт командой npx ts-node chat.ts. Если всё настроено правильно, вы увидите в консоли ответ нейросети с кодом и пояснениями. Интеграция ChatGPT с TypeScript готова!

Шаг 3: Создаём полноценного чат-бота с историей диалога

Просто «спросил-получил ответ» — это скучно. Давайте сделаем настоящего чат-бота на TypeScript, который помнит контекст беседы. Для этого нам нужно хранить историю сообщений.

Создайте файл chatbot.ts:

import OpenAI from 'openai';
import dotenv from 'dotenv';
import * as readline from 'readline';

dotenv.config();

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

interface Message {
  role: 'system' | 'user' | 'assistant';
  content: string;
}

class AIChatBot {
  private messages: Message[] = [];

  constructor(systemPrompt: string) {
    this.messages.push({
      role: 'system',
      content: systemPrompt,
    });
  }

  async sendMessage(userInput: string): Promise<string> {
    this.messages.push({
      role: 'user',
      content: userInput,
    });

    const response = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: this.messages,
      max_tokens: 1000,
    });

    const reply = response.choices[0]?.message?.content || 'Извините, я не понял вопрос.';
    
    this.messages.push({
      role: 'assistant',
      content: reply,
    });

    return reply;
  }

  getHistory(): Message[] {
    return this.messages.filter(m => m.role !== 'system');
  }
}

// Запускаем интерактивный чат
async function startChat() {
  const bot = new AIChatBot(
    'Ты — ИИ-помощник для разработчиков. Отвечай на русском языке, используй TypeScript в примерах кода. Будь дружелюбным и полезным.'
  );

  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  });

  console.log('🤖 Чат-бот запущен! Напишите "выход" чтобы завершить.\n');

  const askQuestion = () => {
    rl.question('Вы: ', async (input) => {
      if (input.toLowerCase() === 'выход') {
        console.log('\n👋 До свидания!');
        rl.close();
        return;
      }

      const reply = await bot.sendMessage(input);
      console.log(`\n🤖 Бот: ${reply}\n`);
      askQuestion();
    });
  };

  askQuestion();
}

startChat().catch(console.error);

Теперь у вас есть интерактивный чат-бот на TypeScript, который помнит историю разговора. Запустите его и попробуйте задать несколько вопросов подряд — вы увидите, как нейросеть учитывает предыдущие ответы.

Шаг 4: Продвинутые техники — стриминг ответов и работа с функциями

Настоящие профессионалы не ждут, пока нейросеть «подумает» целиком. Они используют стриминг — когда ответ приходит частями, как в реальном чате с человеком. Вот как это сделать:

async function streamChat(prompt: string) {
  const stream = await openai.chat.completions.create({
    model: 'gpt