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

TypeScript

Матеріал з K2 ERP Wiki

});

TypeScript у backend

return a + b;

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

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

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

totalAmount: number;

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

  • статичній перевірці типів;
  • кращій підтримці IDE;
  • безпечнішому refactoring;
  • зрозумілішій структурі даних;
  • зменшенні випадкових помилок;
  • підтримці великих команд. TypeScript оптимізує не загубитися, коли коду стає багато. TypeScript часто використовують у бізнес-системах:

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

через

TypeScript не змінює природу JavaScript. TypeScript — одна з найважливіших мов сучасної web-розробки. Необовʼязкові властивості позначаються знаком ?== Простими словами ==

JavaScript дає можливість це, але в реальному проєкті така поведінка здатна стати джерелом помилок. |- |Python |Python сильніший в AI й data science; TypeScript сильніший у web і frontend. |- |Kotlin |Kotlin сильний для Android і JVM; TypeScript — для web.=== Optional properties === }, !Пояснення !Альтернативи

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

 </button>
 name: "Anna",
JavaScript став мовою не тільки для невеликих скриптів у браузері, а й для великих frontend-застосунків, backend-сервісів, SPA, корпоративних систем і full-stack-проєктів. |-
|'''Не перевіряє runtime-дані'''
|інформаційні дані з API треба перевіряти окремо. |-
|'''Документація через типи'''
|Типи частково пояснюють код самі. JavaScript дає можливість оперативно писати код. Це добре; так само реалізовано але у великих проєктах гнучкість здатна перетворитися на проблему. |-
|'''Full-stack типізація'''
|Типи можна використовувати і на frontend, і на backend.=== Interface ===
TypeScript став одним із головних стандартів сучасної web-розробки. |-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''TypeScript особливо корисний у великих проєктах'''
|Типи допомагають команді краще розуміти структуру коду. |-
|'''Краща технічна підтримка редакторів'''
|IDE краще підказує властивості, типи, помилки й варіанти refactoring. '''TypeScript''' — це мова програмування, яка розширює '''[[JavaScript]]''' статичною типізацією. |-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''TypeScript покращує роботу IDE'''
|Автодоповнення, refactoring, підказки й навігація стають значно кращими. |-
|'''Описувати занадто складні типи без потреби'''
|Типи мають допомагати, а не перетворюватися на головоломку. |-
|'''Типи можуть бути складними'''
|Generics, conditional types і utility types можуть ускладнювати код.<pre>
type UserCardProps = {
|-
|'''[[tsc]]'''
|офіційний TypeScript compiler
|-
|'''[[ESLint]]'''
|Аналіз стилю й помилок коду
|-
|'''[[Prettier]]'''
|Форматування коду
|-
|'''[[Vite]]'''
|Швидкий frontend build tool
|-
|'''[[Webpack]]'''
|Bundler для складних frontend-проєктів
|-
|'''[[Vitest]]'''
|Тестування
|-
|'''[[Jest]]'''
|Unit-тестування
|-
|'''[[Playwright]]'''
|End-to-end тестування
|-
|'''[[tsx]]'''
|Запуск TypeScript-файлів без окремої компіляції в dev-середовищі
|}

);

Менше помилок Частину помилок видно ще до запуску.
 return `Привіт, ${name}`;
interface User {

<pre>
Цей тип можна використати і на клієнті, і на сервері. Типова структура backend-проєкту:
│ ├── controllers/
 console.log("API is running on http://localhost:3000");
};
Приклад <code>unknown</code>:<pre>
|-
|Динамічна типізація
|Статична типізація поверх JavaScript
|-
|Код виконується напряму в браузері або runtime
|Код компілюється у JavaScript
|-
|Швидший старт
|Кращий контроль у великих проєктах
|-
|Менше налаштувань
|Потрібен компілятор або build process
|-
|Помилки типів часто видно під час виконання
|Багато помилок видно ще до запуску
|}
=== Generics ===

!Параметр
Причини:
швидкого старту забезпечується через JavaScript дуже гнучкий. |-
|'''Краща технічна підтримка IDE'''
|Автодоповнення, підказки, навігація, refactoring. |-
|'''[[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
|}

{| class="wikitable"

return a + b; id: number;

Пояснення

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

console.log(add("5", "7")); } name: "Anna",

Як застосовується для TypeScript Для чого застосовується для

function add(a, b) {

TypeScript і runtime validation

name: string;

TypeScript часто обирають у великих командах, де важливі технічна підтримка коду, зрозумілі API-контракти, безпечний refactoring і довгий життєвий цикл продукту. export type User = {

Недолік

<template>

TypeScript і tooling

</template>
Приклади

let isActive: boolean = true;

{email}

backend/ type User = {

Шаблон:Title

Приклад package.json

}

description?: string;

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

type CreateUserResponse = { return ( type Invoice = { name: string; age: 17

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

number: string; email: z.string().email()

Як правильно У JavaScript можна написати так:
├── tsconfig.json

TypeScript не замінює JavaScript, а робить його більш контрольованим і придатним для великих систем. type Status = "draft" | "published" | "archived";

  • CRM;
  • ERP-інтерфейси;
  • адмінпанелі;
  • SaaS-платформи;
  • кабінети клієнтів;
  • dashboard;
  • фінансові системи;
  • e-commerce;
  • інтеграційні API;
  • внутрішні корпоративні застосунки. |-
 Думати, що TypeScript перевіряє все в runtime "posted" | "cancelled";

id: number; role: UserRole;

TypeScript і Vue

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

const UserSchema = z.object({ name: "Anna", Union type дає можливість значенню мати один із кількох типів. |-

AI та agentic coding Типізований код легше аналізувати інструментам і AI-асистентам. name: string;

TypeScript і JavaScript

TypeScript і Angular

name: string; TypeScript створений компанією Microsoft і компілюється у звичайний JavaScript. |-

Менше випадкових помилок Частину проблем видно ще до запуску. Він додає шар перевірки, який користувачі можуть знайти помилки раніше.
  • складні форми;
  • багато типів документів;
  • ролі й права доступу;
  • складні таблиці;
  • API-контракти;
  • інтеграції;
  • велику кількість бізнес-правил;
  • довгий життєвий цикл проєкту;
  • роботу кількох команд.

Для ERP, CRM і внутрішніх бізнес-застосунків TypeScript корисний через:
└── types/
}
== Рекомендований шлях навчання TypeScript ==
 email: string;
├── src/
== Мінімальний набір для першого TypeScript-проєкту ==
як приклад:<pre>
│ ├── routes/

!Що вивчати
 title: string;
== TypeScript і full-stack типізація ==
!Інструмент
|-
|'''Простий 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
|}

!Значення
== Джерела ==
const user: User = {
}
|-
|'''JavaScript'''
|TypeScript додає типи й краще підходить для великих проєктів. !Пояснення
});



app.get("/", (request: Request, response: Response) => {
{



Мова

const textValue = identity<string>("Hello");
function greet(name: string): string {
Популярні бібліотеки:
shared/

function handleValue(value: unknown): void {



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


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


"type": "module",



На backend TypeScript часто використовують із:
Одна з найсильніших ідей TypeScript — спільні типи між frontend і backend. |-



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 і схеми



let username: string = "Anna";
│ ├── services/


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



const numberValue = identity<number>(10);


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

const status: Status = "published";






any

Вимикає перевірку типів

Краще уникати або використовувати тимчасово




unknown

Безпечніша альтернатива any

Коли тип невідомий і його треба перевірити




never

Значення, яке ніколи не має зʼявитися

Для неможливих станів або функцій, які не повертаються



Обʼєкти


Пояснення

 );

TypeScript і React




}




 

Помилка

Компонент

};



TypeScript

 email: "anna@example.com"
 "build": "tsc",
};

 createdAt: string;
 title: string;
}




};
}

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




Сумісність із JavaScript

TypeScript-компілятор генерує JavaScript.
TypeScript особливо корисний для опису API-контрактів. |-
|'''C#'''
|C# сильний у .NET; TypeScript сильний у frontend і full-stack JavaScript.</code>. |-
|'''Поріг входу вищий за JavaScript'''
|Треба розуміти і JavaScript, і систему типів. |-
|'''Не знати JavaScript'''
|TypeScript не замінює знання JavaScript.<pre>

defineProps<Props>();
== Коли TypeScript — хороший вибір ==
const app = express();
 id: number;

{| class="wikitable"
 <button onClick={onClick}>
 email: string;

{| class="wikitable"

!Етап
!Рекомендація
Для Angular TypeScript важливий через:
== TypeScript у порівнянні з іншими мовами ==

};
type Props = {
== TypeScript і бази даних ==

 customerId: number;
Приклад:<pre>
// console.log(add("5", "7")); // TypeScript покаже помилку
 "typecheck": "tsc --noEmit"
!JavaScript
|-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''TypeScript — це не заміна JavaScript, а його розширення'''
|Увесь коректний JavaScript здатна бути частиною TypeScript-проєкту, але TypeScript додає типи. email: string;
Тип описує, яке значення здатна мати змінна, параметр або результат функції.== Популярність TypeScript ==

 return (
function add(a: number, b: number): number {
type ButtonProps = {

 }






Задача

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

Interface описує форму обʼєкта.
!Теза
 id: 1,
};

Приклад React-компонента:<pre>
== Важливі акценти ==

У першому випадку результат буде числом.== Висновок ==

Інструмент

response.json({ message: "Hello from TypeScript API" });



Для чого застосовується для

 return value;




-

Можна зловживати any

-

Не вмикати strict mode

}

Коли використовувати
Типи допомагають описувати:
 └── user.ts
 "version": "1.0.0",
function identity<T>(value: T): T {
== Коротко ==
};

== TypeScript у бізнесі ==
== конкурентні переваги TypeScript ==
== Для чого застосовується для TypeScript ==
export function UserCard({ name, email, isActive }: UserCardProps) {
const user = UserSchema.parse({
TypeScript дуже часто застосовується для з React. |}

 isActive: boolean;
const user: { name: string; age: number } = {
== Головна ідея TypeScript ==
=== Literal types ===
|-
|Великий 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;" |Не підходить
|}

критично розуміти:<blockquote>'''TypeScript перевіряє типи під час розробки, але не перевіряє інформаційні дані автоматизовано під час виконання.'''</blockquote>Якщо інформаційні дані приходять з API, форми або файлу, їх треба перевіряти окремо. |-
|'''Зручність для команд'''
|Новим розробникам легше читати великий код.<blockquote>'''TypeScript — це JavaScript із типами, який робить великі проєкти зрозумілішими, безпечнішими й легшими для підтримки.'''</blockquote>

}
=== Type alias ===

import { z } from "zod";
TypeScript був створений у Microsoft як відповідь на проблему масштабування JavaScript у великих застосунках.<pre>
!Статус
|-
|'''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
|}

 id: number;
{| class="wikitable"

app.listen(3000, () => {

 "name": "typescript-app",

const names: string [] = ["Anna", "Oleh", "Maria"];
{| class="wikitable sortable"
│ ├── dto/
let age: number = 17;
|-
|'''Великі frontend-проєкти'''
|React, Angular, Vue та інші фреймворки активно використовують TypeScript.<blockquote>'''Якщо JavaScript — це мова вебу, то TypeScript — це спосіб будувати великий веб без хаосу.'''</blockquote>
!Перевага
 <span>{isActive ?<pre>

});



</script>


Вона дає можливість писати JavaScript-код із типами, знаходити частину помилок ще до запуску програми, зручніше працювати у великих проєктах і отримувати кращу підтримку редактора коду. Приклад Express API:
Приклад Vue component із <code>script setup</code>:<pre>

└── README.md
!Для чого

 console.log(`ID: ${id}`);

* великі frontend-застосунки;
* full-stack web;
* командна розробка програмного забезпечення;
* надійні API-контракти;
* довгострокова технічна підтримка коду;
* enterprise-проєкти;
* React, Angular, Vue, Next.js, NestJS;
* кращі інструменти й менше випадкових помилок. |-
|'''Зрозуміліші API'''
|Типи показують, які інформаційні дані очікує функція або endpoint. "Активний" : "Неактивний"}</span>
Vue так само підтримує TypeScript. |}

!Пояснення



Він активно застосовується для у frontend, backend, full-stack і enterprise-проєктах. |-



Краща документація коду

-

Краще масштабування

-

Java

}

});



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


export function Button({ title, onClick }: ButtonProps) {



date: string;






Потрібне конфігурація

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

name: string;




"dev": "tsx src/main.ts",


Файл shared/types/user.ts:
=== Типи ===

function printId(id: number | string): void {



  • типізація props;
    • 

  • типізація state;
    • 

  • кращі підказки в IDE;
    • 

  • легший refactoring;
    • 

  • зменшення помилок у компонентах;
    • 

  • зручність для design systems. |-


|'''Go'''
|Go простий і продуктивний для backend; TypeScript зручний для full-stack web. У другому — рядком. |-
|'''Зручність для команд'''
|Новому розробнику легше зрозуміти структуру проєкту. Особливо оперативно TypeScript поширився в екосистемах React, Angular, Vue, Next.js, NestJS та Node.js. Окремо варто відзначити який здатна виконуватися в браузері, Node.js, Bun, Deno і інших JavaScript-середовищах. |-
| style="background:#fff3cd; color:#856404; font-weight:bold;" |критично
|'''TypeScript не гарантує відсутність усіх помилок'''
|Він перевіряє типи, але не замінює тести, code review і правильну архітектуру. |}



{title}



!Порівняння з TypeScript
console.log(add(5, 7));
const numbers: Array<number> = [1, 2, 3];
|-
|'''Використовувати <code>any</code> всюди'''
|Краще писати точні типи або використовувати <code>unknown</code>. };



"typescript": "^5.9.0",





any, unknown і never


email: "anna@example.com"




Недоліки TypeScript

Приклад:
 email: string;

=== Масиви ===
Вона особливо сильна там, де потрібні:
{| class="wikitable"
!Тип

 name: z.string(),
 "devDependencies": {

* Node.js;
* NestJS;
* Express;
* Fastify;
* Prisma;
* TypeORM;
* tRPC;
* GraphQL;
* Zod;
* PostgreSQL;
* Redis. |-
| style="background:#d4edda; color:#155724; font-weight:bold;" |Ключове
|'''TypeScript компілюється у JavaScript'''
|Браузери напряму виконують JavaScript, тому TypeScript потрібно транслювати. !Якщо потрібно

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

Компіляція займає час

У великих проєктах type checking здатна бути відчутним. const numbers: number [] = [1, 2, 3];

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



Увага

Погані типи можуть створити ілюзію безпеки

Якщо всюди використовувати any, користь TypeScript різко зменшується.== TypeScript і API-контракти ==


Напрям

<script setup lang="ts">


├── package.json
 onClick: () => void;

 id: number;

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

 name: string;
api/

Приклад Zod:



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



 
{name}

TypeScript дає можливість явно сказати:
type CreateUserRequest = {

Історія K2 ERP





Редактор

VS Code




Runtime

Node.js, Bun або Deno




Менеджер пакетів

npm, pnpm або yarn




Компілятор

TypeScript




Конфігурація

tsconfig.json із strict: true




Форматування

Prettier




Linting

ESLint




Тестування

Vitest або Jest




Контроль версій

Git



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

Union types


Напрям

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


Інструмент
}
 name: string;
}
 "tsx": "^4.0.0"

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

};
 "scripts": {
├── tests/
│ ├── models/
 email: string;

Причина
TypeScript часто використовують з ORM та query builder. interface Product {

│ └── main.ts

* офіційний сайт 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/





































Отримано з https://wiki.kyiv.ua/index.php?title=TypeScript&oldid=924