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

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

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

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

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

#interview

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

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

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

Результат = 91

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

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

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

Welcome!

Let's practice our English! So...

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

Have a nice #english_friday 💛

string & {} 🤯

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

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

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

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

#tips

String as Component 🎭

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

const Component = "div";

return <Component>some content</Component>

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

Decorators in JS 🎄

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

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

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

class Pokemon {
  @log
  attack() { }
}

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

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

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

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

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

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

#interview

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

❗️Обовʼязкова умова - не використовувати сортування.

?n=u&q=s ❓

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

Але обробляти оце все - не найлегша робота. Потрібно парсити query параметри, реагувати на зміни і власне змінювати їх в посиланні, бажано через shallow роутинг (без перезавантаження сторінки).

Тож, якщо ви використовуєте Next.js, зверніть увагу на nuqs. Дуже проста і корисна бібліотека, яка дозволить працювати з query параметрами, як з звичайним станом в React.

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

#library

Welcome!

Let's practice our English! So...

👉 If you could spend a day with any historical figure, who would it be and why?

Have a nice #english_friday 💛

#how_to створити shimmer wave text animation 🎉

Виконаний з допомогою HTML, SASS і JavaScript!

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

З Днем Незалежності, рідна 💙💛