TypeScript nə üçün lazımdır: JavaScript üzərində statik tipləşdirmə

TypeScript — tip sistemi əlavə olunmuş JavaScript-dir. Siz kodun hansı verilənləri gözlədiyini (sətir, ədəd, müəyyən formalı obyekt) təsvir edirsiniz, kompilyator isə proqramı hələ işə salınmadan yoxlayır və xətaları birbaşa redaktorda göstərir. Bu gün React, Vue, Angular və Node.js üzərində yeni layihələrin əksəriyyəti TypeScript ilə yazılır və onu bilmək vakansiyalarda adi tələbdir.

Problem: JavaScript xətalardan çox gec xəbər tutur

JavaScript dinamik tipləşdirməli dildir: dəyərin tipi yalnız icra zamanı məlum olur. Xətalı kod yalnız icra həmin sətrə çatanda çökür — bəzən artıq istifadəçinin qarşısında. Üç tipik baq:

// cart.js — adi JavaScript
const user = { name: "Aysel", email: "aysel@example.com" };
console.log(user.emial.toLowerCase()); // xassənin adında hərf səhvi

const users = [{ id: 1, name: "Murad" }];
const found = users.find((u) => u.id === 2);
console.log(found.name); // id-si 2 olan istifadəçi yoxdur — found undefined-dır

function formatPrice(amount) {
  return amount.toFixed(2) + " AZN";
}
formatPrice("15"); // ədəd əvəzinə sətir ötürdük

Redaktor burada heç bir problem görmür. node cart.js ilə işə salırıq:

TypeError: Cannot read properties of undefined (reading 'toLowerCase')

Proqram birinci xətada dayandı, qalan ikisi yalnız növbəti işə salmalarda üzə çıxacaq (reading 'name', sonra amount.toFixed is not a function). Əgər sətir nadir hallarda icra olunursa, baq kodda aylarla yaşaya bilər.

Eyni kod TypeScript-də

TypeScript statik tipləşdirmə əlavə edir: tiplər işə salınmadan əvvəl, proqramın mətni əsasında yoxlanılır. İstifadəçinin tipini və parametrin tipini göstərək:

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

const user: User = { name: "Aysel", email: "aysel@example.com" };
console.log(user.emial.toLowerCase()); // ❌ redaktorda xəta

const users: User[] = [{ name: "Murad", email: "murad@example.com" }];
const found = users.find((u) => u.name === "Leyla");
console.log(found.name); // ❌ redaktorda xəta

function formatPrice(amount: number): string {
  return amount.toFixed(2) + " AZN";
}
formatPrice("15"); // ❌ redaktorda xəta

Hər üç problem elə yazı zamanı qırmızı xəttlə vurğulanır. Kompilyator bildirir:

error TS2551: Property 'emial' does not exist on type 'User'. Did you mean 'email'?
error TS18048: 'found' is possibly 'undefined'.
error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

TS User tipinin bütün xassələrini bilir və düzgün adı təklif edir; find metodunun undefined qaytara biləcəyini yadda saxlayır və bu halın emal olunmasını tələb edir; funksiyanın number gözlədiyini, amma sətir aldığını görür.

TypeScript — JavaScript-in üst çoxluğudur

TypeScript JavaScript-in üst çoxluğudur (superset): istənilən düzgün JS kodu sintaksis baxımından TS-də də düzgündür. TS yalnız tip annotasiyaları (: string), type, interface elanları və s. əlavə edir, ona görə də keçidi tədricən etmək olar.

Brauzer və Node.js yalnız JavaScript icra edir, buna görə TS kodu işə salınmadan əvvəl JS-ə çevrilir. Bu zaman tiplər silinir — yekun kodda onlardan heç nə qalmır:

// price.ts — mənbə kodu
type Product = { title: string; price: number };

function withTax(product: Product): number {
  return product.price * 1.18;
}

console.log(withTax({ title: "Keyboard", price: 45 }));

// price.js — kompilyasiyanın nəticəsi
"use strict";
function withTax(product) {
    return product.price * 1.18;
}
console.log(withTax({ title: "Keyboard", price: 45 }));

Product tipi və annotasiyalar yox oldu, məntiq isə dəyişmədi. Nəticə: icra zamanı (runtime) tiplər mövcud deyil və TS xaricdən gələn verilənləri yoxlaya bilmir — serverin cavabı, JSON.parse, istifadəçinin daxil etdiyi məlumat:

type User = { name: string; age: number };

const data: User = JSON.parse('{"name": "Leyla"}'); // TS sözümüzə inanır
console.log(data.age.toFixed(0));
// → TypeError: Cannot read properties of undefined (reading 'toFixed')

JSON.parse dəyəri yoxlamadan qaytarır və TS bunun User olduğuna inanır. Belə sərhədlərdə icra zamanı yoxlama lazımdır — kursda bunu Zod kitabxanası ilə edəcəyik.

💡 Tiplər silindiyi üçün TypeScript proqramı nə yavaşladır, nə də sürətləndirir: icra zamanı eyni JavaScript işləyir. Bütün fayda inkişaf mərhələsindədir.

Komandada əsas üstünlük: ipucları və təhlükəsiz refaktorinq

Redaktor hər dəyərin formasını bilir: user. yazdıqdan sonra xassələrin siyahısını, funksiya çağırışında parametrləri, üzərinə gələndə isə tipi göstərir. Funksiyanın siqnaturası köhnəlməyən sənədə çevrilir:

type Order = { id: number; total: number; status: "new" | "paid" | "shipped" };

function updateStatus(order: Order, status: Order["status"]): Order {
  return { ...order, status };
}

const order: Order = { id: 1, total: 120, status: "new" };
updateStatus(order, "payed");
// ❌ Argument of type '"payed"' is not assignable to parameter of type '"new" | "paid" | "shipped"'.

Siqnaturadan hansı statusların icazəli olduğu görünür və "payed" hərf səhvini TS buraxmayacaq. İkinci üstünlük — təhlükəsiz refaktorinq. Tipdə price adını amount ilə əvəz edək:

type Product = { title: string; amount: number }; // əvvəl price idi

function cartTotal(items: Product[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
  // ❌ Property 'price' does not exist on type 'Product'.
}

TypeScript layihədə sınan hər yeri dərhal göstərəcək. JS-də bu yerləri mətn axtarışı ilə tapmalı və heç nəyin qaçırılmadığına ümid etməli olardınız — yüzlərlə fayldan ibarət layihədə bu, böyük fərqdir.

TypeScript bu gün harada istifadə olunur

Versiyalar haqqında: 5.x xətti (2023–2025) bir çox real layihədə rast gəlinir. TypeScript 6.0 (2026) — TypeScript-in özündə yazılmış sonuncu kompilyatordur; o, keçid versiyasıdır və bir sıra standart tənzimləmələri dəyişir. TypeScript 7 — Go dilində yenidən yazılmış kompilyatordur: layihələri təxminən 10 dəfə sürətli yoxlayır. Dil dəyişməyib: kursun kodu həm 5.x, həm də 7-də işləyir.

Tipik səhvlər

1. TS-in verilənləri icra zamanı yoxladığını düşünmək. API cavabı və ya localStorage-ın məzmunu tipə uyğun gəlməyə bilər: : User annotasiyası özü heç nəyə zəmanət vermir.

2. Yoxlamaları any ilə söndürmək. any tipi "yoxlamaq lazım deyil" deməkdir və TS susur:

const user: any = { name: "Aysel" };
user.emial.toLowerCase(); // TS susur — icra zamanı yenə TypeError

const safeUser: { name: string } = { name: "Aysel" };
safeUser.emial; // ❌ Property 'emial' does not exist on type '{ name: string; }'.

3. "Hər şey işə düşürsə" deyə qırmızı xətlərə məhəl qoymamaq. JavaScript standart olaraq tip xətaları olduqda belə yaradılır, amma tip xətası demək olar ki, həmişə real baq deməkdir.

4. Layihəni sıfırdan yenidən yazmaq. Layihə tədricən köçürülür: fayllar .ts uzantısına dəyişdirilir və tiplər ən çox fayda verən yerlərə əlavə olunur.

Xülasə

• TypeScript — JavaScript üstəgəl statik tiplərdir; xətalar işə salınmadan əvvəl redaktorda görünür.
• O, xassə adlarındakı hərf səhvlərini, ehtimal olunan undefined-a müraciəti, yanlış arqumentləri və s. tutur.
• TS JS-in üst çoxluğudur: istənilən JS kodu keçərlidir, keçidi tədricən etmək olar.
• Kompilyasiya zamanı tiplər silinir; icra zamanı onlar yoxdur, xarici verilənləri ayrıca yoxlamaq lazımdır.
• Komandada əsas üstünlük — avtomatik tamamlama, sənəd rolunda tiplər və təhlükəsiz refaktorinq.
• TS React, Vue, Angular, Node.js, Deno və Bun-da istifadə olunur; aktual versiya — Go kompilyatorlu TypeScript 7-dir.

Praktika

1. Koddakı TypeScript-in tutacağı bütün xətaları tapın və hər birini izah edin: const city = { name: "Baku", population: 2300000 }; console.log(city.populaton); const n = Math.round("3.7");.
2. TypeScript Playground səhifəsini açın, "Eyni kod TypeScript-də" bölməsindəki nümunəni yapışdırın və kodu elə düzəldin ki, heç bir xəta qalmasın.
3. Playground-da name, group və scores (ədədlər massivi) sahələri olan Student tipini və average(student: Student): number funksiyasını təsvir edin. scores sahəsinin adını grades ilə əvəz edin və TS-in hansı yerləri vurğuladığına baxın.
4. Öz JS layihənizdən kiçik bir funksiyanı (səbətin cəmi, siyahının filtrlənməsi) Playground-a köçürün və tiplər əlavə edin. Yanlış verilənlərlə çağırışın xəta ilə vurğulandığını yoxlayın.

💡 4-cü tapşırıqda hər şeyi birdən təsvir etməyə çalışmayın: funksiyanın parametrlərindən başlayın — ən çox faydanı bu verir.