10 промтов для генерации JavaScript и TypeScript кода: от React до Node.js
Современная разработка на JavaScript и TypeScript требует скорости и точности. По данным исследования GitHub Copilot (2025), разработчики, использующие AI-ассистентов, пишут на 55% больше кода при том же уровне качества. Но ключ к эффективной генерации — правильно составленный промт. В этой статье я собрал 10 проверенных промтов для генерации JS/TS кода, которые сэкономят вам часы работы.
1. Промт для генерации React-компонента с TypeScript
Задача: Создать функциональный компонент с пропсами, хуками и обработчиками.
Промт:
Напиши React-компонент на TypeScript для карточки товара. Компонент должен:
- Принимать пропсы: id (string), title (string), price (number), imageUrl (string), onAddToCart (callback)
- Отображать изображение, название, цену и кнопку "Добавить в корзину"
- Использовать useState для состояния загрузки изображения
- Иметь анимацию появления при монтировании (CSS transition)
- Быть оптимизирован через React.memo
Пример использования:
interface ProductCardProps {
id: string;
title: string;
price: number;
imageUrl: string;
onAddToCart: (id: string) => void;
}
const ProductCard: React.FC<ProductCardProps> = React.memo(({
id, title, price, imageUrl, onAddToCart
}) => {
const [imageLoaded, setImageLoaded] = useState(false);
return (
<div className="product-card">
<img
src={imageUrl}
alt={title}
onLoad={() => setImageLoaded(true)}
className={imageLoaded ? 'loaded' : 'loading'}
/>
<h3>{title}</h3>
<p>{price.toLocaleString()} ₽</p>
<button onClick={() => onAddToCart(id)}>Добавить в корзину</button>
</div>
);
});
2. Промт для генерации Express.js API с валидацией
Задача: Создать REST API endpoint с проверкой данных через Joi или Zod.
Промт:
Сгенерируй Express.js роутер для создания пользователя. Используй:
- TypeScript
- Zod для валидации входных данных
- Prisma для работы с БД
- Обработку ошибок через middleware
- Rate limiting (express-rate-limit)
Входные данные: email, password (мин 8 символов), name (строка, обязателен).
Пример результата:
import { z } from 'zod';
import { Router, Request, Response } from 'express';
import { PrismaClient } from '@prisma/client';
const userSchema = z.object({
email: z.string().email(),
password: z.string().min(8, 'Пароль минимум 8 символов'),
name: z.string().min(1, 'Имя обязательно')
});
const router = Router();
const prisma = new PrismaClient();
router.post('/users', async (req: Request, res: Response) => {
const validation = userSchema.safeParse(req.body);
if (!validation.success) {
return res.status(400).json({ errors: validation.error.errors });
}
const user = await prisma.user.create({ data: validation.data });
res.status(201).json(user);
});
3. Промт для генерации утилитарных функций
Задача: Создать набор вспомогательных функций для работы с датами.
Промт:
Напиши TypeScript модуль с утилитами для работы с датами:
1. formatDate(date: Date, format: string): string — форматирует дату по шаблону (YYYY-MM-DD, DD.MM.YYYY)
2. daysBetween(start: Date, end: Date): number — количество дней между датами
3. isWeekend(date: Date): boolean — проверка на выходной
4. addDays(date: Date, days: number): Date — прибавляет дни
Все функции должны быть иммутабельными (не менять исходный объект Date).
4. Промт для генерации React-хука для работы с API
Задача: Создать кастомный хук для fetch-запросов с кэшированием.
Промт:
Создай React хук useApi на TypeScript, который:
- Принимает URL и опции (method, headers, body)
- Возвращает { data, loading, error, refetch }
- Кэширует результаты на 5 минут (используй Map)
- Поддерживает отмену запроса при размонтировании (AbortController)
- Обрабатывает ошибки сети и HTTP ошибки (4xx, 5xx)
5. Промт для генерации TypeScript типов и интерфейсов
Задача: Описать сложную структуру данных для интернет-магазина.
Промт:
Сгенерируй TypeScript типы для:
- Product (id, title, price, category, variants, reviews)
- Cart (items, total, discount)
- User (id, email, address, orderHistory)
- Order (id, items, status, deliveryDate)
Используй utility типы (Partial, Pick, Omit) для создания вспомогательных типов.
6. Промт для генерации тестов (Jest + React Testing Library)
Задача: Написать unit-тесты для React-компонента.
Промт:
Напиши тесты на Jest и React Testing Library для компонента LoginForm:
- Проверь, что форма рендерит поля email и password
- Проверь валидацию (пустые поля, неверный email)
- Проверь вызов onSubmit с правильными данными
- Проверь отображение ошибки при неверных данных
- Используй mock для fetch запроса
7. Промт для генерации Node.js скрипта для обработки файлов
Задача: Создать скрипт для пакетной обработки JSON-файлов.
Промт:
Напиши Node.js скрипт на TypeScript, который:
- Читает все .json файлы из папки ./input
- Объединяет их в один массив
- Удаляет дубликаты по полю id
- Сортирует по полю createdAt
- Сохраняет результат в ./output/merged.json
- Выводит статистику: количество файлов, записей, дубликатов
Используй fs.promises и path.
8. Промт для генерации кода для работы с API (Axios/Fetch)
Задача: Создать клиент для внешнего REST API с обработкой ошибок.
Промт:
Создай TypeScript класс для работы с GitHub API:
- Базовый URL: https://api.github.com
- Методы: getUser(username), getRepos(username), getReadme(owner, repo)
- Авторизация через токен (передаётся в конструктор)
- Retry механизм (3 попытки с задержкой 1с)
- Типизированные ответы через generics
- Логирование запросов (console.log с timestamp)
9. Промт для генерации конфигураций и boilerplate
Задача: Создать конфигурацию для TypeScript проекта.
Промт:
Сгенерируй tsconfig.json для React проекта с:
- Strict mode
- Путь alias (@/ -> ./src/)
- ES2022 target
- Поддержка JSX (react-jsx)
- Декораторы
- Source maps
Также добавь .eslintrc.json с правилами для React и TypeScript.
10. Промт для рефакторинга legacy кода
Задача: Оптимизировать и переписать устаревший JavaScript код.
Промт:
Перепиши этот JavaScript код на современный TypeScript:
- Используй async/await вместо .then()
- Замени var на const/let
- Добавь строгую типизацию
- Разбей на маленькие функции
- Удали dead code
- Добавь JSDoc комментарии
[вставьте legacy код]
Как использовать эти промты эффективно
- Уточняйте контекст: Добавляйте информацию о вашей версии библиотек (React 18 vs 19, Node 20 vs 22).
- Указывайте стиль кода: Если используете функциональное программирование или ООП — укажите это.
- Проверяйте результат: AI может генерировать синтаксически верный, но логически неоптимальный код.
- Комбинируйте промты: Для сложных задач разбивайте на несколько последовательных запросов.
Важно: По данным опроса Stack Overflow Developer Survey 2025, 78% разработчиков используют AI-инструменты ежедневно, но только 34% доверяют сгенерированному коду без проверки. Всегда тестируйте и ревьюьте сгенерированный код.
Заключение
Правильные промты для генерации JavaScript и TypeScript кода — это не магия, а навык. Чем точнее вы описываете задачу, тем качественнее результат. Начните с этих 10 шаблонов, адаптируйте их под свои проекты, и вы заметите, как скорость разработки вырастет в 2–3 раза. Помните: AI — это ваш ассистент, а не замена код-ревью.
Если вы хотите глубже изучить интеграцию AI в свои проекты — обратите внимание на практические курсы, где разбираются реальные кейсы. ASI Biont поддерживает подключение к OpenAI API через готовые интеграции — подробнее на asibiont.com/courses
Комментарии