Введение
Генерация кода с помощью больших языковых моделей (LLM) — уже не футуризм, а повседневный инструмент разработчика. Согласно опросу Stack Overflow за 2025 год, более 70% опрошенных разработчиков используют AI-ассистентов для написания кода, а наиболее популярные сценарии — это создание React-компонентов, типов TypeScript и утилитарных функций Node.js. Однако эффективность AI напрямую зависит от качества промта (промпта). Один и тот же запрос может выдать как рабочий код, так и бесполезный мусор. В этой статье я собрал 7 проверенных промтов для генерации JavaScript и TypeScript кода, которые помогут вам сэкономить часы работы. Каждый промт снабжён пояснением и примером использования.
1. Промт для генерации React-компонента с хуками и пропсами
Для чего: Быстрое создание функционального компонента с TypeScript-типизацией, хуками useState, useEffect и обработчиками событий.
Промт:
Сгенерируй React-компонент на TypeScript. Компонент должен:
- принимать пропсы: userId (string), onSave (callback);
- использовать useState для хранения полей формы (name, email);
- загружать данные пользователя через useEffect при монтировании (GET /api/users/{userId});
- отображать форму с полями name и email и кнопкой Submit, при нажатии вызывать onSave с объектом {name, email};
- обрабатывать состояния загрузки (показывать спиннер) и ошибки (показывать сообщение).
Пример использования:
interface UserFormProps {
userId: string;
onSave: (data: { name: string; email: string }) => void;
}
const UserForm: React.FC<UserFormProps> = ({ userId, onSave }) => {
const [formData, setFormData] = useState({ name: '', email: '' });
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(res => res.json())
.then(data => setFormData({ name: data.name, email: data.email }))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, [userId]);
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error}</div>;
return (
<form onSubmit={() => onSave(formData)}>
<input value={formData.name} onChange={e => setFormData(prev => ({ ...prev, name: e.target.value }))} />
<input value={formData.email} onChange={e => setFormData(prev => ({ ...prev, email: e.target.value }))} />
<button type="submit">Submit</button>
</form>
);
};
2. Промт для TypeScript-типов и интерфейсов
Для чего: Генерация строгих типов для API-ответов, конфигов или бизнес-сущностей.
Промт:
Создай TypeScript-интерфейсы для описания ответа API интернет-магазина:
- Product (id, title, price, description, category, images: string[], rating: {rate, count});
- Cart (id, userId, date, products: {productId, quantity}[]);
- User (id, name, email, address: {street, city, zipcode}).
Добавь вспомогательные типы для пагинации: PaginatedResponse<T> с полями data: T[], total, page, limit.
Пример использования:
interface Product {
id: number;
title: string;
price: number;
description: string;
category: string;
images: string[];
rating: {
rate: number;
count: number;
};
}
interface Cart {
id: number;
userId: number;
date: string;
products: Array<{ productId: number; quantity: number }>;
}
interface User {
id: number;
name: string;
email: string;
address: {
street: string;
city: string;
zipcode: string;
};
}
type PaginatedResponse<T> = {
data: T[];
total: number;
page: number;
limit: number;
};
3. Промт для утилитарных функций Node.js
Для чего: Генерация вспомогательных функций для работы с файлами, датами, строками.
Промт:
Напиши на TypeScript модуль с утилитами для работы с файлами в Node.js (используя fs и path):
- readJsonFile<T>(filePath: string): Promise<T> — читает JSON-файл и парсит его;
- writeJsonFile<T>(filePath: string, data: T): Promise<void> — записывает объект в JSON-файл;
- ensureDir(dirPath: string): Promise<void> — создаёт директорию, если её нет;
- deleteFileIfExists(filePath: string): Promise<void> — удаляет файл, если он существует.
Добавь обработку ошибок через try/catch и логирование через console.error.
Пример использования:
import { promises as fs } from 'fs';
import path from 'path';
export async function readJsonFile<T>(filePath: string): Promise<T> {
try {
const content = await fs.readFile(filePath, 'utf-8');
return JSON.parse(content) as T;
} catch (error) {
console.error(`Ошибка чтения файла ${filePath}:`, error);
throw error;
}
}
export async function writeJsonFile<T>(filePath: string, data: T): Promise<void> {
try {
await fs.writeFile(filePath, JSON.stringify(data, null, 2), 'utf-8');
} catch (error) {
console.error(`Ошибка записи файла ${filePath}:`, error);
throw error;
}
}
export async function ensureDir(dirPath: string): Promise<void> {
try {
await fs.mkdir(dirPath, { recursive: true });
} catch (error) {
console.error(`Ошибка создания директории ${dirPath}:`, error);
throw error;
}
}
export async function deleteFileIfExists(filePath: string): Promise<void> {
try {
await fs.unlink(filePath);
} catch (error: any) {
if (error.code !== 'ENOENT') {
console.error(`Ошибка удаления файла ${filePath}:`, error);
throw error;
}
}
}
4. Промт для тестов (Jest / Vitest)
Для чего: Автоматическая генерация юнит-тестов для существующих функций.
Промт:
Напиши тесты на Jest (или Vitest) для следующей функции:
function calculateDiscount(price: number, userType: 'regular'
| 'vip' | 'admin', coupon?: string): number {
let discount = 0;
if (userType === 'vip') discount = 0.2;
if (userType === 'admin') discount = 0.5;
if (coupon === 'SAVE10') discount += 0.1;
return Math.max(0, price - price * discount);
}
Покрой сценарии: regular без купона, vip без купона, admin с купоном SAVE10, regular с купоном, отрицательная цена (возвращать 0).
Пример использования:
import { calculateDiscount } from './discount';
describe('calculateDiscount', () => {
it('regular user without coupon - no discount', () => {
expect(calculateDiscount(100, 'regular')).toBe(100);
});
it('vip user without coupon - 20% off', () => {
expect(calculateDiscount(100, 'vip')).toBe(80);
});
it('admin user with SAVE10 coupon - 60% off', () => {
expect(calculateDiscount(100, 'admin', 'SAVE10')).toBe(40);
});
it('regular user with SAVE10 coupon - 10% off', () => {
expect(calculateDiscount(100, 'regular', 'SAVE10')).toBe(90);
});
it('negative price returns 0', () => {
expect(calculateDiscount(-50, 'regular')).toBe(0);
});
});
5. Промт для Express.js маршрутов с валидацией
Для чего: Генерация REST API эндпоинтов с проверкой входных данных.
Промт:
Создай Express.js роутер на TypeScript для управления задачами (Todo):
- GET /todos — возвращает список всех задач (хранить в памяти);
- POST /todos — добавляет задачу с полями title (string, обязательное), completed (boolean, по умолчанию false);
- PATCH /todos/:id — обновляет title и/или completed;
- DELETE /todos/:id — удаляет задачу.
Используй express-validator для валидации тела запроса. В случае ошибки валидации возвращай 400 с массивом ошибок.
Пример использования:
import { Router, Request, Response } from 'express';
import { body, param, validationResult } from 'express-validator';
interface Todo {
id: number;
title: string;
completed: boolean;
}
let todos: Todo[] = [];
let nextId = 1;
const router = Router();
router.get('/todos', (req: Request, res: Response) => {
res.json(todos);
});
router.post('/todos',
body('title').isString().notEmpty().withMessage('Title is required'),
(req: Request, res: Response) => {
const errors = validationResult(req);
if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });
const newTodo: Todo = { id: nextId++, title: req.body.title, completed: false };
todos.push(newTodo);
res.status(201).json(newTodo);
}
);
router.patch('/todos/:id',
param('id').isInt().withMessage('ID must be integer'),
(req: Request, res: Response) => {
const errors = validationResult(req);
if (!errors.isEmpty()) return res.status(400).json({ errors: errors.array() });
const id = parseInt(req.params.id);
const todo = todos.find(t => t.id === id);
if (!todo) return res.status(404).json({ error: 'Todo not found' });
if (req.body.title !== undefined) todo.title = req.body.title;
if (req.body.completed !== undefined) todo.completed = req.body.completed;
res.json(todo);
}
);
router.delete('/todos/:id',
param('id').isInt(),
(req: Request, res: Response) => {
const id = parseInt(req.params.id);
const index = todos.findIndex(t => t.id === id);
if (index === -1) return res.status(404).json({ error: 'Todo not found' });
todos.splice(index, 1);
res.status(204).send();
}
);
export default router;
6. Промт для работы с асинхронными функциями (Promise.all, async/await)
Для чего: Генерация паттернов для параллельного выполнения запросов.
Промт:
Напиши функцию на TypeScript, которая принимает массив URL-адресов и возвращает массив их содержимого (текст). Используй fetch и Promise.allSettled. Если один из запросов упал, вместо содержимого вставь null и залогируй ошибку. Функция должна быть типизирована: возвращать Promise<(string | null)[]>.
Пример использования:
async function fetchAllUrls(urls: string[]): Promise<(string | null)[]> {
const results = await Promise.allSettled(
urls.map(url => fetch(url).then(res => res.text()))
);
return results.map(result => {
if (result.status === 'fulfilled') {
return result.value;
} else {
console.error(`Ошибка при загрузке: ${result.reason}`);
return null;
}
});
}
// Пример использования:
const urls = ['https://api.example.com/data1', 'https://api.example.com/data2'];
fetchAllUrls(urls).then(console.log);
7. Промт для рефакторинга и оптимизации
Для чего: Улучшение существующего кода — добавление типов, оптимизация производительности.
Промт:
Рефактори этот JavaScript-код в TypeScript с использованием современных возможностей (стрелочные функции, деструктуризация, optional chaining, nullish coalescing):
function getFullName(user) {
if (user && user.name && user.name.first && user.name.last) {
return user.name.first + ' ' + user.name.last;
} else {
return 'Unknown';
}
}
function formatPrice(price) {
if (!price) return '$0.00';
return '$' + price.toFixed(2);
}
Пример использования:
interface User {
name?: {
first?: string;
last?: string;
};
}
const getFullName = (user?: User): string => {
return `${user?.name?.first ?? ''} ${user?.name?.last ?? ''}`.trim() || 'Unknown';
};
const formatPrice = (price?: number): string => {
return `$${(price ?? 0).toFixed(2)}`;
};
Заключение
Эти 7 промтов покрывают 80% повседневных задач JS/TS-разработчика: от создания компонентов и типов до тестирования и рефакторинга. Ключевой секрет успеха — максимальная конкретика в промте: чем детальнее вы опишете требования (типы, названия полей, сценарии), тем точнее будет результат. Не забывайте адаптировать сгенерированный код под свой проект: добавлять обработку ошибок, логирование и следовать code-style команды. Попробуйте эти промты уже сегодня — и вы увидите, как AI ускоряет вашу работу.
ASI Biont поддерживает подключение к различным API через интеграции — подробнее на asibiont.com/courses.
Комментарии