Интерфейс. Основы проектирования взаимодействия

Алан Купер начал работу над первым изданием этой книги 20 лет назад. Он убеждал программистов в том, что пришла пора шагнуть навстречу пользователям и начать писать программы, которые будут им нравиться. В наши дни сложилась совершенно иная ситуация — оцифровка всех видов информации заставила пользователей с головой окунуться в новые технологии. Четвертое издание книги учитывает все изменения в отрасли, произошедшие за последние семь лет, с сохранением всех идей из предыдущих изданий, не потерявших актуальности.
Проектирование взаимодействия — это ориентированный на человека подход проектирования интерактивных цифровых продуктов, сред, систем и сервисов. Много внимания уделено проектированию поведения — аспекту, которым традиционные дисциплины проектирования нередко пренебрегают.

👉 @frontendInterview

Есть ли в предоставленном вам TypeScript-коде ошибки? Объясните свой ответ.

Ошибок в этом коде нет. Объявление класса создаёт две сущности: это тип данных, используемый для создания экземпляров класса, и функция-конструктор. Так как классы создают типы данных, использовать их можно там же, где можно использовать интерфейсы.

👉 @frontendInterview

👉 @frontendInterview

Что такое синтетические события (synthetic events) в React?

В React обработчики событий оборачиваются в объект SyntheticEvent. Данные объекты являются общими, т.е. объекты, получаемые обработчиками, повторно используются другими обработчиками для повышения производительности. Это также означает, что получить доступ к свойствам такого объекта не получится, поскольку они сбрасываются перед повторным использованием.

В следующем примере в консоль будет выведено null, поскольку свойства события были сброшены в SyntheticEvent:

 function handleClick(event) {
   setTimeout(function () {
     console.log(event.target.name)
   }, 1000)
 }

Эту проблему можно решить посредством сохранения свойства события:
function handleClick(event) {
const name = event.target.name
setTimeout(function () {
console.log(name)
}, 1000)
}

👉 @frontendInterview

Убрать минимум

Напишите функцию, которая принимает массив чисел, обрабатывает его и возвращает новый массив, в котором не будет самого меньшего числа из данного массива. Если наименьших чисел несколько, функция должна убрать число с наименьшим индексом.

Примеры:
removeSmallest([1,2,3,4,5]) = [2,3,4,5]
removeSmallest([5,3,2,1,4]) = [5,3,2,4]
removeSmallest([2,2,1,2,1]) = [2,2,2,1]

👉 @frontendInterview

👉 @frontendInterview

Расскажите об использовании декораторов свойств в TypeScript.

Декораторы можно использовать для изменения поведения классов, при этом ещё больше пользы от них можно получить при их использовании с каким-либо фреймворком. Например, если в вашем фреймворке есть методы, доступ к которым ограничен (скажем, они предназначены только для администратора), несложно будет написать декоратор метода @admin, который будет запрещать доступ к соответствующим методам пользователям, не являющимся администраторами. Можно создать декоратор @owner, который позволяет модифицировать объект только его владельцу. Вот как может выглядеть использование декораторов:

class CRUD {
get() { }
post() { }

@admin
delete() { }

@owner
put() { }
}

👉 @frontendInterview

👉 @frontendInterview

Что такое объединение событий (event polling) в React?

SyntheticEvent объединяются. Это означает, что объект события будет повторно использован, а все его свойства будут сброшены после вызова коллбека обработчика. Это связано с повышением производительности. Поэтому асинхронный доступ к событию невозможен.

Пример

 function onClick(event) {
   console.log(event) // => null
   console.log(event.type) // => "click"
   const eventType = event.type // => "click"

   setTimeout(function() {
     console.log(event.type) // => null
     console.log(eventType) // => "click"
   }, 0)

   // не работает: `this.state.clickEvent` содержит нулевое значение
   this.setState({ clickEvent: event })

   // однако, мы по-прежнему можем экспортировать свойства события
   this.setState({ eventType: event.type })
 }

Если нам требуется асинхронный доступ к свойствам события, мы можем вызвать event.persist() на событии, что удалит синтетическую событие из "пула" и позволит ссылкам на событие сохраняться в пользовательском коде.

👉 @frontendInterview

Поддерживает ли TypeScript перегрузку функций?

TypeScript поддерживает перегрузку функций, но реализация этого механизма отличается от той, которую можно видеть в других объектно-ориентированных языках. А именно, в TS создают лишь одну функцию и некоторое количество объявлений. Когда такой код компилируется в JavaScript, видимой оказывается лишь одна конкретная функция. Этот механизм работает из-за того, что JS-функции можно вызывать, передавая им разное количество параметров.

class Foo {
myMethod(a: string);
myMethod(a: number);
myMethod(a: number, b: string);
myMethod(a: any, b?: string) {
alert(a.toString());
}
}

👉 @frontendInterview

👉 @frontendInterview

React в действии

Книга "React в действии" знакомит фронтенд-разработчиков с фреймворком React и смежными инструментами. Сначала вы познакомитесь с библиотекой React, затем освежите материал о некоторых фундаментальных идеях в данном контексте и узнаете о работе с компонентами. Вы на практике освоите чистый React (без транспиляции, без синтаксических помощников), перейдете от простейших статических компонентов к динамическим и интерактивным.

Во второй половине книги рассмотрены различные способы взаимодействия с React. Вы изучите базовые методы жизненного цикла, научитесь создавать поток данных, формы, а также тестировать приложения. На закуску вас ждет материал об архитектуре React-приложения, взаимодействии с Redux, экскурс в серверный рендеринг и обзор React Native.

👉 @frontendInterview

Строка заканчивается на

Вам даны две строки. Напишите функцию, которая проверит заканчивается ли первая строка второй строкой.

Примеры:
solution('abc', 'bc') // returns true
solution('abc', 'd') // returns false

👉 @frontendInterview