Question 1

Як встановити TypeScript у проект?

Accepted Answer

1) npm i -D typescript. 2) npx tsc --init створить tsconfig.json. 3) Додай скрипти: tsc, tsc -w. 4) Для Node: npm i -D ts-node. 5) Перевір: npx tsc -v.

Question 2

Що таке tsconfig.json і за що він відповідає?

Accepted Answer

1) Це конфігурація компілятора. 2) target/module визначають вихідний JS. 3) strict включає строгі перевірки. 4) include/exclude керують файлами. 5) paths/baseUrl налаштовують алиаси.

Question 3

Чим відрізняються type і interface?

Accepted Answer

1) interface розширюється через extends. 2) interface підтримує declaration merging. 3) type зручний для union/intersection. 4) Для об'єктів частіше беруть interface, але це не правило. 5) У реальності вибирай за задачею і стилем команди.

Question 4

Що таке strict mode у TypeScript і чому його варто вмикати?

Accepted Answer

1) strict включає набір строгих флагів. 2) Ловить помилки з null/undefined і типами. 3) Покращує автодоповнення і рефакторинг. 4) Підвищує якість коду у великих проектах. 5) Вмикай поступово, якщо проект старий.

Question 5

Що таке any і чому його варто уникати?

Accepted Answer

1) any вимикає перевірку типів. 2) Помилки переходять у runtime. 3) Замість any використовуйте unknown, generics або точні типи. 4) Для міграції можна тимчасово використовувати any, але з планом прибрати. 5) Можна обмежити через eslint/tsconfig.

Question 6

Чим відрізняється unknown від any?

Accepted Answer

1) unknown безпечніше: його не можна використовувати без перевірки. 2) Вимагає narrowing (typeof, in, instanceof). 3) Підходить для зовнішніх даних (JSON). 4) any — 'дірка' у типах. 5) З unknown помилки ловляться на етапі компіляції.

Question 7

Як типізувати результат JSON.parse?

Accepted Answer

1) JSON.parse повертає any. 2) Використовуй unknown і валідовуй структуру. 3) Створюй type guard або схему (zod). 4) Після валідacji — приведи до потрібного типу. 5) Не роби сліпий as YourType без перевірки.

Question 8

Що таке type narrowing і як він працює?

Accepted Answer

1) Це звуження типу у гілках коду. 2) Використовуй typeof для примітивів. 3) Використовуй in/instanceof для об'єктів/класів. 4) Користувацькі type guards також звужують тип. 5) Допомагає писати код без зайвих кастів.

Question 9

Як написати функцію type guard?

Accepted Answer

1) Функція повертає вираз виду x is T. 2) Внутрішньо перевіряй поля і типи. 3) Використовуй для unknown/union. 4) Тримай перевірки простими і покривай тестами. 5) Валідація схемою (zod) часто надійніша.

Question 10

Що таке union types і де вони корисні?

Accepted Answer

1) Union: A | B. 2) Добре для обмежених наборів значень. 3) Часто використовують з дискримінуючим полем. 4) Вимагає narrowing перед доступом до специфічних полів. 5) Покращує виразність API.

Question 11

Що таке intersection types і коли їх використовувати?

Accepted Answer

1) Intersection: A & B. 2) Об'єднує властивості кількох типів. 3) Зручно для композицій і міксинів. 4) Обережно з конфліктуючими полями. 5) Часто зустрічається у типах бібліотек.

Question 12

Що таке literal types і навіщо вони потрібні?

Accepted Answer

1) Типи літералів: 'GET', 200, true. 2) Основи для union з конкретних значень. 3) Зручно для статусів, ролей, режимів. 4) Працюють разом з as const. 5) Допомагають уникнути помилок при друку.

Question 13

Навіщо потрібен as const?

Accepted Answer

1) Робить літерали незмінними і вузькими. 2) Перетворює масив у readonly tuple. 3) Корисно для конфігів і словників. 4) Спрощує виведення типів. 5) Часто використовується з satisfies.

Question 14

Що таке satisfies і чим він краще 'as'?

Accepted Answer

1) satisfies перевіряє відповідність типу, але зберігає вивід. 2) Не 'зажимає' значення як as. 3) Корисно для конфігів і мапінгів. 4) Допомагає ловити помилки ключів/полів. 5) Доступно в TS 4.9+.

Question 15

Як типізувати об'єкт-словник з фіксованими ключами?

Accepted Answer

1) Використовуй Record. 2) K може бути union літералів. 3) Для часткових ключів — Partial>. 4) Для перевірки без втрати виводу — satisfies. 5) Для динаміки — index signature.

Question 16

Що таке index signature і коли він потрібен?

Accepted Answer

1) {[key: string]: Value}. 2) Для об'єктів з невідомими ключами. 3) Обмежує тип усіх значень. 4) Може конфліктувати з конкретними полями — обережно. 5) Іноді краще Map<string, V>.

Question 17

Як типізувати масив з фіксованою структурою (tuple)?

Accepted Answer

1) Tuple: [number, string]. 2) Можна робити readonly tuple через as const. 3) Для іменованих елементів: [id: string, value: number]. 4) Зручно для пар key-value. 5) Для великих структур краще interface.

Question 18

Що таке generics і навіщо вони потрібні?

Accepted Answer

1) Дозволяють параметризувати типи. 2) Наприклад: function first<T>(a: T[]): T. 3) Убирають дублювання коду. 4) Можна обмежувати T через extends. 5) Покращують типізацію бібліотек.

Question 19

Як обмежувати generics через extends?

Accepted Answer

1) <T extends { id: string }>. 2) Тоді у T гарантовано є id. 3) Можна обмежувати union'ом. 4) Для ключів використовуйте extends keyof. 5) Обмеження покращують автодоповнення.

Question 20

Як типізувати функцію getProperty(obj, key)?

Accepted Answer

1) <T, K extends keyof T>(obj: T, key: K) => T[K]. 2) keyof дає набір ключів. 3) T[K] повертає тип значення за ключем. 4) Працює і з optional полями. 5) Це канонічний приклад generics.

Question 21

Що таке keyof і чому він корисний?

Accepted Answer

1) keyof T дає union ключів типу. 2) Дозволяє безпечно індексувати. 3) Зручний у утилітах Pick/Omit. 4) Допомагає створювати типобезпечні API. 5) Працює разом з mapped types.

Question 22

Що таке mapped types?

Accepted Answer

1) Це типи виду { [K in keyof T]: ... }. 2) Дозволяють трансформувати поля. 3) На них основані Partial/Required/Readonly. 4) Можна змінювати модифікатори: -? / +readonly. 5) Потужний інструмент для бібліотек.

Question 23

Як працює Partial<T> і коли його використовувати?

Accepted Answer

1) Робить усі поля optional. 2) Зручно для патч-об'єктів (update). 3) Небезпека: втрачається гарантія наявності полів. 4) Часто краще Partial>. 5) Для форми введення — хороший варіант.

Question 24

У чому різниця між Pick і Omit?

Accepted Answer

1) Pick бере підмножину полів. 2) Omit виключає поля. 3) Зручно для DTO і публічних моделей. 4) Уникайте дублювання структур. 5) Комбінуйте з Partial/Required.

Question 25

Що таке Record<K, V> і де він корисний?

Accepted Answer

1) Record створює об'єкт з ключами K і значеннями V. 2) Зручно для словників і маппінгів. 3) K може бути union'ом. 4) Для неповних ключів використовуйте Partial>. 5) Для суворої перевірки ключів — satisfies.

Question 26

Як типізувати функції зворотного виклику (callbacks)?

Accepted Answer

1) Опиши сигнатуру: type Fn = (x: number) => string. 2) Для подій — використовуй типи бібліотеки (React, DOM). 3) Для async — Promise<...>. 4) Не забувай про опційні параметри. 5) Зроби явним повернене значення.

Question 27

Як типізувати Promise та async/await?

Accepted Answer

1) async функція повертає Promise. 2) Вкажи тип результату: Promise. 3) await розкриває Promise. 4) Обробляй помилки через try/catch. 5) Не повертай any з async-ланцюгів.

Question 28

Що таке overloads (перевантаження) функцій?

Accepted Answer

1) Можна оголосити кілька сигнатур. 2) Реалізація одна, але типи різні. 3) Корисно для функцій з різними режимами. 4) Перевантаження мають бути сумісними. 5) Іноді простіше використовувати union і narrowing.

Question 29

Чим відрізняється type assertion (as) від реальної перевірки типів?

Accepted Answer

1) as не перевіряє runtime. 2) Він каже компілятору: 'повір'. 3) Може приховати баги. 4) Краще спочатку валідовувати дані. 5) Використовуй as тільки коли точно знаєш структуру.

Question 30

Що таке non-null assertion (!) і чому він небезпечний?

Accepted Answer

1) x! говорить, що x не null/undefined. 2) Компилятор перестає скаржитись. 3) В runtime може впасти, якщо ти помилився. 4) Краще перевірка if (x) або optional chaining. 5) Використовуй рідко і усвідомлено.

Question 31

Як працює optional chaining (?.)?

Accepted Answer

1) Дозволяє безпечно звертатися до вкладених полів. 2) obj?.a?.b поверне undefined, якщо щось відсутнє. 3) Працює з викликом функцій: fn?.(). 4) Не замінює бізнес-валидацію. 5) Зручно для UI та даних з API.

Question 32

Як працює nullish coalescing (??)?

Accepted Answer

1) a ?? b бере b тільки якщо a null/undefined. 2) Не плутати з 0/''/false як ||. 3) Відмінно для дефолтів. 4) Часто комбінують з optional chaining. 5) Розумій різницю між || і ??.

Question 33

Як типізувати помилки в catch у строгому режимі?

Accepted Answer

1) В TS catch-перемінна часто unknown. 2) Перевір: err instanceof Error. 3) Логуй безпечно: String(err). 4) Для бібліотек роби свої типи помилок. 5) Не передбачай структуру без перевірки.

Question 34

Що таке discriminated union і як його проектувати?

Accepted Answer

1) Union з полем-тегом: type: 'a' | 'b'. 2) У switch по тегу тип автоматично звужується. 3) Зручно для подій і стану. 4) Додавай exhaustive check (never). 5) Це один із кращих патернів TS.

Question 35

Як зробити exhaustive check у switch?

Accepted Answer

1) У default присвой змінну типу never. 2) Якщо з’явиться новий варіант union — компілятор скаржитиметься. 3) Приклад: const _exhaustive: never = x. 4) Допомагає підтримувати код. 5) Особливо корисно в reducer'ах.

Question 36

Як типізувати класи та їх поля у TypeScript?

Accepted Answer

1) Вказуй модифікатори: public/private/protected. 2) Оголошуй поля заздалегідь або в constructor. 3) Використовуй readonly для незмінних. 4) Параметр-властивість: constructor(private api: Api) {}. 5) Не зловживай класами, якщо достатньо функцій.

Question 37

Що таке abstract class і interface: що обрати?

Accepted Answer

1) interface описує контракт без реалізації. 2) abstract class може містити спільну реалізацію. 3) У TS можна реалізувати кілька interface, але успадковувати один клас. 4) Для 'портів' та API зазвичай достатньо interface. 5) Abstract зручний для базових компонентів/шаблонів.

Question 38

Як типізувати this у методах і функціях?

Accepted Answer

1) У методів класів this виводиться автоматично. 2) Для функцій можна вказати this-параметр: function f(this: X) {}. 3) Стрілкові функції беруть this із зовнішнього контексту. 4) У callbacks часто втрачається this — біндуй або використовуй стрілки. 5) Правильна типізація ловить помилки.

Question 39

Як працює enum і чому часто радять union замість enum?

Accepted Answer

1) enum генерує runtime-код (зазвичай). 2) Може ускладнити bundle. 3) Union літералів простіше і tree-shakable. 4) Якщо потрібно runtime-значення — можна enum або const object. 5) const enum прискорює, але небезпечний для бібліотек.

Question 40

Що таке const enum і в чому його ризики?

Accepted Answer

1) const enum інлайниться у код. 2) Зменшує runtime-накладні. 3) Може ламатися при збірці бібліотек і різних налаштуваннях. 4) Не завжди сумісний з babel/transpileOnly. 5) Часто краще об'єкт + as const.

Question 41

Як типізувати функції вищого порядку (HOF)?

Accepted Answer

1) Обґрунтовуй вхідний і вихідний тип. 2) Зберігай сигнатуру через generics. 3) Для декораторів функцій використовуй any>. 4) Повертай Parameters і ReturnType. 5) Це дає сильну типізацію.

Question 42

Що таке ReturnType і Parameters і коли вони потрібні?

Accepted Answer

1) ReturnType бере тип результату функції. 2) Parameters бере кортеж аргументів. 3) Корисно для обгорток і проксі. 4) Знижує дублювання. 5) Працює тільки з типами функцій.

Question 43

Як типізувати систему подій (event emitter) безпечно?

Accepted Answer

1) Зроби map: EventName -> payload type. 2) on<K extends keyof Events>(name: K, cb: (p: Events[K]) => void). 3) emit аналогічно. 4) Так ти уникнеш помилок типів у подіях. 5) Гарний патерн для фронту і ноди.

Question 44

Як типізувати API-клієнт і відповіді сервера?

Accepted Answer

1) Визнач DTO типи для відповідей. 2) Використовуй runtime-валидацію для зовнішніх даних. 3) Для fetch роби функцію request() що повертає Promise. 4) Ніколи не довіряй серверу без перевірок. 5) Логуй і обробляй помилки статусів.

Question 45

Як типізувати fetch і обробку JSON?

Accepted Answer

1) const res = await fetch(url). 2) Перевіряй res.ok. 3) const data: unknown = await res.json(). 4) Валідируй data і потім приведи до типу. 5) Таймаути/ретраї додавай окремо.

Question 46

Як у TS правильно працювати з DOM-типами?

Accepted Answer

1) Включи lib: ['DOM']. 2) Використовуй querySelector з generic: document.querySelector<HTMLDivElement>('...'). 3) Перевіряй на null. 4) Для подій використовуй MouseEvent/KeyboardEvent. 5) Не кастуй без необхідності.

Question 47

Як типізувати addEventListener і обробники?

Accepted Answer

1) element.addEventListener('click', (e) => { ... }). 2) e має тип MouseEvent (для кліка). 3) Для window/document типи теж виводяться. 4) Якщо потрібно, уточнюй target через instanceof. 5) Не використовуй any для подій.

Question 48

Як типізувати React-компоненти на TypeScript?

Accepted Answer

1) Props через interface/type. 2) function Component(props: Props) { ... }. 3) Для children: React.ReactNode. 4) Для подій: React.ChangeEvent<HTMLInputElement>. 5) Не завжди потрібен React.FC.

Question 49

Коли використовувати React.FC, а коли ні?

Accepted Answer

1) React.FC додає children за замовчуванням. 2) Іноді це небажано. 3) Типізація defaultProps відрізняється. 4) Прості функції з Props зазвичай достатньо. 5) Обирай єдиний стиль у проекті.

Question 50

Як типізувати useState у React?

Accepted Answer

1) useState(0) фіксує тип. 2) Для nullable: useState(null). 3) Для складних об'єктів краще інтерфейс. 4) Лінива ініціалізація: useState(() => compute()). 5) Уникай any у стані.

Question 51

Як типізувати useRef?

Accepted Answer

1) useRef(null). 2) Перевіряй ref.current на null. 3) Для mutable значення: useRef(0). 4) Не використовуй ref як стан. 5) Для callbacks можна useCallback ref.

Question 52

Що таке declaration merging і де воно зустрічається?

Accepted Answer

1) interface може об'єднуватися за ім'ям. 2) Зручно для розширення глобальних типів. 3) Часто використовується для доповнення Window/NodeJS.ProcessEnv. 4) Може бути джерелом конфліктів. 5) Контролюй, де оголошуєш глобальні типи.

Question 53

Як розширити тип Window або ProcessEnv?

Accepted Answer

1) Створи d.ts файл у проекті. 2) declare global { interface Window { ... } }. 3) Для env: declare namespace NodeJS { interface ProcessEnv { ... } }. 4) Не забудь export {} у файлі. 5) Слідкуй, щоб include бачив цей файл.

Question 54

Що таке .d.ts файли і навіщо вони потрібні?

Accepted Answer

1) Це файли декларацій типів. 2) Потрібні для JS-бібліотек без типів. 3) Можуть описувати API без реалізації. 4) Використовуються DefinitelyTyped (@types/*). 5) Підключаються через types/include.

Question 55

Як додати типи для JS-бібліотеки без @types?

Accepted Answer

1) Спочатку перевір, чи немає вбудованих типів. 2) Якщо ні — створи мінімальний .d.ts з declare module 'lib'. 3) Постепенно уточнюй типи за мірою використання. 4) Можна написати wrapper API зі строгими типами. 5) Для складних випадків — генерація з OpenAPI/JSON schema.

Question 56

Що таке moduleResolution і коли його змінювати?

Accepted Answer

1) Визначає, як TS шукає модулі. 2) NodeNext потрібен для ESM/Node 16+. 3) Bundler підходить для Vite/webpack. 4) Classic майже не потрібен. 5) Вибір залежить від рантайму та збірщика.

Question 57

Як налаштувати алиаси шляхів (paths) у tsconfig?

Accepted Answer

1) Вкажи baseUrl. 2) Додай paths: { '@/*': ['src/*'] }. 3) Налаштуй збірщик (webpack/vite) аналогічно. 4) Налаштуй jest/vitest алиаси теж. 5) Інакше в runtime алиаси не працюватимуть.

Question 58

Чому TS проходить, а в runtime модуль не знаходиться?

Accepted Answer

1) TS перевіряє шляхи за tsconfig paths. 2) Але Node/бандлер може не знати про алиаси. 3) Потрібно налаштувати резолвер у збірщику/тестах. 4) Для Node можна використовувати tsconfig-paths. 5) Завжди перевіряй конфігурацію runtime.

Question 59

Що таке isolatedModules і коли він потрібен?

Accepted Answer

1) Потрібен для transpile через Babel/'один файл'. 2) Забороняє деякі конструкції (наприклад, const enum). 3) Допомагає сумісності зі збірщиками. 4) У Next.js зазвичай вмикають. 5) Краще тримати увімкненим у фронтенд-проектах.

Question 60

У чому різниця між tsc і babel/swc при збірці TS?

Accepted Answer

1) tsc виконує типову перевірку і може емитити JS. 2) Babel/SWC швидко транспілюють, але не перевіряють типи. 3) У таких схемах типчек запускають окремо (tsc --noEmit). 4) Next/Vite часто використовують SWC/Babel. 5) Перевірка типів потрібна в CI.

Question 61

Як увімкнути перевірку типів без генерації JS?

Accepted Answer

1) Запусти: tsc --noEmit. 2) Або постав noEmit: true в tsconfig. 3) Зручно для проектів, де збірку робить інший інструмент. 4) В CI роби окремий крок typecheck. 5) Помилки типів тоді не потраплять у прод.

Question 62

Що таке source maps і як вони допомагають?

Accepted Answer

1) Пов’язують скомпільований JS із вихідним TS. 2) Спрощують відладку в браузері і Node. 3) Вмикається sourceMap: true. 4) У проді іноді відключають через розмір і безпеку. 5) Для Sentry корисні.

Question 63

Як правильно типізувати конфіг-об’єкти?

Accepted Answer

1) Використовуй const + as const для літералів. 2) Для перевірки структури застосовуй satisfies. 3) Уникай any. 4) Зберігай конфіг у одному місці, не розмазуй. 5) Для env-змінних роби явне перетворення типів.

Question 64

Як типізувати process.env і позбавитись 'string | undefined'?

Accepted Answer

1) В runtime змінні можуть відсутні. 2) Спершу валідируй наявність (наприклад, через функцію requireEnv). 3) Після перевірки можна повернути string. 4) Краще робити єдиний шар конфігурації. 5) Для строгої схеми використовуй zod/valibot.

TypeScript