TypeScript — JavaScript əsasında yaradılmış və ona statik tipləndirmə imkanları əlavə edən proqramlaşdırma dilidir. TypeScript proqramçıya dəyişənlərin, funksiyaların, obyektlərin və digər məlumatların hansı tipdə olacağını əvvəlcədən müəyyən etməyə imkan verir. Sadə dillə desək, JavaScript-də bəzi səhvlər yalnız proqram işlədikdən sonra üzə çıxa bilər. TypeScript isə kodu əvvəlcədən yoxlayaraq müəyyən tip səhvlərini proqram işə düşməzdən əvvəl aşkar etməyə kömək edir. Məsələn, funksiyanın rəqəm qəbul etməsi nəzərdə tutulubsa, TypeScript həmin funksiyaya səhvən mətn göndərildiyini kod yazılan mərhələdə göstərə bilər. Bu xüsusiyyət xüsusilə böyük layihələrdə, komanda şəklində işləyərkən və React və Next.js kimi müasir Frontend texnologiyalarından istifadə etdikdə faydalıdır.

TypeScript nə üçün istifadə olunur?

TypeScript əsasən JavaScript layihələrində kodun daha aydın, idarəolunan və təhlükəsiz yazılmasına kömək etmək üçün istifadə olunur. Kiçik JavaScript layihəsində dəyişənin hansı məlumatı saxladığını xatırlamaq asan ola bilər. Layihə böyüdükcə isə yüzlərlə funksiya, komponent, obyekt və API məlumatı ilə işləmək lazım gəlir. TypeScript həmin strukturların hansı tip məlumatlarla işləməli olduğunu açıq şəkildə göstərməyə imkan verir.

Məsələn, istifadəçi məlumatı belə müəyyən edilə bilər:

type User = {

name: string;

age: number;

active: boolean;

};

Burada name mətn, age rəqəm, active isə true və ya false qiyməti almalıdır. Proqramçı daha sonra age sahəsinə təsadüfən mətn yazmağa çalışarsa, TypeScript bunu səhv kimi göstərə bilər.

TypeScript necə işləyir?

Brauzerlər ənənəvi olaraq TypeScript kodunu birbaşa işlətmir. TypeScript kodu layihənin build və ya compilation mərhələsində JavaScript-ə çevrilir və type məlumatlarının böyük hissəsi runtime kodundan çıxarılır.

Məsələn, TypeScript kodu:

const age: number = 25;

JavaScript-ə çevrildikdə əsas məntiq belə qalır:

const age = 25;

: number hissəsi proqramın runtime davranışının bir hissəsi deyil. O, əsasən kodun əvvəlcədən yoxlanılması üçün istifadə olunur. Bu səbəbdən TypeScript-in verdiyi type safety əsasən development və build mərhələsində işləyir.

TypeScript JavaScript-dən nə ilə fərqlənir?

JavaScript dinamik tipləndirilən proqramlaşdırma dilidir. Dəyişənin tipi proqram işləyərkən saxladığı dəyərə əsasən müəyyən olunur.

Məsələn:

let value = 10;

value = "Salam";

JavaScript buna icazə verir.

TypeScript-də isə dəyişənin yalnız rəqəm saxlamasını müəyyən etmək mümkündür:

let value: number = 10;

value = "Salam";

Bu halda TypeScript ikinci sətri type error kimi göstərəcək. Əsas fərq odur ki, JavaScript kodun runtime davranışını həyata keçirir, TypeScript isə JavaScript-in üzərinə əlavə type sistemi və development alətləri gətirir. TypeScript JavaScript-i əvəz edən tamamilə ayrı ekosistem deyil. Əksinə, TypeScript JavaScript sintaksisi və imkanları üzərində qurulub.

Static Typing nədir?

Static Typing dəyişənlərin və digər proqram elementlərinin tiplərinin proqram işləməzdən əvvəl yoxlanılması yanaşmasıdır.

Məsələn:

let username: string = "Aysel";

let age: number = 24;

let active: boolean = true;

Burada hər dəyişənin qəbul edə biləcəyi məlumat tipi əvvəlcədən müəyyən olunur.

Əgər proqramçı belə yazarsa:

age = "iyirmi dörd";

TypeScript bu uyğunsuzluğu göstərə bilər. Bu xüsusiyyət xüsusilə böyük layihələrdə təsadüfi type səhvlərinin azalmasına kömək edir.

Type Annotation nədir?

Type Annotation dəyişənin, funksiyanın parametrinin və ya qaytardığı nəticənin tipinin açıq şəkildə göstərilməsidir.

Məsələn:

function calculatePrice(

price: number,

quantity: number

): number {

return price * quantity;

}

Burada price və quantity yalnız number qəbul etməlidir. Funksiyanın sonunda göstərilən : number isə funksiyanın nəticəsinin rəqəm olmalı olduğunu bildirir. Beləliklə funksiyanın hansı məlumatlarla işlədiyi kodu oxuyan proqramçı üçün də daha aydın olur.

Type Inference nədir?

TypeScript-də hər dəyişənin tipini əl ilə yazmaq məcburi deyil. TypeScript bir çox halda verilən dəyərə baxaraq tipi avtomatik müəyyən edə bilir.

Məsələn:

const course = "Frontend";

Burada ayrıca string yazılmasa belə, TypeScript course dəyişəninin mətn olduğunu müəyyən edə bilir. Bu proses Type Inference adlanır. Type inference kodun lazımsız type annotation-larla həddindən artıq yüklənməsinin qarşısını almağa kömək edir.

TypeScript-də əsas məlumat tipləri hansılardır?

TypeScript JavaScript-də mövcud olan string, number, boolean, object, null və undefined kimi məlumat tipləri ilə işləyir. Bundan əlavə, TypeScript type sistemində any, unknown, never, union types, literal types və digər əlavə anlayışlar mövcuddur.

Məsələn:

let name: string = "Murad";

let age: number = 22;

let student: boolean = true;

Array üçün isə belə yazmaq mümkündür:

const technologies: string[] = [

"HTML",

"CSS",

"TypeScript"

];

Burada array daxilində yalnız string tipli dəyərlərin olması gözlənilir.

any nədir?

any TypeScript-in type yoxlamasını müəyyən dəyər üçün böyük ölçüdə deaktiv etməyə imkan verir.

Məsələn:

let data: any = 10;

data = "Salam";

data = true;

Bu kod qəbul edilə bilər. any bəzi hallarda faydalı olsa da, həddindən artıq istifadə edildikdə TypeScript-in əsas üstünlüklərindən biri olan type safety zəifləyir. Bu səbəbdən mümkün olduqda konkret tiplərdən istifadə etmək daha məqsədəuyğundur.

unknown nədir?

unknown tipi əvvəlcədən hansı tip məlumat gələcəyinin bilinmədiyi hallarda istifadə edilə bilər. any ilə müqayisədə unknown daha təhlükəsiz yanaşmadır, çünki həmin məlumatla əməliyyat aparmazdan əvvəl onun tipi yoxlanmalıdır.

Məsələn:

function printValue(value: unknown) {

if (typeof value === "string") {

console.log(value.toUpperCase());

}

}

Burada TypeScript typeof yoxlamasından sonra value dəyişəninin həmin blokda string olduğunu anlayır. Bu proses Type Narrowing adlanır.

Union Type nədir?

Bəzən dəyişən bir neçə fərqli tipdən birini qəbul edə bilər. Bu halda Union Type istifadə olunur.

Məsələn:

let id: string | number;

id = 10;

id = "USR-10";

Burada id həm string, həm də number ola bilər. Union Types API məlumatlarında, komponent props-larında və müxtəlif istifadəçi vəziyyətlərində geniş istifadə edilə bilər.

Type və Interface nədir?

TypeScript-də obyektlərin strukturunu təsvir etmək üçün type və interface istifadə edilə bilər.

Məsələn:

interface User {

id: number;

name: string;

email: string;

}

Daha sonra:

const user: User = {

id: 1,

name: "Aysel",

email: "aysel@example.com"

};

TypeScript user obyektinin User interface-ində tələb olunan struktura uyğun olub-olmadığını yoxlayır.

Bənzər struktur type vasitəsilə də yaradıla bilər:

type Product = {

id: number;

title: string;

price: number;

};

type və interface bir çox oxşar vəziyyətdə istifadə oluna bilsə də, onların imkanlarında və genişləndirilmə davranışında müəyyən fərqlər mövcuddur.

Optional Property nədir?

Bəzən obyektin müəyyən məlumatının olması məcburi deyil. Belə hallarda ? işarəsindən istifadə edilə bilər.

interface User {

name: string;

phone?: string;

}

Burada name mütləq olmalıdır, phone isə olmaya bilər. Bu xüsusiyyət real API məlumatlarında və formalarla işləyərkən xüsusilə faydalıdır.

Generics nədir?

Generics müxtəlif tiplərlə işləyə bilən, lakin type safety-ni qoruyan təkrar istifadə edilə bilən funksiyalar və komponentlər yaratmağa imkan verir.

Məsələn:

function getFirst<T>(items: T[]): T {

return items[0];

}

Bu funksiya həm mətn array-i, həm rəqəm array-i, həm də başqa tipli array ilə işləyə bilər.

getFirst<string>(["HTML", "CSS"]);

getFirst<number>([10, 20, 30]);

Burada T konkret bir type ilə məhdudlaşdırılmayıb. Funksiya müxtəlif tiplərlə işləyə bilir və eyni zamanda həmin tip haqqında məlumatı qoruyur. Generics böyük layihələrdə reusable komponentlərin hazırlanmasında xüsusilə faydalıdır.

Type Narrowing nədir?

Type Narrowing TypeScript-in daha geniş bir type daxilindən konkret vəziyyətdə hansı type-ın istifadə olunduğunu müəyyən etməsidir.

Məsələn:

function format(value: string | number) {

if (typeof value === "string") {

return value.toUpperCase();

}

return value.toFixed(2);

}

if blokunda TypeScript value dəyişəninin string olduğunu bilir. Digər hissədə isə onun number olduğu müəyyən edilir. Bu yanaşma Union Types ilə təhlükəsiz işləməyə imkan verir.

TypeScript və API necə birlikdə işləyir?

Müasir Frontend layihələrində məlumatlar çox vaxt API vasitəsilə Backend-dən alınır. Məsələn, API-dən istifadəçi məlumatı gəlirsə, proqram daxilində onun gözlənilən strukturunu müəyyən etmək mümkündür:

interface User {

id: number;

name: string;

email: string;

}

Daha sonra API ilə işləyən funksiyalar həmin type-dan istifadə edə bilər. Bu, kodun daxilində hansı məlumatın gözlənildiyini daha aydın göstərir. Lakin burada vacib məqam var: TypeScript API-dən gələn məlumatın runtime-da həqiqətən həmin struktura uyğun olduğunu avtomatik zəmanət vermir. Xarici API məlumatının etibarlı şəkildə yoxlanılması tələb olunursa, runtime validation ayrıca həyata keçirilməlidir.

TypeScript React ilə necə istifadə olunur?

TypeScript React layihələrində geniş istifadə edilir.

React komponentlərinin props-larını müəyyən etmək buna sadə nümunədir:

type ButtonProps = {

text: string;

disabled?: boolean;

};

function Button({

text,

disabled

}: ButtonProps) {

return (

<button disabled={disabled}>

{text}

</button>

);

}

Burada komponentə hansı props-ların verilə biləcəyi əvvəlcədən məlumdur. Əgər text əvəzinə uyğun olmayan type göndərilərsə, TypeScript development zamanı bunu göstərə bilər. Bu xüsusiyyət komponent sayı artdıqca layihənin idarə olunmasını asanlaşdırır.

TSX nədir?

TSX TypeScript daxilində JSX sintaksisindən istifadə etməyə imkan verən fayl formatıdır. React komponentləri JavaScript ilə yazıldıqda çox vaxt .jsx, TypeScript istifadə edildikdə isə .tsx fayl uzantısından istifadə olunur.

Məsələn:

function Header() {

return <h1>JET Academy</h1>;

}

TSX xüsusilə React və Next.js layihələrində tez-tez istifadə olunur.

TypeScript Next.js ilə istifadə olunurmu?

Bəli. Next.js TypeScript ilə işləməyi dəstəkləyir və müasir Next.js layihələrində TypeScript geniş istifadə olunur. TypeScript vasitəsilə komponentlər, server funksiyaları, route parametrləri, API məlumatları və tətbiq daxilindəki digər strukturlar üçün tiplər müəyyən edilə bilər. Bu yanaşma xüsusilə böyük Next.js layihələrində kodun daha aydın və idarəolunan saxlanmasına kömək edir.

TypeScript Backend-də istifadə olunurmu?

Bəli. TypeScript yalnız Frontend proqramlaşdırma üçün nəzərdə tutulmayıb. Node.js və onun üzərində qurulan server framework-ləri ilə Backend tətbiqlər TypeScript istifadə edilərək hazırlana bilər. Beləliklə eyni layihənin həm Frontend, həm də Backend hissəsində TypeScript istifadə etmək mümkündür. Bu yanaşma Full-Stack JavaScript/TypeScript layihələrində ümumi type strukturlarının daha sistemli idarə edilməsinə kömək edə bilər.

TypeScript Debugging prosesinə necə kömək edir?

TypeScript bütün proqram səhvlərini aradan qaldırmır. Məntiq xətaları, yanlış biznes qaydaları, API problemləri və runtime səhvləri yenə yarana bilər. Lakin TypeScript müəyyən type uyğunsuzluqlarını kod işləməzdən əvvəl aşkar etməyə kömək edir. Məsələn, olmayan property-yə müraciət, funksiyaya yanlış type göndərilməsi və ya gözlənilməyən dəyərin istifadəsi development mərhələsində görünə bilər. Bu səbəbdən TypeScript Debugging ehtiyacını tam aradan qaldırmasa da, bəzi səhvlərin daha erkən aşkarlanmasına kömək edir.

TypeScript-in üstünlükləri nələrdir?

TypeScript böyük və uzunmüddətli layihələrdə kodun strukturunu daha aydın etməyə kömək edir. Type məlumatları funksiyanın hansı parametrləri qəbul etdiyini, obyektin hansı sahələrə sahib olduğunu və komponentin hansı məlumatlarla işlədiyini göstərir. IDE-lər TypeScript type məlumatlarından istifadə edərək daha düzgün autocomplete, refactoring və xəta xəbərdarlıqları təqdim edə bilir. TypeScript həmçinin komanda daxilində kodun oxunmasını və müxtəlif hissələr arasında gözlənilən məlumat strukturunun anlaşılmasını asanlaşdıra bilər.

TypeScript-in çatışmazlıqları varmı?

TypeScript əlavə öyrənmə mərhələsi tələb edir. JavaScript-i yeni öyrənən şəxs eyni zamanda type, interface, generics, union və narrowing kimi anlayışları öyrəndikdə mövzu daha mürəkkəb görünə bilər. TypeScript layihənin build və konfiqurasiya prosesinə də əlavə mərhələlər gətirə bilər. Bundan əlavə, TypeScript bütün runtime problemlərinin qarşısını almır. Xüsusilə serverdən və ya istifadəçidən gələn məlumatların həqiqi strukturu ayrıca yoxlanılmalıdır. Bu səbəbdən TypeScript JavaScript biliklərini əvəz edən texnologiya deyil. JavaScript-i yaxşı başa düşmək TypeScript öyrənməyi əhəmiyyətli dərəcədə asanlaşdırır.

TypeScript öyrənməyə haradan başlamaq lazımdır?

TypeScript-ə keçməzdən əvvəl JavaScript-in əsaslarını yaxşı mənimsəmək daha məqsədəuyğundur. Dəyişənlər, məlumat tipləri, funksiyalar, Array və Object, Scope, DOM, async/await, modules və API ilə işləmək kimi JavaScript mövzuları yaxşı baza yaradır. Daha sonra TypeScript-də type annotations, type inference, union types, interfaces, type aliases, generics, narrowing və utility types kimi mövzulara keçmək olar. React istifadə edənlər növbəti mərhələdə component props, state, events, hooks və API məlumatlarını TypeScript ilə tipləndirməyi öyrənə bilərlər.

Daha sonra TSX və Next.js ilə praktiki layihələr hazırlamaq TypeScript biliklərini möhkəmləndirməyə kömək edir.

Frontend proqramlaşdırmaya hansı ardıcıllıqla başlamaq barədə daha ətraflı məlumat üçün JET Academy-nin “Frontend proqramçı olmaq üçün nədən başlamaq lazımdır?” bloqu ilə tanış ola bilərsiniz.

TypeScript, JavaScript, React, Redux Toolkit, Next.js və digər müasir Frontend texnologiyalarını praktiki layihələr üzərində öyrənmək istəyirsinizsə, JET Academy-nin Frontend Proqramlaşdırma Təlimi ilə tanış ola bilərsiniz.