10 промтов для генерации JavaScript и TypeScript кода: React, Node.js и утилиты

Введение

Разработка на JavaScript и TypeScript — одна из самых динамичных областей программирования. С каждым годом появляются новые фреймворки, библиотеки и подходы. Однако, как и в любой другой сфере, разработчики сталкиваются с рутинными задачами: написание шаблонного кода, создание типов, обработка ошибок, генерация тестов. Искусственный интеллект (AI) уже давно стал незаменимым помощником в таких сценариях. Но чтобы AI выдавал действительно полезный код, нужно уметь правильно формулировать запросы — промты.

Эта статья — подборка из 10 проверенных промтов для генерации JavaScript и TypeScript кода. Я использую их сам в повседневной работе, и они помогли мне сократить время на написание рутины на 30-40%. Каждый промт сопровождается реальным примером применения и пояснением, как его адаптировать под ваши нужды. В конце — таблица сравнения популярных AI-инструментов и рекомендации по выбору.

1. Промт для генерации React-компонента с TypeScript

Промт: «Создай React-компонент на TypeScript для отображения списка пользователей. Компонент должен принимать пропсы: массив объектов с полями id (number), name (string), email (string). Реализуй обработку состояния загрузки (isLoading) и пустого списка. Используй функциональный компонент с хуками.»

Пример применения: Этот промт идеален, когда нужно быстро создать UI-компонент с типизацией. AI генерирует не только сам код, но и типы, что экономит время на их написание вручную. Я часто использую его для прототипирования интерфейсов в новых проектах.

Результат:

import React from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

interface UserListProps {
  users: User[];
  isLoading: boolean;
}

const UserList: React.FC<UserListProps> = ({ users, isLoading }) => {
  if (isLoading) {
    return <div>Загрузка...</div>;
  }

  if (users.length === 0) {
    return <div>Список пользователей пуст.</div>;
  }

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>
          {user.name} - {user.email}
        </li>
      ))}
    </ul>
  );
};

export default UserList;

2. Промт для создания API-эндпоинта на Node.js с Express

Промт: «Напиши эндпоинт на Node.js с Express и TypeScript для получения данных пользователя по ID. Используй Prisma ORM для работы с базой данных. Реализуй обработку ошибок: если пользователь не найден — верни 404, если ID невалидный — 400.»

Пример применения: Этот промт помогает быстро набросать REST API с типизацией и обработкой ошибок. Я применяю его при создании микросервисов или бэкенд-части для React-приложений.

Результат:

import { Request, Response } from 'express';
import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export const getUserById = async (req: Request, res: Response) => {
  const { id } = req.params;
  const userId = parseInt(id, 10);

  if (isNaN(userId)) {
    return res.status(400).json({ error: 'ID должен быть числом' });
  }

  try {
    const user = await prisma.user.findUnique({
      where: { id: userId },
    });

    if (!user) {
      return res.status(404).json({ error: 'Пользователь не найден' });
    }

    return res.status(200).json(user);
  } catch (error) {
    console.error('Ошибка при получении пользователя:', error);
    return res.status(500).json({ error: 'Внутренняя ошибка сервера' });
  }
};

3. Промт для генерации утилит по работе с датами

Промт: «Создай набор утилит на TypeScript для работы с датами: форматирование даты в формат 'DD.MM.YYYY', проверка, является ли дата выходным (суббота или воскресенье), вычисление разницы в днях между двумя датами. Используй Date без сторонних библиотек.»

Пример применения: Такие утилиты нужны в любом проекте. Вместо того чтобы писать их вручную или тащить библиотеку вроде date-fns для простых задач, я генерирую их через AI.

Результат:

export const formatDate = (date: Date): string => {
  const day = String(date.getDate()).padStart(2, '0');
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const year = date.getFullYear();
  return `${day}.${month}.${year}`;
};

export const isWeekend = (date: Date): boolean => {
  const day = date.getDay();
  return day === 0 || day === 6;
};

export const daysBetween = (date1: Date, date2: Date): number => {
  const msPerDay = 1000 * 60 * 60 * 24;
  const diff = Math.abs(date2.getTime() - date1.getTime());
  return Math.floor(diff / msPerDay);
};

4. Промт для написания unit-тестов (Jest + TypeScript)

Промт: «Напиши unit-тесты на Jest для функции, которая принимает массив чисел и возвращает сумму чётных чисел. Используй TypeScript. Тесты должны покрывать: пустой массив, массив без чётных чисел, массив с отрицательными числами.»

Пример применения: Тесты — это скучно, но необходимо. AI генерирует тесты быстрее, чем я пишу их вручную. Этот промт помогает создать базовое покрытие за секунды.

Результат:

import { sumEvenNumbers } from './sumEvenNumbers';

describe('sumEvenNumbers', () => {
  it('должна вернуть 0 для пустого массива', () => {
    expect(sumEvenNumbers([])).toBe(0);
  });

  it('должна вернуть 0 для массива без чётных чисел', () => {
    expect(sumEvenNumbers([1, 3, 5])).toBe(0);
  });

  it('должна вернуть сумму чётных чисел', () => {
    expect(sumEvenNumbers([1, 2, 3, 4, 5, 6])).toBe(12);
  });

  it('должна обрабатывать отрицательные числа', () => {
    expect(sumEvenNumbers([-2, -4, 3])).toBe(-6);
  });
});

5. Промт для создания кастомного хука в React

Промт: «Создай кастомный хук useDebounce на TypeScript. Хук должен принимать значение (value) и задержку (delay в миллисекундах). Возвращать debounced-значение. Используй useEffect и useState.»

Пример применения: Кастомные хуки — основа React. Этот хук нужен для оптимизации поиска, фильтрации или любых операций, где нужно избежать частых вызовов.

Результат:

import { useState, useEffect } from 'react';

export function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState<T>(value);

  useEffect(() => {
    const handler = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(handler);
    };
  }, [value, delay]);

  return debouncedValue;
}

6. Промт для генерации TypeScript-типов из JSON

Промт: «Сгенерируй TypeScript-интерфейсы для следующего JSON-объекта: { "id": 1, "name": "John", "email": "john@example.com", "address": { "city": "New York", "zip": "10001" }, "tags": ["admin", "user"] }. Создай вложенные интерфейсы для address.»

Пример применения: При работе с API часто нужно быстро создать типы для ответа сервера. Вместо того чтобы писать их вручную, я прошу AI сгенерировать их из примера JSON.

Результат:

interface Address {
  city: string;
  zip: string;
}

interface User {
  id: number;
  name: string;
  email: string;
  address: Address;
  tags: string[];
}

7. Промт для реализации паттерна Singleton на TypeScript

Промт: «Реализуй паттерн Singleton на TypeScript для класса Logger. Класс должен иметь метод log(message: string), который выводит сообщение в консоль. Гарантируй, что можно создать только один экземпляр класса.»

Пример применения: Singleton полезен для управления глобальными состояниями, логгерами или конфигурациями. AI генерирует правильную реализацию с блокировкой создания нескольких экземпляров.

Результат:

class Logger {
  private static instance: Logger;

  private constructor() {}

  public static getInstance(): Logger {
    if (!Logger.instance) {
      Logger.instance = new Logger();
    }
    return Logger.instance;
  }

  public log(message: string): void {
    console.log(`[Logger]: ${message}`);
  }
}

export default Logger.getInstance();

8. Промт для создания асинхронной функции с обработкой ошибок

Промт: «Напиши асинхронную функцию на TypeScript, которая делает HTTP-запрос к API и возвращает данные. Используй fetch. Реализуй обработку ошибок: если статус ответа не 200 — выброси ошибку с текстом из ответа. Добавь тип возвращаемых данных через дженерик.»

Пример применения: Универсальный промт для создания утилиты для работы с API. Я использую его как основу для всех HTTP-запросов в проектах.

Результат:

export async function fetchData<T>(url: string): Promise<T> {
  try {
    const response = await fetch(url);

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`HTTP ошибка ${response.status}: ${errorText}`);
    }

    const data: T = await response.json();
    return data;
  } catch (error) {
    console.error('Ошибка при запросе:', error);
    throw error;
  }
}

9. Промт для генерации документации JSDoc

Промт: «Добавь JSDoc-комментарии к следующей функции на TypeScript. Функция принимает массив строк и возвращает объект, где ключи — уникальные строки, а значения — количество их вхождений. Опиши параметры, возвращаемое значение и пример использования.»

Пример применения: Документация — это то, что все откладывают. AI может генерировать JSDoc за секунды, делая код более читаемым и поддерживаемым.

Результат:

/**
 * Подсчитывает количество вхождений каждой строки в массиве.
 *
 * @param strings - Массив строк для подсчёта.
 * @returns Объект, где ключи — уникальные строки из массива, а значения — количество их вхождений.
 * 
 * @example
 * // returns { apple: 2, banana: 1 }
 * countOccurrences(['apple', 'banana', 'apple']);
 */
export function countOccurrences(strings: string[]): Record<string, number> {
  const result: Record<string, number> = {};
  for (const str of strings) {
    result[str] = (result[str] || 0) + 1;
  }
  return result;
}

10. Промт для миграции с JavaScript на TypeScript

Промт: «Перепиши следующий JavaScript-код на TypeScript с добавлением типов. Код: function add(a, b) { return a + b; }. Учти, что a и b могут быть числами или строками. Используй перегрузку функций.»

Пример применения: При миграции старых проектов на TypeScript этот промт экономит часы работы. AI не только добавляет типы, но и предлагает лучшие практики.

Результат:

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: number

| string, b: number | string): number | string {
  if (typeof a === 'number' && typeof b === 'number') {
    return a + b;
  }
  if (typeof a === 'string' && typeof b === 'string') {
    return a + b;
  }
  throw new Error('Типы аргументов должны совпадать');
}

Сравнение популярных AI-инструментов для генерации кода

Заключение

Промты — это мост между вашим намерением и качественным кодом, сгенерированным AI. Правильно сформулированный запрос экономит время, уменьшает количество ошибок и ускоряет разработку. В этой статье я поделился 10 промтами, которые использую сам в работе с JavaScript и TypeScript. Они охватывают типичные задачи: от создания React-компонентов до написания тестов и документации.

Помните, что AI — это инструмент, а не замена мышлению. Всегда проверяйте сгенерированный код, адаптируйте его под свои нужды и не стесняйтесь экспериментировать с формулировками промтов. Чем точнее запрос, тем лучше результат.

Если вы хотите углубиться в тему и научиться создавать эффективные промты для различных сценариев, обратите внимание на специализированные курсы и ресурсы. Например, ASI Biont поддерживает подключение к различным AI-сервисам через API — подробнее на asibiont.com/courses. Удачи в разработке!