Web Overflow 🇺🇦

#quiz

Decorators in JS 🎄

І хоч в самій специфікації ECMAScript декоратори на стадії пропозиції та плану, їх вже можна спробувати завдяки TypeScript чи Babel.

Отож, що воно таке? Почнемо з маленьких аналогій. Якщо ви працювали з Python, то можливо вже зустрічали там декоратори, і там вони працюють десь з таким ж принципом. Або ж, можливо, ви вивчали патерни і зустрічали там однойменний структурний патерн. Мета декораторів - динамічно навішати певний функціонал. Стандартний приклад - вивести повідомлення перед початком виконання функції та після її завершення.

Синтаксис використання декораторів. Перед оголошенням класу, його методу чи властивості необхідно додати імʼя декоратора з префіксом @. Наприклад:

class Pokemon {
  @log
  attack() { }
}

Декоратори можуть створюватись динамічно, тому наступний синтаксис теж цілком можливий:

class Pokemon {
  @log({ level: "debug" })
  attack() { }
}

Як написати свої декоратори? Тут трохи більше деталей, тому ми думаємо, що краще використати документацію 🙂

Декоратори можна зустріти, наприклад, у NestJS, де зокрема з їх допомогою працює Dependency Injection.

Зверніть увагу, що в документації за посиланням нижче є банер з посиланням на статтю про декоратори із стадії 3.

👉 Відкрити документацію
👉 Відкрити статтю про патерн

#interview

String as Component 🎭

А ви знали, що в React можна string відрендерити як компоненту?

const Component = "div";

return <Component>some content</Component>

Тут зовсім ніякої магії, просто JSX закриває від нас React.createElement.

string & {} 🤯

Буває ж таке, що в TypeScript вам потрібно створити тип, який наче і може бути будь-яким рядком тексту, але ви б хотіли ще додати підказки від IDE про якісь певні варіанти. От, наприклад:

type Color = "primary" | "secondary" | string

Ось оцей | string все псує і через нього немає жодних підказок. Тому, ловіть спосіб, як це можна пофіксити:

type Color = "primary" | "secondary" | (string & {})

#tips

Welcome!

Let's practice our English! So...

👉 What was the last photo you took? Why did you take it?

Have a nice #english_friday 💛

Всі шляхи цього місяця ведуть на найбільший нетворк IT-спільноти. Вибачте, без варіантів. 31 серпня, Київ, Unit City.

До зустрічі, квитки тут! Програма 👉 https://dou.ua/goto/RlpI

Function overload 🥵

Можливо, ви коли-небудь працювали з мовою, яка дозволяє перевантажувати функції. В JavaScript такої потреби немає, адже немає статичної типізації. В TypeScript, хоч типи і не такі як в компільованих мовах, перевантаження функцій теж доступне.

Нехай вам чомусь потрібна функція convert, яка перетворює boolean в number, а number в string. Звісно, можна спробувати Generics, але тут можна обійтись і без них, просто перевантаживши функцію.

Спочатку, потрібно написати "голову" функції для кожного випадку. У вас обовʼязково має бути різний список аргументів (за довжиною чи за типом).

function convert(x: boolean): number;
function convert(x: number): string;

Після цього вам необхідно написати саме тіло функції. Воно обовʼязково має задовольняти кожне попереднє оголошення функції.

function convert(x: boolean | number): number | string {
  return typeof x === "boolean" ? Number(x) : String(x)
}

Зауважте, що TypeScript буде використовувати лише оголошення без тіла функції, коли працюватиме з типізацією. Виглядатиме все так, наче у вас дві різні функції, проте з однаковим іменем.

convert(Math.random() > 0.5 ? true : 1)

Отак не вийде зробити, адже немає функції convert, яка може прийняти boolean | number, вона може прийняти лише конкретно boolean або number. Саме ця частина спочатку часто може збивати з пантелику.

Якщо хочете дослідити це питання більше, нижче додаємо вам посилання на Handbook TypeScript.

👉 Відкрити посилання

#tips

#todo написати функцію на будь-якій мові програмування, яка приймає повний шлях до файлу та повертає число.

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

Наприклад:
abc1def2 => 12
dhij3klm => 33
4no5p6qr => 46

Результат = 91

#quiz

Чим стрілочна функція відрізняється від звичайної? 🤓

Здивовані, що раніше про це не писали. Були тести, але повного розбору не було, а це важливо знати як і на співбесіді, так і в роботі.

Вирішили створити окрему статтю, щоб все було наглядно і з прикладами.

Тому, запрошуємо до прочитання 💛

👉 Відкрити посилання

#interview

Welcome!

Let's practice our English! So...

👉 What is your worst habit?

Have a nice #english_friday 💛

Допоможіть вирішити нашу суперечку 👿

PlayPhrase.me 👀

Ми вирішили добити свою англійську і записались на курси. Нас запхали в доволі високий рівень і тепер ми вчимо складні фрази, які ніколи не використаємо і які дійсно важко перекласти та запам'ятати.

Крім ChatGPT, який старається нам все пояснити, ми використовуємо PlayPhrase.me - сайт, де можна почути вживання слова або фрази в реальних фільмах чи серіалах.

Рекомендуємо!

👉 Відкрити посилання

#tips

#todo написати функцію на будь-якій мові програмування, яка розділяє масив людей на підмасиви за віком.

Функція має приймати два аргументи: масив обʼєктів типу Person, де Person = { name: string, age: number }, та масив чисел breakpoints. Функція має повернути двовимірний масив, де кожен i-ий рядок - підмасив people, в яких breakpoints[i - 1] <= age < breakpoints[i] для i > 1 та age < breakpoints[i] для i = 1.

Так, так, ми тут почали рахувати з 1! І ні, це завдання не повʼязано з ейджизмом!

people = [
  { name: "John", age: 16 },
  { name: "Jane", age: 17 },
  { name: "Joe", age: 30 },
]

breakpoints = [18, 21, 35]

output = [
  [
    { name: "John", age: 16 },
    { name: "Jane", age: 17 },
  ],
  [],
  [{ name: "Joe", age: 30 }],
]