Перейти до вмісту

TypeScript

Матеріал з K2 ERP Wiki
Версія від 17:24, 6 травня 2026, створена R (обговорення | внесок) (Первинна публікація)
(різн.) ← Попередня версія | Поточна версія (різн.) | Новіша версія → (різн.)

id: number;

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

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

console.log(add("5", "7")); │ ├── routes/

</template> Причини:

type ButtonProps = {

return a + b;
totalAmount: number; let isActive: boolean = true;
Компонент

Історичний розвиток

id: number;
"typecheck": "tsc --noEmit"
customerId: number;
name: "Anna",

│ ├── controllers/

Як застосовується TypeScript

type UserRole = "admin" | "manager" | "user"; }; Generics дозволяють створювати універсальні типізовані функції, класи й компоненти.; |-

Go Go простий і продуктивний для backend; TypeScript зручний для full-stack web.; }

}

isActive: boolean;

Union type надає можливість значенню мати один із кількох типів.; !Для чого type CreateUserRequest = {

name: string;

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

Типи

onClick: () => void;
"dev": "tsx src/main.ts",

│ ├── models/

number: string;
);
Напрям
Якщо потрібно

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

Інструмент
return (

швидкого старту забезпечується через JavaScript дуже гнучкий.; |-

Full-stack типізація Типи можна використовувати і на frontend, і на backend.;
TypeScript дуже часто застосовується з React.; |-
|'''Краща супровід IDE'''
|Автодоповнення, підказки, навігація, refactoring.; console.log(add(5, 7));
TypeScript тісно повʼязаний із JavaScript.; response.json({ message: "Hello from TypeScript API" });
=== Масиви ===
};

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

id: number;

На backend TypeScript часто використовують із: <script setup lang="ts">

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

Generics

Чи підходить TypeScript?;
function printId(id: number | string): void {
}
export function Button({ title, onClick }: ButtonProps) {
|-
|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
|}

Вона особливо сильна там, де потрібні:
Для ERP, CRM і внутрішніх бізнес-застосунків TypeScript корисний через:
Вона надає можливість писати JavaScript-код із типами, знаходити частину помилок ще до запуску програми, зручніше працювати у великих проєктах і отримувати кращу підтримку редактора коду.; Він додає шар перевірки, який користувачі можуть знайти помилки раніше.'''</blockquote>
!Пояснення
JavaScript надає можливість це, але в реальному проєкті така поведінка має змогу стати джерелом помилок.; TypeScript створений компанією '''Microsoft''' і компілюється у звичайний JavaScript, який має змогу виконуватися в браузері, Node.js, Bun, Deno та інших JavaScript-середовищах.;<blockquote>'''TypeScript — це JavaScript із типами, який робить великі проєкти зрозумілішими, безпечнішими й легшими для підтримки.'''</blockquote>
!Причина
Файл shared/types/user.ts:

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

name: "Anna",

} const UserSchema = z.object({ const numbers: number [] = [1, 2, 3]; === Union types === └── types/ |- |'''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 |}

"scripts": {

!Рекомендація

== TypeScript у бізнесі ==

app.listen(3000, () => {

app.get("/", (request: Request, response: Response) => { === Type alias === const user: { name: string; age: number } = { !Приклади |- |'''Великі frontend-проєкти''' |React, Angular, Vue та інші фреймворки активно використовують TypeScript.; це мова програмування, яка розширює '''[[JavaScript]]''' статичною типізацією виступає ключовою рисою '''TypeScript'''.; |- |'''Краще масштабування''' |Підходить для великих frontend і backend-проєктів.; !Що вивчати TypeScript став одним із головних стандартів сучасної web-розробки.; |- |'''Поріг входу вищий за JavaScript''' |Треба розуміти і JavaScript, і систему типів.; !Перевага

== Рекомендований шлях навчання TypeScript == const names: string [] = ["Anna", "Oleh", "Maria"];

email: "anna@example.com"

type User = {

email: string;
console.log(add(5, 7));
== TypeScript у ERP та корпоративних системах ==
const textValue = identity<string>("Hello");
!Тип

=== Interface ===
 name: string;
const status: Status = "published";

=== Обʼєкти ===
Помилка

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

{isActive ?; |}
id: number;

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

Optional properties

);

shared/ function greet(name: string): string {

};

Задача

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

frontend/ type UserCardProps = {

const numberValue = identity<number>(10); ├── tests/ } function add(a: number, b: number): number { 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

return (

JavaScript дає свободу.; |-

Краща супровід редакторів IDE краще підказує властивості, типи, помилки й варіанти refactoring.;
 email: string;
 name: string;
const app = express();

email: string;

{name}

│ ├── services/

const numbers: Array<number> = [1, 2, 3]; TypeScript надає можливість явно сказати:
!Параметр
|-
|'''[[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 і схеми
|}

type Status = "draft" | "published" | "archived";
 name: "Anna",
== TypeScript і Vue ==
};
|-
|'''[[tsc]]'''
|офіційно затверджений TypeScript compiler
|-
|'''[[ESLint]]'''
|Аналіз стилю й помилок коду
|-
|'''[[Prettier]]'''
|Форматування коду
|-
|'''[[Vite]]'''
|Швидкий frontend build tool
|-
|'''[[Webpack]]'''
|Bundler для складних frontend-проєктів
|-
|'''[[Vitest]]'''
|Тестування
|-
|'''[[Jest]]'''
|Unit-тестування
|-
|'''[[Playwright]]'''
|End-to-end тестування
|-
|'''[[tsx]]'''
|Запуск TypeScript-файлів без окремої компіляції в dev-середовищі
|}

!Пояснення
 "type": "module",
істотно розуміти:<blockquote>'''TypeScript перевіряє типи під час розробки, але не перевіряє інформаційні дані автономно під час виконання.'''</blockquote>Якщо інформаційні дані приходять з API, форми або файлу, їх треба перевіряти окремо.; date: string;
== Коротко ==
│ ├── dto/
<pre>
Тип описує, яке значення має змогу мати змінна, параметр або результат функції.; Приклад:<pre>

 "devDependencies": {
 "version": "1.0.0",

* складні форми;
* багато типів документів;
* ролі й права доступу;
* складні таблиці;
* API-контракти;
* інтеграції;
* велику кількість бізнес-правил;
* довгий життєвий цикл проєкту;
* роботу кількох команд.; |-
|'''Зрозуміліші API'''
|Типи показують, які інформаційні дані очікує функція або endpoint.; const user: User = {
|-
|'''Менше помилок'''
|Частину помилок видно ще до запуску.; TypeScript додає правила, які допомагають не загубитися в цій свободі.'''</blockquote>

Типова структура backend-проєкту:<pre>
 id: number;
let username: string = "Anna";
 title: string;
 {title}
== Головна ідея TypeScript ==
 name: z.string(),

== Для чого застосовується TypeScript ==
У JavaScript можна написати так:<pre>
Literal type надає можливість обмежити значення конкретними варіантами.; |}

</script>
backend/
== Джерела ==
{| class="wikitable"
|-
|Великий frontend
| style="background:#d4edda; color:#155724; font-weight:bold;" |Дуже добре
|-
|Enterprise web
| style="background:#d4edda; color:#155724; font-weight:bold;" |Дуже добре
|-
|Full-stack web
| style="background:#d4edda; color:#155724; font-weight:bold;" |Дуже добре
|-
|Node.js backend
| style="background:#d4edda; color:#155724; font-weight:bold;" |Добре
|-
|React / Angular / Vue проєкти
| style="background:#d4edda; color:#155724; font-weight:bold;" |Дуже добре
|-
|Маленький одноразовий скрипт
| style="background:#fff3cd; color:#856404; font-weight:bold;" |Можливо, але JavaScript має змогу бути швидшим
|-
|AI / Data Science
| style="background:#fff3cd; color:#856404; font-weight:bold;" |Не ключовий вибір
|-
|Low-level / drivers
| style="background:#f8d7da; color:#721c24; font-weight:bold;" |Не підходить
|}

У таких умовах виникла потреба в:
== переважні аспекти TypeScript ==

* CRM;
* ERP-інтерфейси;
* адмінпанелі;
* SaaS-платформи;
* кабінети клієнтів;
* dashboard;
* фінансові системи;
* e-commerce;
* інтеграційні API;
* внутрішні корпоративні застосунки.; |-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''TypeScript особливо корисний у великих проєктах'''
|Типи допомагають команді краще розуміти структуру коду.;<blockquote>'''TypeScript — це як креслення для JavaScript-проєкту: він показує, які інформаційні дані куди йдуть, що функція очікує, що повертає і де має змогу бути помилка.'''</blockquote>
|-
|'''Потрібне конфігурація'''
|Потрібен tsconfig, build step і tooling.; email: string;
 console.log("API is running on http://localhost:3000");
Приклад Zod:<pre>
type Invoice = {
== TypeScript у backend ==

TypeScript часто використовують з ORM та query builder.; Це добре; додатково реалізовано але у великих проєктах гнучкість має змогу перетворитися на проблему.; |-

Можна зловживати any - Краща документація коду - істотно TypeScript не гарантує відсутність усіх помилок - Зручність для команд - Не знати JavaScript - Зручність для команд Новому розробнику легше зрозуміти структуру проєкту.; Приклад:
|-
|'''Редактор'''
|VS Code
|-
|'''Runtime'''
|Node.js, Bun або Deno
|-
|'''Менеджер пакетів'''
|npm, pnpm або yarn
|-
|'''Компілятор'''
|TypeScript
|-
|'''Конфігурація'''
|tsconfig.json із <code>strict: true</code>
|-
|'''Форматування'''
|Prettier
|-
|'''Linting'''
|ESLint
|-
|'''Тестування'''
|Vitest або Jest
|-
|'''Контроль версій'''
|Git
|}

{| class="wikitable"
};
 <p>{email}</p>
interface Product {
 "typescript": "^5.9.0",
 name: string;
У першому випадку результат буде числом.;

return `Привіт, ${name}`; };

завдяки наявності

TypeScript не змінює природу JavaScript.; email: "anna@example.com"

name: string; └── user.ts

});

Популярні фреймворки TypeScript-екосистеми

Пояснення return a + b;

Висновок

Напрям

├── package.json

import { z } from "zod";
any Вимикає перевірку типів Краще уникати або використовувати тимчасово
unknown Безпечніша альтернатива any Коли тип невідомий і його треба перевірити
never Значення, яке ніколи не має зʼявитися Для неможливих станів або функцій, які не повертаються

"name": "typescript-app", defineProps<Props>();

Пояснення

}

Недоліки TypeScript

} <template> Популярні бібліотеки:

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

Приклад Express API:
type Props = {
function identity<T>(value: T): T {
{| class="wikitable"
== TypeScript і бази даних ==
== TypeScript і React ==

function add(a, b) {
!Теза
{| class="wikitable"

 },

 }
 id: number;
Цей тип можна використати і на клієнті, і на сервері.; |-
Компіляція займає час - Типи можуть бути складними Generics, conditional types і utility types можуть ускладнювати код.; "Активний" : "Неактивний"}

"tsx": "^4.0.0"

Так легше контролювати, які інформаційні дані frontend відправляє на backend і що backend повертає.;== TypeScript і JavaScript ==

TypeScript і Angular

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

!Мова
!Пояснення
Необовʼязкові властивості позначаються знаком <code>?; {| class="wikitable"

type CreateUserResponse = {
 console.log(`ID: ${id}`);
});
export function UserCard({ name, email, isActive }: UserCardProps) {
 email: string;
== Важливі акценти ==
<pre>
import express, { Request, Response } from "express";
// console.log(add("5", "7")); // TypeScript покаже помилку
Він активно застосовують, коли потрібно у frontend, backend, full-stack і enterprise-проєктах.; |-
|'''Менше випадкових помилок'''
|Частину проблем видно ще до запуску.; const user = UserSchema.parse({
=== any, unknown і never ===

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

Type alias надає можливість створювати власні типи.; |-

AI та agentic coding - Думати, що TypeScript перевіряє все в runtime - Увага Погані типи можуть створити ілюзію безпеки Якщо всюди використовувати any, користь TypeScript різко зменшується.; let age: number = 17;

}

Значення

name: string;

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

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

title: string; TypeScript часто обирають у великих командах, де важливі супровід коду, зрозумілі API-контракти, безпечний refactoring і довгий життєвий цикл продукту.; |-

Не вмикати strict mode } як ілюстрація:
function handleValue(value: unknown): void {
!Для чого застосовується
JavaScript надає можливість оперативно писати код.; |-
|'''Kotlin'''
|Kotlin сильний для Android і JVM; TypeScript — для web.; |-
|'''Java'''
|Java суворіша й традиційна для enterprise; TypeScript гнучкіший у web-екосистемі.; У другому — рядком.; |-
|'''Документація через типи'''
|Типи частково пояснюють код самі.; |-
|'''Не перевіряє runtime-дані'''
|інформаційні дані з API треба перевіряти окремо.; '''TypeScript''' — одна з найважливіших мов сучасної web-розробки.; });
== Приклад backend API на TypeScript ==

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

JavaScript став мовою не тільки для невеликих скриптів у браузері, а й для великих frontend-застосунків, backend-сервісів, SPA, корпоративних систем і full-stack-проєктів.;
Приклад <code>unknown</code>:<pre>
});
 createdAt: string;

 email: z.string().email()
Одна з найсильніших ідей TypeScript — спільні типи між frontend і backend.; |-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''TypeScript компілюється у JavaScript'''
|Браузери напряму виконують JavaScript, з цієї причини TypeScript потрібно транслювати.;

Приклад package.json

Vue додатково підтримує роботу TypeScript.;
api/
Angular із самого початку активно використовує TypeScript.; !Як правильно
Альтернативний запис:

name: string; }; |- |'''Простий 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 |}

== Типові помилки новачків == ├── tsconfig.json !Порівняння з TypeScript !Статус |- |'''JavaScript''' |TypeScript додає типи й краще підходить для великих проєктів.; !Недолік

};

 </button>
 status: "draft" | "posted" | "cancelled";
TypeScript особливо корисний для опису API-контрактів.; Типи допомагають описувати:<pre>

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

* статичній перевірці типів;
* кращій підтримці IDE;
* безпечнішому refactoring;
* зрозумілішій структурі даних;
* зменшенні випадкових помилок;
* підтримці великих команд.; |-
|'''Сумісність із JavaScript'''
|TypeScript-компілятор генерує JavaScript.; |-
|'''Описувати занадто складні типи без потреби'''
|Типи мають допомагати, а не перетворюватися на головоломку.; └── README.md
 description?: string;

{

};

id: 1,
  • великі frontend-застосунки;
  • full-stack web;
  • командна розробка програмного забезпечення;
  • надійні API-контракти;
  • довгострокова супровід коду;
  • enterprise-проєкти;
  • React, Angular, Vue, Next.js, NestJS;
  • кращі інструменти й менше випадкових помилок.; |-
C# C# сильний у .NET; TypeScript сильний у frontend і full-stack JavaScript.;

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

};

Коли використовувати
role: UserRole;
Інструмент

TypeScript і runtime validation

├── src/

Інструмент Етап
return value;

interface User { }

  • Node.js;
  • NestJS;
  • Express;
  • Fastify;
  • Prisma;
  • TypeORM;
  • tRPC;
  • GraphQL;
  • Zod;
  • PostgreSQL;
  • Redis.;
Ключове TypeScript — це не заміна JavaScript, а його розширення Увесь коректний JavaScript має змогу бути частиною TypeScript-проєкту, але TypeScript додає типи.; TypeScript сприяє не загубитися, коли коду стає багато.;<button onClick={onClick}> │ └── main.ts } Для чого застосовується TypeScript часто використовують у бізнес-системах: TypeScript Interface описує форму обʼєкта.;== TypeScript і tooling == TypeScript не замінює JavaScript, а робить його більш контрольованим і придатним для великих систем.; |}

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

JavaScript export type User = {
Використовувати any всюди - Python - Ключове TypeScript покращує роботу IDE Автодоповнення, refactoring, підказки й навігація стають значно кращими.;== Популярність 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/