function calculateTotal(cart) {
    return cart.items.reduce((sum, item) => sum + item.price, 0)
}

npm install -g typescript
tsc --version

const greeting: string = 'Hello, World!'
console.log(greeting)

tsc index.ts

// index.js (Output)
var greeting = 'Hello, World!'
console.log(greeting)

tsc index.ts --target ES2020

{
    "compilerOptions": {
        "target": "ES2020",
        "module": "ESNext",
        "strict": true,
        "noEmit": true // <-- Про це нижче
    }
}

"noEmit": true

{
    "compilerOptions": {
        "target": "ES2020",
        "useDefineForClassFields": true,
        "module": "ESNext",
        "lib": ["ES2020", "DOM", "DOM.Iterable"],
        "skipLibCheck": true,

        /* Bundler mode */
        "moduleResolution": "bundler",
        "allowImportingTsExtensions": true,
        "resolveJsonModule": true,
        "isolatedModules": true, // Важливо для esbuild, який компілює файли окремо
        "noEmit": true, // Vite збирає, TS перевіряє
        "jsx": "react-jsx",

        /* Linting */
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noFallthroughCasesInSwitch": true
    },
    "include": ["src"]
}

{
    "compilerOptions": {
        /* Base Options */
        "target": "ES2022", // Сучасні браузери (підтримка Top-level await)
        "module": "ESNext",
        "moduleResolution": "bundler", // Найкращий варіант для Vite/Webpack 5
        "lib": ["ESNext", "DOM", "DOM.Iterable"],

        /* Strict Type-Checking (The Armor) */
        "strict": true,
        "noImplicitAny": true,
        "strictNullChecks": true,
        "strictFunctionTypes": true,
        "strictBindCallApply": true,
        "strictPropertyInitialization": true,
        "noImplicitThis": true,
        "useUnknownInCatchVariables": true, // catch(e) -> e is unknown (not any)

        /* Code Quality (The Linting) */
        "noUnusedLocals": true, // Невикористані змінні - це сміття
        "noUnusedParameters": true, // Невикористані аргументи - це помилка
        "noImplicitReturns": true, // Функція маж повертати значення у всіх гілках
        "noFallthroughCasesInSwitch": true, // Захист від забутого break
        "forceConsistentCasingInFileNames": true, // Windows/Linux сумісність (File.ts != file.ts)

        /* Bundler Integration */
        "noEmit": true, // Віддаємо збірку Vite
        "allowImportingTsExtensions": true, // Дозволяє import X from './file.ts'
        "resolveJsonModule": true, // import config from './config.json'
        "isolatedModules": true, // Захист від features, які не підтримує esbuild (наприклад const enum)
        "esModuleInterop": true, // Дозволяє import React from 'react' (CommonJS сумісність)
        "skipLibCheck": true, // Прискорює збірку, ігноруючи типи в node_modules (ми їх не правимо)
    },
    "include": ["src/**/*"],
}

// Змінна
let variableName: Type = value

// Функція
function functionName(param: Type): ReturnType {
    // ...
}

let age: number = 25
let userName: string = 'Alice'
let isActive: boolean = true

function multiply(a: number, b: number): number {
    return a * b
}

console.log(typeof 'Hello') // "string"
console.log(typeof 42) // "number"
console.log(typeof true) // "boolean"
console.log(typeof {}) // "object"
console.log(typeof undefined) // "undefined"
console.log(typeof null) // "object" (Це відомий баг JS, з яким ми живемо)

function printId(id: number | string) {
    if (typeof id === 'string') {
        // Тут TS знає, що id - це string
        console.log(id.toUpperCase())
    } else {
        // А тут - що це number
        console.log(id.toFixed(2))
    }
}

// (a: number, b: number) -> це параметри
// : number -> це тип значення, яке повертається
function sum(a: number, b: number): number {
    return a + b
}

const multiply = (a: number, b: number): number => {
    return a * b
}

// Скорочений запис (Implicit return)
const divide = (a: number, b: number): number => a / b

function greet(name: string, title?: string): string {
    // title має тип "string | undefined"
    if (title) {
        return `Hello, ${title} ${name}`
    }
    return `Hello, ${name}`
}

greet('Alice') // ✅
greet('Bob', 'Mr.') // ✅

// role автоматично стає string. Знак ? не потрібен.
function createUser(name: string, role: string = 'guest') {
    console.log(`User ${name} has role ${role}`)
}

createUser('Alice') // role: "guest"
createUser('Bob', 'admin') // role: "admin"

// ...numbers збирає всі аргументи в масив чисел
function total(...numbers: number[]): number {
    return numbers.reduce((acc, curr) => acc + curr, 0)
}

total(10, 20, 30) // 60

// Тип: функція, яка приймає рядок і нічого не повертає
type LogCallback = (message: string) => void

function processData(data: string, onComplete: LogCallback) {
    // ... logic
    onComplete('Process finished')
}

processData('file.txt', (msg) => console.log(msg))

// ❌ Погано: Неявне визначення (хоча TS це розуміє - Type Inference)
const userName: string = 'Oleksandr'

// ✅ Добре: TS сам розуміє, що це string (Inference)
const userName = 'Oleksandr'

// 🛑 ПОМИЛКА
userName = 42 // Error: Type 'number' is not assignable to type 'string'.

const currency = 'UAH'
const amount = 100

// Тип message автоматично стає string
const message = `Total: ${amount} ${currency}`

const price: number = 0.1 + 0.2 // 0.30000000000000004

// Потрібно target: ES2020+
const reallyBigNumber: bigint = 9007199254740991n // суфікс 'n'

let id: number | string

id = 101 // ✅
id = 'user_101' // ✅
// id = true; // 🛑 Error

function printId(id: number | string) {
    // console.log(id.toUpperCase()); // 🛑 Помилка! У number немає toUpperCase().
    console.log(id.toString()) // ✅ ОК, бо це є і там, і там.
}

function formatPrice(price: number | string) {
    if (typeof price === 'string') {
        // У цьому блоці price — це string
        return parseFloat(price).toFixed(2)
    } else {
        // У цьому блоці price — це number
        return price.toFixed(2)
    }
}

// Тільки ці три рядки дозволені
type WindowState = 'open' | 'closed' | 'minimized'

let state: WindowState = 'open'
// state = "broken"; // 🛑 Error

// Створюємо псевдонім для типу string
type Name = string

// Створюємо псевдонім для складнішого типу (Union)
type ID = string | number

let userId: ID = 123
userId = 'user_456'

type Protocol = 'http' | 'https'
type Domain = 'kostyl.dev' | 'google.com'
type URL = `${Protocol}://${Domain}`

const mySite: URL = 'https://kostyl.dev' // ✅
// const wrong: URL = "ftp://kostyl.dev"; // ❌ Error

const key1: symbol = Symbol('key')
const key2: symbol = Symbol('key')

// console.log(key1 === key2); // false! Навіть якщо опис однаковий.

// Проблема number
const price = 19.99
const quantity = 3
const total = price * quantity // 59.96999999999999 😱

// Рішення BigInt (працюємо в копійках)
const priceBig = 1999n // 19.99 грн -> 1999 копійок
const qtyBig = 3n
const totalBig = priceBig * qtyBig // 5997n -> 59.97 грн. Ідеально точно.

const isError: boolean = false

if (isError) {
    // Цей код ніколи не виконається (Dead Code)
    // TS може підсвітити це, якщо налаштований правильно
    console.error('Boom!')
}

interface UserProfile {
    id: string
    bio: string | null // Користувач може стерти біографію
    website?: string // Користувач може навіть не заповнювати це поле (буде undefined)
}

function printBio(user: UserProfile) {
    if (user.bio === null) {
        console.log('No bio provided')
        return
    }
    // Тут TS знає, що user.bio - це точно string!
    console.log(user.bio.toUpperCase())
}

// Аналіз коду:
// 1. Функція логує повідомлення (Side effect).
// 2. Вона не має return.
// 3. Її результат - void (хоча технічно в JS це undefined).

function logError(message: string): void {
    console.error(`[SYSTEM ERROR]: ${message}`)
}

const result = logError('DB Timeout') // Тип result - void. З ним нічого не можна зробити.

// ❌ НІКОЛИ ТАК НЕ РОБІТЬ (хіба що під час міграції старого JS коду)
let data: any = 'Hello'
data = 42 // ОК
data.methodHuh() // ОК в редакторі -> Crash в браузері 💥

function safeParse(json: string): unknown {
    return JSON.parse(json)
}

const result = safeParse('{"name": "Alice"}')

// 🛑 Error: Object is of type 'unknown'.
// console.log(result.name);
// Ми не можемо просто звернутися до поля, бо не знаємо, чи це об'єкт.

// ✅ Треба зробити звуження типу (Type Narrowing)
if (typeof result === 'object' && result !== null && 'name' in result) {
    // Тепер це безпечно, але TS все ще обережний.
    // Для реальних задач краще використовувати Zod/Yup або Type Guards (про це пізніше).
    console.log((result as any).name) // Все ще брудно, але це ілюстрація обмеження
}

// Сценарій 1: Функція-бомба
function throwError(msg: string): never {
    throw new Error(msg)
}

// Сценарій 2: Вичерпна перевірка
type Status = 'success' | 'error' | 'loading'

function getMessage(s: Status): string {
    switch (s) {
        case 'success':
            return 'Done!'
        case 'error':
            return 'Oops!'
        case 'loading':
            return 'Loading...'
        default:
            // Якщо ми додамо новий статус в type Status, але забудемо тут case,
            // TS видасть помилку тут, бо s не буде never.
            const _exhaustiveCheck: never = s
            return _exhaustiveCheck
    }
}

const scores: number[] = [1, 2, 3] // Більш поширений
const names: Array<string> = ['Alice', 'Bob'] // Дженерик синтаксис (стара школа)

// ReadonlyArray
const sensors: readonly number[] = [22.5, 23.1, 22.8]

// 🛑 Error: Property 'push' does not exist on type 'readonly number[]'.
// sensors.push(24.0);

// Ми можемо тільки читати або створювати нові масиви на основі цього
const newSensors = [...sensors, 24.0]

// Це Tuple: [string, number]
// Перший елемент ЗАВЖДИ рядок, Другий ЗАВЖДИ число.
type UserRecord = [string, number]

const record: UserRecord = ['Alice', 1]

// Деструктуризація працює ідеально
const [username, id] = record

const point: readonly [number, number] = [10, 20]
// point.push(30); // Тепер це помилка!

async function getUser(id) {
    const res = await fetch(`/api/users/${id}`)
    return res.json()
}
// Хто знає, що там повертається? Ніхто.

// 1. Визначаємо форму даних (Shape)
// Поки використовуємо type, про interface поговоримо пізніше
type Address = {
    city: string
    zip: number // краще string для zip, але для прикладу number
    street?: string // Необов'язкове поле
}

type UserResponse = {
    id: number
    username: string
    isActive: boolean
    tags: string[] // Масив рядків
    address: Address // Вкладений об'єкт
    lastLogin: string | null // Може бути null
}

// 2. Типізуємо функцію
async function getUser(id: number): Promise<UserResponse> {
    const res = await fetch(`/api/users/${id}`)

    // ПРИМІТКА: fetch не кидає помилку на 404/500, треба перевіряти ok
    if (!res.ok) {
        throw new Error('Network response was not ok')
    }

    // cast result as UserResponse
    // (Увага: це "довіра" розробника, TS не може перевірити рантайм відповідь тут)
    return res.json() as Promise<UserResponse>
}

// 3. Використання
async function main() {
    try {
        const user = await getUser(101)

        console.log(`Hello, ${user.username.toUpperCase()}`)

        if (user.lastLogin) {
            console.log(`Last login: ${user.lastLogin}`)
        }

        // Автодоповнення працює! user.address.city
    } catch (e) {
        console.error(e)
    }
}

// TS бачить: це рядок. Йому не треба писати ': string'
let framework = 'React'

// TS бачить: це число
let version = 18

// TS "виводить" тип результату функції
// add має тип (a: number, b: number) => number
function add(a: number, b: number) {
    return a + b
}

// ✅ Explicit return type
// Якщо ми випадково повернемо рядок, TS одразу це підсвітить ТУТ.
function getUserName(user: User): string {
    return user.firstName + ' ' + user.lastName
}

const buttons = ['Save', 'Cancel', 'Delete']

// TS знає, що 'btn' - це string, тому що масив рядків.
// Вам не треба писати (btn: string)
buttons.forEach((btn) => {
    console.log(btn.toUpperCase()) // ✅ Метод string доступний
})

// 1. Отримуємо елемент (він може бути null, і TS думає, що це просто HTMLElement)
const input = document.getElementById('user-email')

// 2. Ми кажемо: "Повір мені, це HTMLInputElement"
const emailInput = input as HTMLInputElement

// Тепер доступні специфічні методи
console.log(emailInput.value)

const safeData = 'Hello' as number // 🛑 TS Error: Conversion of type 'string' to type 'number' may be a mistake...

// АЛЕ через unknown можна зламати все
const dangerousData = 'Hello' as unknown as number // ✅ TS мовчить
// dangerousData.toFixed(2); // 💥 Runtime Crash!

// Без as const
const config = {
    endpoint: 'https://api.example.com',
    retries: 3,
}
// Тип config: { endpoint: string; retries: number; }
// config.endpoint = "oops"; // Дозволено (хоча це може зламати app)

// З as const
const strictConfig = {
    endpoint: 'https://api.example.com',
    retries: 3,
} as const

// Тип strictConfig:
// {
//    readonly endpoint: "https://api.example.com"; // Тип не string, а саме цей рядок!
//    readonly retries: 3; // Тип не number, а саме 3!
// }

// strictConfig.retries = 5; // 🛑 Error: Read-only!

// global.d.ts або прямо у файлі
declare const MY_ANALYTICS_ID: string

function track() {
    console.log(MY_ANALYTICS_ID) // Тепер помилки немає
}

// Розширення інтерфейсу Window
declare global {
    interface Window {
        __REDUX_DEVTOOLS_EXTENSION__: any
    }
}

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ // ✅

// Рівень логування (Union Type)
type LogLevel = 'info' | 'warn' | 'error'

interface LogConfig {
    debugMode: boolean
    appVersion: string
}

// Функція, яка форматує повідомлення (повертає string)
function formatMessage(level: LogLevel, msg: string, config: LogConfig): string {
    const timestamp = new Date().toISOString()
    return `[${timestamp}] [${level.toUpperCase()}] (v${config.appVersion}): ${msg}`
}

// Функція, яка відправляє лог (повертає void)
function transport(formattedMsg: string): void {
    console.log(formattedMsg)
    // Тут міг би бути sendToSentry(formattedMsg);
}

// Головна функція (параметри явно типізовані)
function log(level: LogLevel, message: unknown, config: LogConfig): void {
    if (!config.debugMode && level === 'info') {
        return // Early return
    }

    // Безпечна обробка unknown
    let safeMessage: string

    if (typeof message === 'string') {
        safeMessage = message
    } else if (message instanceof Error) {
        safeMessage = message.message
    } else {
        // Fallback для об'єктів
        try {
            safeMessage = JSON.stringify(message)
        } catch {
            safeMessage = 'Unknown Object'
        }
    }

    const output = formatMessage(level, safeMessage, config)
    transport(output)
}

// Тест
const appConfig = { debugMode: true, appVersion: '1.0.0' } as const

log('error', new Error('DB Connection Failed'), appConfig)
log('warn', { userId: 123, action: 'drop_table' }, appConfig)
log('info', 'App started', appConfig)
// log("fatal", "Boom", appConfig); // 🛑 Error: Argument of type '"fatal"' is not assignable to parameter of type 'LogLevel'.

// ❌ НЕПРАВИЛЬНО
function reverse(str: String): String {
    return new String(str).split('').reverse().join('')
}

// ✅ ПРАВИЛЬНО
function reverse(str: string): string {
    return str.split('').reverse().join('')
}

// ❌ Погано
function doSomething(cb: Function) {
    cb(1, 2, 3) // Ніякої перевірки аргументів
}

// ✅ Добре
function doSomething(cb: (a: number, b: number) => void) {
    // ...
}

import { z } from 'zod'

// Схема
const UserSchema = z.object({
    id: z.number(),
    email: z.string().email(),
})

// Автоматичний вивід типу (Don't Repeat Yourself)
type User = z.infer<typeof UserSchema>

// Використання
const result = UserSchema.safeParse(apiResponse)
if (!result.success) {
    console.error(result.error)
}

// Якщо ви змінили ім'я колонки в БД, цей код підсвітиться червоним!
const user = await db.user.findFirst({
    where: { email: 'test@example.com' },
})