Расскажите об использовании декораторов свойств в 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

Angular для профессионалов (2018)

Книга рассказывает о принципах применения Angular в проектах, начиная с основ и заканчивая наиболее продвинутыми и сложными функциями. В ней описаны общие проблемы при разработке с использованием популярного фреймворка, а также способы их избежать. Разобраны преимущества работы с шаблоном MVC.

👉 @frontendInterview

В чем заключаются преимущества использования JSX?

JSX - это опциональное расширение синтаксиса JavaScript, облегчающее создание компонентов. JSX включает в себя разметку и выражения JavaScript. В действительности, JSX является сокращением для React.createElement(), делая код чище и проще.

JSX может быть полезен для создания выразительных конструкций или пользовательских компонентов, снижая количество опечаток в больших древовидных структурах и облегчая процесс преобразования разметки в деревья React-элементов. Кроме того, при использовании JSX в консоль выводятся предупреждения и потенциальные ошибки, помогающие устранять проблемы на ранней стадии разработки.

👉 @frontendInterview

👉 @frontendInterview

Как определить наличие свойства в объекте?

Существует три способа это сделать.
Первый способ состоит в использовании оператора «in»:

 o = {
    'prop': 'bwahahah',
    'prop2': 'hweasa'
}

console.log('prop' in o) // true
console.log('prop1' in o) // false

Второй — использовать метод hasOwnProperty:

 console.log(o.hasOwnProperty('prop2')) // true
 console.log(o.hasOwnProperty('prop1')) // false

Третий — индексная нотация массива:
console.log(o['prop']) // bwahahah
console.log(o['prop1']) // undefined

👉 @frontendInterview

Сортировка массивом

Вам даны два массива. Вы должны отсортировать первый массив, используя значения из второго массива чисел.

Пример:
initialArray = ['x', 'y', 'z'] sortingArray = [ 1, 2, 0]
sort(initialArray, sortingArray) => ['z', 'x', 'y']
sort(['z', 'x', 'y'], [0, 2, 1]) => ['z', 'y', 'x']

👉 @frontendInterview

Как запустить повторный рендеринг компонента без вызова функции setState()?

Использование forceUpdate()
В следующем примере при монтировании компонента генерируется случайное число. При нажатии кнопки вызывается функция forceUpdate(), что, в конечном счете, заврешается генерацией нового случайного числа:

 import React, { Component } from 'react'

 class App extends React.Component{
   constructor() {
     super()
     this.forceUpdateHandler = this.forceUpdateHandler.bind(this)
   }

   forceUpdateHandler() {
     this.forceUpdate()
   }

   render() {
     return (
       <div>
         <button onClick={this.forceUpdateHandler}>Принудительное обновление</button>
         <h4>Случайное число: { Math.random() }</h4>
       </div>
     )
   }
}

 export default App

Обратите внимание: использовать forceUpdate() не рекомендуется.

👉 @frontendInterview