Современный фронтенд на нашем втором канале

17к фронтендеров уже читают его, подпишись и ты

👉 @seniorFront

Как в TypeScript реализовать свойства класса, являющиеся константами?

В TypeScript, при объявлении свойств классов, нельзя использовать ключевое слово const. При попытке использования этого ключевого слова выводится следующее сообщение об ошибке: A class member cannot have the ‘const’ keyword. В TypeScript 2.0 имеется модификатор readonly, позволяющий создавать свойства класса, предназначенные только для чтения:

class MyClass {
readonly myReadonlyProperty = 1;
myMethod() {
console.log(this.myReadonlyProperty);
}
}

new MyClass().myReadonlyProperty = 5; // ошибка, так как свойство предназначено только для чтения

👉 @frontendInterview

👉 @frontendInterview

Почему следует быть осторожным при распространении (spread) пропов на DOM-элементы?

При распространении пропов мы подвержены риску добавления неизвестных HTML-атрибутов, что считается плохой практикой. Вместо этого, лучше использовать деструктуризацию пропа с помощью оператора ...rest. Это обеспечит добавление только нужных пропов:

Например:
const ComponentA = () =>
<ComponentB isDisplay={true} className='someClassName' />

const ComponentB = ({ isDisplay, ...domProps }) =>
<div {...domProps}>{ComponentB}</div>

👉 @frontendInterview

Расскажите об основных компонентах TypeScript.

TypeScript включает в себя три основных компонента:

1. Язык. Это, с точки зрения разработчиков, самая важная часть TypeScript. «Язык» — это синтаксис, ключевые слова, всё то, что позволяет писать программы на TypeScript.

2. Компилятор. TypeScript обладает компилятором с открытым исходным кодом, он является кросс-платформенным, с открытой спецификацией, и написан на TypeScript. Компилятор выполняет преобразование TypeScript-кода в JavaScript-код. Кроме того, если с программой что-то не так, он выдаёт сообщения об ошибках. Он позволяет объединять несколько TypeScript-файлов в один выходной JS-файл и умеет создавать карты кода.

3. Вспомогательные инструменты. Вспомогательные инструменты TypeScript предназначены для облегчения процесса разработки с его использованием в различных IDE.

👉 @frontendInterview

👉 @frontendInterview

Изучаем TypeScript 3.

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

👉 @frontendInterview

Отфильтровать длинные слова

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

Пример:
filterLongWords("The quick brown fox jumps over the lazy dog", 4)
//['quick', 'brown', 'jumps']

👉 @frontendInterview

CSS для профи

Перед вами прямой путь в высшую лигу веб-разработки. Книга «CSS для профи» подарит вам не только свежие идеи, но и вдохновит на подвиги, а облегчить этот тернистый путь помогут новейшие технические достижения - адаптивный дизайн, библиотеки шаблонов и многое другое.

👉 @frontendInterview

​Как привязать функцию к экземпляру компонента в React?

Существует несколько способов предоставить функции доступ к свойствам компонента, таким как props и state.

Синтаксис полей класса

 class App extends Component {
   // обратите внимание: данный синтаксис является экспериментальным и пока не стандартизирован
   handleClick = () => {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={this.handleClick}>Нажми на меня</button>
   }
 }

Привязка в методе render()

 class App extends Component {
   handleClick() {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={this.handleClick.bind(this)}>Нажми на меня</button>
   }
 }

Обратите внимание: использование Function.prototype.bind() в методе render() приводит к созданию функции при каждом рендеринге компонента, что потенциально может повлечь проблемы с производительностью.

Стрелочная функция в методе render()

 class App extends Component {
   handleClick() {
     console.log('Произошло нажатие кнопки')
   }
   render() {
     return <button onClick={() => this.handleClick()}>Нажми на меня</button>
   }
 }

Обратите внимание: использование стрелочной функции в методе render() также приводит к созданию функции при каждом рендеринге компонента, что может нивелировать оптимизацию, основанную на проведении строгого сравнения состояния и пропов.

👉 @frontendInterview

👉 @frontendInterview

Что представляют собой .map-файлы в TypeScript?

Файлы с расширением .map хранят карты кода (source map), которые содержат данные о соответствии кода, написанного на TypeScript, JavaScript-коду, созданному на его основе. С этим файлами могут работать многие отладчики (например — Visual Studio и инструменты разработчика Chrome). Это позволяет, в ходе отладки, работать с исходным кодом программ на TypeScript, а не с их JS-эквивалентами.

👉 @frontendInterview

Наибольшее и наименьшее

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

Примеры:
highAndLow("1 2 3 4 5"); // return "5 1"
highAndLow("1 2 -3 4 5"); // return "5 -3"
highAndLow("1 9 3 4 -5"); // return "9 -5"

👉 @frontendInterview

👉 @frontendInterview