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

# 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 ```

**Пример использования:** ```typescript interface ProductCardProps { id: string; title: string; price: number; imageUrl: string; onAddToCart: (id: string) => void; }

const ProductCard: React.FC = React.memo(({ id, title, price, imageUrl, onAddToCart }) => { const [imageLoaded, setImageLoaded] = useState(false); return ( setImageLoaded(true)} className={imageLoaded ? 'loaded' : 'loading'} /> {title} {price.toLocaleString()} ₽

onAddToCart(id)}>Добавить в корзину ); }); ```

## 2. Промт для генерации Express.js API с валидацией

**Задача:** Создать REST API endpoint с проверкой данных через Joi или Zod.

**Промт:** ``` Сгенерируй Express.js роутер для создания пользователя. Используй: - TypeScript - Zod для валидации входных данных - Prisma для работы с БД - Обработку ошибок через middleware - Rate limiting (express-rate-limit) Входные данные: email, password (мин 8 символов), name (строка, обязателен). ```

**Пример результата:** ```typescript 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 код] ```

## Как использовать эти промты эффективно

1. **Уточняйте контекст**: Добавляйте информацию о вашей версии библиотек (React 18 vs 19, Node 20 vs 22). 2. **Указывайте стиль кода**: Если используете функциональное программирование или ООП — укажите это. 3. **Проверяйте результат**: AI может генерировать синтаксически верный, но логически неоптимальный код. 4. **Комбинируйте промты**: Для сложных задач разбивайте на несколько последовательных запросов.

**Важно**: По данным опроса Stack Overflow Developer Survey 2025, 78% разработчиков используют AI-инструменты ежедневно, но только 34% доверяют сгенерированному коду без проверки. Всегда тестируйте и ревьюьте сгенерированный код.

## Заключение

Правильные промты для генерации JavaScript и TypeScript кода — это не магия, а навык. Чем точнее вы описываете задачу, тем качественнее результат. Начните с этих 10 шаблонов, адаптируйте их под свои проекты, и вы заметите, как скорость разработки вырастет в 2–3 раза. Помните: AI — это ваш ассистент, а не замена код-ревью.

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

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

Комментарии

Читайте также

Tesla расширяет сервис Robotaxi до небольшого района Майами: что это значит для разработчиков

10 промтов для миграции кода: Python 2→3, JavaScript→TypeScript и REST→GraphQL

Почему «Практическая криптография» на Asibiont — это кратчайший путь разработчика к постквантовой безопасности

Как я перестал читать про Vibe Coding и наконец запустил играбельный проект

10 промтов для рефакторинга legacy кода: стратегии и примеры

15 промтов для iOS: SwiftUI, UIKit, Core Data — шпаргалка для разработчика

MSI MPG X870I Edge Ti Evo WiFi: самый мощный Mini-ITX для AMD Ryzen 9000? Честный обзор

Главное за неделю: возвращаем уведомления в VK, ждём культовую Nokia Asha

Китай открывает пятилетку ИИ-образования: как страна готовит миллионы специалистов будущего