Обнаружьте ошибку · TypeScript

Условие

Обнаружьте ошибку · TypeScript

Хитрые ошибки

Каждый из этих восьми фрагментов компилируется, проходит неформальный обзор и выглядит нормально. В каждом скрыта ошибка. Для каждого: скажите, что ломается, при каких условиях — и как бы вы это обнаружили.

Думайте вслух. Нас интересует, как вы читаете код, а не секундомер. Не обязательно точно угадывать все.

01 Размещение заказа

interface Notifier { send(to: string, message: string): Promise }

class OrderService { constructor(private readonly notifier: Notifier) {}

async placeOrder(order: Order): Promise<OrderId> { const id = await this.repo.save(order) this.notifier.send(order.customerEmail, Order ${id} confirmed) return id } }

02 Обновление профиля

app.post('/profile', async (req, res) => { const profile = parseProfile(req.body) try { await db.profiles.update(req.user.id, profile) } catch (err) { logger.warn('profile update failed', err) } res.status(200).json({ status: 'saved' }) })

03 Удаление комментария

app.delete('/comments/:id', requireAuth, async (req, res) => { const comment = await db.comments.findById(req.params.id) if (!comment) { return res.status(404).end() } await db.comments.delete(comment.id) res.status(204).end() })

04 Постраничная навигация по списку

function paginate<T>(items: T[], page: number, pageSize: number): T[] { const start = page * pageSize const end = start + pageSize return items.slice(start, end) }

// вызывающий код const results = paginate(rows, page, 20) // страница начинается с 1 в UI

05 Загрузка статей с авторами

async function loadArticlesWithAuthors(): Promise<ArticleView[]> { const articles = await db.query('SELECT * FROM articles WHERE published = true') const views: ArticleView[] = [] for (const article of articles) { const author = await db.query('SELECT * FROM users WHERE id = $1', [article.authorId]) views.push({ ...article, author: author[0] }) } return views }

06 Разрешение значений по умолчанию в конфигурации

interface Settings { retryLimit?: number displayName?: string }

function resolveConfig(s: Settings) { return { retryLimit: s.retryLimit || 3, displayName: s.displayName || 'Anonymous', } }

07 Тестирование помощника по скидкам

function applyDiscount(price: number, percent: number): number { return price - price * (percent / 100) }

describe('applyDiscount', () => { it('applies a discount', () => { const spy = vi.fn().mockReturnValue(90) const result = spy(100, 10) expect(result).toBeDefined() expect(result).toBe(90) }) })

08 Вычисление лучших результатов

function topScores(scores: number[], take = 3): number[] { return scores.sort((a, b) => b - a).slice(0, take) }

const results = [4, 1, 9, 2] const podium = topScores(results) // ... позже, в другом месте: renderRawResults(results) // ожидается [4, 1, 9, 2]

Ответ

При ревью React-компонента формы регистрации стоит обратить внимание на следующие моменты и предложить улучшения:

1. Управление состоянием:

   • Использовать useState или useReducer для управления полями формы.
   • Рассмотреть использование библиотек вроде Formik или React Hook Form для упрощения валидации и управления.

2. Валидация:

   • Добавить клиентскую валидацию с понятными сообщениями об ошибках.
   • Использовать регулярные выражения для проверки email, пароля и других полей.

3. Обработка событий:

   • Обработчики должны быть оптимизированы, например, использовать useCallback для предотвращения лишних перерисовок.

4. Доступность:

   • Добавить атрибуты aria-* для улучшения доступности.
   • Обеспечить правильную связь между <label> и <input> через htmlFor.

5. UX:

   • Добавить индикаторы загрузки при отправке формы.
   • Блокировать кнопку отправки, если форма невалидна.

6. Безопасность:

   • Не хранить пароли в состоянии в открытом виде дольше, чем нужно.
   • Обеспечить защиту от XSS и CSRF на уровне сервера.

Пример улучшенного обработчика отправки формы:

const handleSubmit = (event) => {
  event.preventDefault();
  if (!isValid) return;
  setIsSubmitting(true);
  // Отправка данных на сервер
  // Обработка ответа
  setIsSubmitting(false);
};

Таким образом, улучшения направлены на повышение надежности, удобства и безопасности формы.