#how_to додати більше одного ref до елемента в React? ?

```
function mergeRefs(
...refs: (React.MutableRefObject | React.LegacyRef)[]
): React.RefCallback {
return function (value) {
refs.forEach((ref) => {
if (typeof ref === 'function') {
ref(value)
} else if (ref !== null) {
;(ref as React.MutableRefObject).current = value
}
})
}
}

// Example
const forwardedRef: React.ForwardedRef
const localRef = useRef()

```

Welcome!

Let's practice our English! So...

*? If you could redesign any website or app, which one would it be and why?*

Have a nice #english_friday ?

ts-reset 0.6.0 ?

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

Коротко пригадаємо, що це взагалі таке.

ts-reset - це як css-reset, тільки для TypeScript. З ним .filter(Boolean) повертатиме правильний тип, у вас не буде зайвих any від JSON.parse, а в includes можна буде передати будь-який string, навіть, якщо сам масив протипізований строгіше.

В останньому ж оновленні error в promise.catch має тип unknown, а не any, як раніше. Те саме стосується і Map, який створений без явного типізування:

```
const map = new Map()

map.get("key") // раніше any, тепер unknown

```

? Відкрити посилання
? Відкрити пост у Twitter

#news

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

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 ?

?n=u&q=s ❓

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

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

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

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

#library

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 ?

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 канали, які точно варті вашої уваги
— англійська для розробників та ІТ роботи загалом, готуйся до співбесіди разом з нами ??*

«ПРОГРАМІТ» — канал із цікавезною інформацією про Айті та Технології, який ведуть програмісти та діляться своїм досвідом ?? та ?? мовами

?‍? IT Двіж — важливе про ІТ. Найцікавіші новини, можливості для розвитку, ІТ-гумор.

UAPROTECH *??***- пише про ІТ, digital та трохи про ігри. Без зайвого спаму та 100 непрочитаних дописів.

ПТСР && IT — блог ветерана ЗСУ про IT, кібербезпеку, ПТСР та особисті погляди на події в Україні. Розвиваємо справжню українську спільноту IT-спеціалістів! ?

#useful