TypeScript

TypeScript — це мова програмування, яка розширює JavaScript статичною типізацією. Вона дозволяє писати JavaScript-код із типами, знаходити частину помилок ще до запуску програми, зручніше працювати у великих проєктах і отримувати кращу підтримку редактора коду.

TypeScript створений компанією Microsoft і компілюється у звичайний JavaScript, який може виконуватися в браузері, Node.js, Bun, Deno та інших JavaScript-середовищах.

TypeScript — це JavaScript із типами, який робить великі проєкти зрозумілішими, безпечнішими й легшими для підтримки.

Коротко

Параметр	Значення
Назва	TypeScript
Тип	Статично типізована надмножина JavaScript
Розробник	Microsoft
Перший публічний реліз	2012 рік
Основна ідея	Додати до JavaScript систему типів і кращі інструменти для великих проєктів
Компілюється у	JavaScript
Основні сфери	Frontend, backend, full-stack, enterprise web, Node.js, React, Angular, Vue, NestJS
Складність для новачків	Середня
Офіційний сайт	https://www.typescriptlang.org/

Головна ідея TypeScript

JavaScript дуже гнучкий. Це добре для швидкого старту, але у великих проєктах гнучкість може перетворитися на проблему.

У JavaScript можна написати так:

function add(a, b) {
  return a + b;
}

console.log(add(5, 7));
console.log(add("5", "7"));

У першому випадку результат буде числом. У другому — рядком.

JavaScript дозволяє це, але в реальному проєкті така поведінка може стати джерелом помилок.

TypeScript дозволяє явно сказати:

function add(a: number, b: number): number {
  return a + b;
}

console.log(add(5, 7));
// console.log(add("5", "7")); // TypeScript покаже помилку

TypeScript не змінює природу JavaScript. Він додає шар перевірки, який допомагає знайти помилки раніше.

Важливі акценти

Статус	Теза	Пояснення
Ключове	TypeScript — це не заміна JavaScript, а його розширення	Увесь коректний JavaScript може бути частиною TypeScript-проєкту, але TypeScript додає типи.
Ключове	TypeScript компілюється у JavaScript	Браузери напряму виконують JavaScript, тому TypeScript потрібно транслювати.
Ключове	TypeScript особливо корисний у великих проєктах	Типи допомагають команді краще розуміти структуру коду.
Ключове	TypeScript покращує роботу IDE	Автодоповнення, refactoring, підказки й навігація стають значно кращими.
Важливо	TypeScript не гарантує відсутність усіх помилок	Він перевіряє типи, але не замінює тести, code review і правильну архітектуру.
Увага	Погані типи можуть створити ілюзію безпеки	Якщо всюди використовувати `any`, користь TypeScript різко зменшується.

Історія

TypeScript був створений у Microsoft як відповідь на проблему масштабування JavaScript у великих застосунках.

JavaScript став мовою не тільки для невеликих скриптів у браузері, а й для великих frontend-застосунків, backend-сервісів, SPA, корпоративних систем і full-stack-проєктів.

У таких умовах виникла потреба в:

статичній перевірці типів;
кращій підтримці IDE;
безпечнішому refactoring;
зрозумілішій структурі даних;
зменшенні випадкових помилок;
підтримці великих команд.

TypeScript і JavaScript

TypeScript тісно повʼязаний із JavaScript.

JavaScript	TypeScript
Динамічна типізація	Статична типізація поверх JavaScript
Код виконується напряму в браузері або runtime	Код компілюється у JavaScript
Швидший старт	Кращий контроль у великих проєктах
Менше налаштувань	Потрібен компілятор або build process
Помилки типів часто видно під час виконання	Багато помилок видно ще до запуску

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

Для чого використовується TypeScript

Напрям	Як використовується TypeScript	Приклади
Frontend	Створення великих web-інтерфейсів	React, Angular, Vue, Svelte
Backend	Серверні API, бізнес-логіка, мікросервіси	Node.js, NestJS, Fastify, Express
Full-stack	Один типізований стек для клієнта й сервера	Next.js, Nuxt, Remix, SvelteKit
Enterprise web	Великі корпоративні системи з багатьма командами	CRM, ERP, адмінпанелі, кабінети користувачів
Mobile	Кросплатформні застосунки	React Native, Expo, Ionic
Desktop	Desktop-застосунки на web-технологіях	Electron, Tauri
API-контракти	Типізація запитів, відповідей, DTO, моделей	OpenAPI, tRPC, GraphQL
Бібліотеки	Створення npm-пакетів із типами	UI kits, SDK, internal libraries

Чому TypeScript став популярним

Причина	Пояснення
Великі frontend-проєкти	React, Angular, Vue та інші фреймворки активно використовують TypeScript.
Краща підтримка редакторів	IDE краще підказує властивості, типи, помилки й варіанти refactoring.
Менше випадкових помилок	Частину проблем видно ще до запуску.
Краща документація коду	Типи показують, які дані очікує функція або компонент.
Зручність для команд	Новому розробнику легше зрозуміти структуру проєкту.
Full-stack типізація	Типи можна використовувати і на frontend, і на backend.
AI та agentic coding	Типізований код легше аналізувати інструментам і AI-асистентам.

Основні поняття TypeScript

Типи

Тип описує, яке значення може мати змінна, параметр або результат функції.

let username: string = "Anna";
let age: number = 17;
let isActive: boolean = true;

Типи параметрів і результату функції

function greet(name: string): string {
  return `Привіт, ${name}`;
}

Масиви

const numbers: number[] = [1, 2, 3];
const names: string[] = ["Anna", "Oleh", "Maria"];

Альтернативний запис:

const numbers: Array<number> = [1, 2, 3];

Обʼєкти

const user: { name: string; age: number } = {
  name: "Anna",
  age: 17
};

Interface

Interface описує форму обʼєкта.

interface User {
  id: number;
  name: string;
  email: string;
}

const user: User = {
  id: 1,
  name: "Anna",
  email: "anna@example.com"
};

Type alias

Type alias дозволяє створювати власні типи.

type UserRole = "admin" | "manager" | "user";

type User = {
  id: number;
  name: string;
  role: UserRole;
};

Union types

Union type дозволяє значенню мати один із кількох типів.

function printId(id: number | string): void {
  console.log(`ID: ${id}`);
}

Literal types

Literal type дозволяє обмежити значення конкретними варіантами.

type Status = "draft" | "published" | "archived";

const status: Status = "published";

Optional properties

Необовʼязкові властивості позначаються знаком ?.

interface Product {
  id: number;
  name: string;
  description?: string;
}

Generics

Generics дозволяють створювати універсальні типізовані функції, класи й компоненти.

function identity<T>(value: T): T {
  return value;
}

const numberValue = identity<number>(10);
const textValue = identity<string>("Hello");

any, unknown і never

Тип	Пояснення	Коли використовувати
any	Вимикає перевірку типів	Краще уникати або використовувати тимчасово
unknown	Безпечніша альтернатива `any`	Коли тип невідомий і його треба перевірити
never	Значення, яке ніколи не має зʼявитися	Для неможливих станів або функцій, які не повертаються

Приклад unknown:

function handleValue(value: unknown): void {
  if (typeof value === "string") {
    console.log(value.toUpperCase());
  }
}

TypeScript compiler

TypeScript використовує компілятор tsc, який перевіряє типи й перетворює TypeScript у JavaScript.

Встановлення TypeScript:

npm install typescript --save-dev

Перевірка версії:

npx tsc --version

Компіляція файлу:

npx tsc index.ts

tsconfig.json

tsconfig.json — головний конфігураційний файл TypeScript-проєкту.

Створення:

npx tsc --init

Приклад базового конфігу:

{

 "compilerOptions": {
   "target": "ES2022",
   "module": "ESNext",
   "strict": true,
   "moduleResolution": "Bundler",
   "skipLibCheck": true
 },
 "include": ["src"]

}

Strict mode

У TypeScript важливо вмикати строгий режим.

{
  "compilerOptions": {
    "strict": true
  }
}

TypeScript без strict mode — це TypeScript із напіввимкненими гальмами.

Приклад frontend-компонента на TypeScript

Приклад React-компонента:

type ButtonProps = {
  title: string;
  onClick: () => void;
};

export function Button({ title, onClick }: ButtonProps) {
  return (
    <button onClick={onClick}>
      {title}
    </button>
  );
}

Приклад backend API на TypeScript

Приклад Express API:

import express, { Request, Response } from "express";

const app = express();

app.get("/", (request: Request, response: Response) => {
  response.json({ message: "Hello from TypeScript API" });
});

app.listen(3000, () => {
  console.log("API is running on http://localhost:3000");
});

TypeScript і React

TypeScript дуже часто використовується з React.

Причини:

типізація props;
типізація state;
кращі підказки в IDE;
легший refactoring;
зменшення помилок у компонентах;
зручність для design systems.

Приклад:

type UserCardProps = {
  name: string;
  email: string;
  isActive: boolean;
};

export function UserCard({ name, email, isActive }: UserCardProps) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
      <span>{isActive ? "Активний" : "Неактивний"}</span>
    </div>
  );
}

TypeScript і Angular

Angular із самого початку активно використовує TypeScript.

Для Angular TypeScript важливий через:

класи;
decorators;
dependency injection;
компоненти;
сервіси;
типізовані форми;
enterprise-структуру проєкту.

TypeScript і Vue

Vue також підтримує TypeScript.

Приклад Vue component із script setup:

<script setup lang="ts">
type Props = {
  title: string;
};

defineProps<Props>();
</script>

<template>
  <h1>{{ title }}</h1>
</template>

TypeScript у backend

На backend TypeScript часто використовують із:

Node.js;
NestJS;
Express;
Fastify;
Prisma;
TypeORM;
tRPC;
GraphQL;
Zod;
PostgreSQL;
Redis.

Типова структура backend-проєкту:

api/
├── src/
│   ├── controllers/
│   ├── services/
│   ├── routes/
│   ├── models/
│   ├── dto/
│   └── main.ts
├── tests/
├── package.json
├── tsconfig.json
└── README.md

TypeScript і API-контракти

TypeScript особливо корисний для опису API-контрактів.

Наприклад:

type CreateUserRequest = {
  name: string;
  email: string;
};

type CreateUserResponse = {
  id: number;
  name: string;
  email: string;
  createdAt: string;
};

Так легше контролювати, які дані frontend відправляє на backend і що backend повертає.

TypeScript і runtime validation

Важливо розуміти:

TypeScript перевіряє типи під час розробки, але не перевіряє дані автоматично під час виконання.

Якщо дані приходять з API, форми або файлу, їх треба перевіряти окремо.

Популярні бібліотеки:

Zod
Yup
Valibot
io-ts

Приклад Zod:

import { z } from "zod";

const UserSchema = z.object({
  name: z.string(),
  email: z.string().email()
});

const user = UserSchema.parse({
  name: "Anna",
  email: "anna@example.com"
});

TypeScript і бази даних

TypeScript часто використовують з ORM та query builder.

Інструмент	Для чого використовується
Prisma	Type-safe ORM для Node.js і TypeScript
TypeORM	ORM для TypeScript і JavaScript
Drizzle ORM	Type-safe SQL ORM
Kysely	Type-safe SQL query builder
MikroORM	ORM для TypeScript

TypeScript і full-stack типізація

Одна з найсильніших ідей TypeScript — спільні типи між frontend і backend.

Приклад:

shared/
└── types/
    └── user.ts

frontend/
backend/

Файл shared/types/user.ts:

export type User = {

 id: number;
 name: string;
 email: string;

};

Цей тип можна використати і на клієнті, і на сервері.

TypeScript і tooling

Інструмент	Для чого
tsc	Офіційний TypeScript compiler
ESLint	Аналіз стилю й помилок коду
Prettier	Форматування коду
Vite	Швидкий frontend build tool
Webpack	Bundler для складних frontend-проєктів
Vitest	Тестування
Jest	Unit-тестування
Playwright	End-to-end тестування
tsx	Запуск TypeScript-файлів без окремої компіляції в dev-середовищі

Переваги TypeScript

Перевага	Пояснення
Менше помилок	Частину помилок видно ще до запуску.
Краща підтримка IDE	Автодоповнення, підказки, навігація, refactoring.
Зрозуміліші API	Типи показують, які дані очікує функція або endpoint.
Зручність для команд	Новим розробникам легше читати великий код.
Краще масштабування	Підходить для великих frontend і backend-проєктів.
Документація через типи	Типи частково пояснюють код самі.
Сумісність із JavaScript	TypeScript-компілятор генерує JavaScript.

Недоліки TypeScript

Недолік	Пояснення
Потрібне налаштування	Потрібен tsconfig, build step і tooling.
Поріг входу вищий за JavaScript	Треба розуміти і JavaScript, і систему типів.
Типи можуть бути складними	Generics, conditional types і utility types можуть ускладнювати код.
Не перевіряє runtime-дані	Дані з API треба перевіряти окремо.
Можна зловживати any	Якщо всюди писати `any`, користь типізації зникає.
Компіляція займає час	У великих проєктах type checking може бути відчутним.

Типові помилки новачків

Помилка	Як правильно
Використовувати `any` всюди	Краще писати точні типи або використовувати `unknown`.
Думати, що TypeScript перевіряє все в runtime	Для зовнішніх даних потрібна runtime validation.
Не вмикати strict mode	Увімкнути `"strict": true`.
Описувати занадто складні типи без потреби	Типи мають допомагати, а не перетворюватися на головоломку.
Не знати JavaScript	TypeScript не замінює знання JavaScript.

Коли TypeScript — хороший вибір

Задача	Чи підходить TypeScript?
Великий frontend	Дуже добре
Enterprise web	Дуже добре
Full-stack web	Дуже добре
Node.js backend	Добре
React / Angular / Vue проєкти	Дуже добре
Маленький одноразовий скрипт	Можливо, але JavaScript може бути швидшим
AI / Data Science	Не основний вибір
Low-level / drivers	Не підходить

TypeScript у бізнесі

TypeScript часто використовують у бізнес-системах:

CRM;
ERP-інтерфейси;
адмінпанелі;
SaaS-платформи;
кабінети клієнтів;
dashboard;
фінансові системи;
e-commerce;
інтеграційні API;
внутрішні корпоративні застосунки.

У бізнесі TypeScript цінний тим, що зменшує хаос у великих JavaScript-проєктах.

TypeScript у ERP та корпоративних системах

Для ERP, CRM і внутрішніх бізнес-застосунків TypeScript корисний через:

складні форми;
багато типів документів;
ролі й права доступу;
складні таблиці;
API-контракти;
інтеграції;
велику кількість бізнес-правил;
довгий життєвий цикл проєкту;
роботу кількох команд.

Типи допомагають описувати:

type Invoice = {
  id: number;
  number: string;
  date: string;
  customerId: number;
  totalAmount: number;
  status: "draft" | "posted" | "cancelled";
};

Альтернативи TypeScript

Якщо потрібно	Альтернативи
Простий frontend без типів	JavaScript
Backend enterprise	Java, C#, Go
AI / Data Science	Python, R, Julia
Mobile Android	Kotlin
Mobile iOS	Swift
High-performance backend	Go, Rust
Системне програмування	C, C++, Rust, Zig

TypeScript у порівнянні з іншими мовами

Мова	Порівняння з TypeScript
JavaScript	TypeScript додає типи й краще підходить для великих проєктів.
Python	Python сильніший в AI й data science; TypeScript сильніший у web і frontend.
Java	Java суворіша й традиційна для enterprise; TypeScript гнучкіший у web-екосистемі.
C#	C# сильний у .NET; TypeScript сильний у frontend і full-stack JavaScript.
Go	Go простий і продуктивний для backend; TypeScript зручний для full-stack web.
Kotlin	Kotlin сильний для Android і JVM; TypeScript — для web.

Мінімальний набір для першого TypeScript-проєкту

Компонент	Рекомендація
Редактор	VS Code
Runtime	Node.js, Bun або Deno
Менеджер пакетів	npm, pnpm або yarn
Компілятор	TypeScript
Конфігурація	tsconfig.json із `strict: true`
Форматування	Prettier
Linting	ESLint
Тестування	Vitest або Jest
Контроль версій	Git

Приклад package.json

{
  "name": "typescript-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "tsx src/main.ts",
    "build": "tsc",
    "typecheck": "tsc --noEmit"
  },
  "devDependencies": {
    "typescript": "^5.9.0",
    "tsx": "^4.0.0"
  }
}

Простими словами

JavaScript дозволяє швидко писати код. TypeScript допомагає не загубитися, коли коду стає багато.

TypeScript — це як креслення для JavaScript-проєкту: він показує, які дані куди йдуть, що функція очікує, що повертає і де може бути помилка.

Висновок

TypeScript — одна з найважливіших мов сучасної web-розробки.

Вона особливо сильна там, де потрібні:

великі frontend-застосунки;
full-stack web;
командна розробка;
надійні API-контракти;
довгострокова підтримка коду;
enterprise-проєкти;
React, Angular, Vue, Next.js, NestJS;
кращі інструменти й менше випадкових помилок.

TypeScript не замінює JavaScript, а робить його більш контрольованим і придатним для великих систем.

Якщо JavaScript — це мова вебу, то TypeScript — це спосіб будувати великий веб без хаосу.

Джерела

Офіційний сайт TypeScript: https://www.typescriptlang.org/
TypeScript Handbook: https://www.typescriptlang.org/docs/handbook/intro.html
TypeScript Documentation: https://www.typescriptlang.org/docs/
Stack Overflow Developer Survey: https://survey.stackoverflow.co/
GitHub Octoverse: https://octoverse.github.com/

Інструмент	Напрям	Для чого використовується
React	Frontend	UI-компоненти й SPA
Angular	Frontend	Enterprise frontend
Vue.js	Frontend	Гнучкі web-інтерфейси
Next.js	Full-stack	React full-stack, SSR, SSG
Nuxt	Full-stack	Vue full-stack
SvelteKit	Full-stack	Full-stack застосунки на Svelte
NestJS	Backend	Структурований Node.js backend
Express.js	Backend	Простий backend на Node.js
Fastify	Backend	Швидкі API
tRPC	Full-stack API	End-to-end type-safe API
Prisma	Database	Type-safe ORM
Zod	Validation	Runtime validation і схеми

Етап	Що вивчати
1	Основи JavaScript: змінні, функції, обʼєкти, масиви
2	ES Modules, npm, package.json
3	Базові типи TypeScript: string, number, boolean, arrays
4	type, interface, optional properties
5	Union types, literal types, narrowing
6	Generics
7	tsconfig.json і strict mode
8	TypeScript із React, Vue або Angular
9	TypeScript на backend: Node.js, NestJS або Express
10	Runtime validation: Zod або Valibot
11	Тестування, ESLint, Prettier, CI