TypeScript асослари: JavaScript'га тип хавфсизлигини қўшиш

TypeScript сўнгги йилларда веб-дастурлаш дунёсида энг тез тарқалган тиллардан бирига айланди ва бунинг сабаби тасодифий эмас. Аслида TypeScript бутунлай янги тил эмас, балки JavaScript устига қурилган қатлам бўлиб, унга тип тизимини қўшади. Яъни сиз ёзадиган ҳар бир нарса барибир JavaScript бўлиб қолади, лекин компилятор ёрдамида код ишга тушишидан олдин кўплаб хатоларни тутиб олиш имкониятига эга бўласиз. Microsoft томонидан ишлаб чиқилган бу тил бугунги кунда React, Angular, Vue ва Node.js лойиҳаларининг катта қисмида стандарт воситага айланиб бормоқда.

Нега TypeScript керак

JavaScript динамик типли тил бўлганлиги сабабли, ўзгарувчининг қандай қиймат сақлашини олдиндан билиб бўлмайди. Бу кичик скриптлар учун қулай, аммо лойиҳа ўсиб боргани сари муаммога айланади. Масалан, сиз функцияга рақам ўрнига матн юбориб қўйсангиз, JavaScript буни фақат код ишга тушганда, кўпинча фойдаланувчи саҳифани очганда хато сифатида кўрсатади. TypeScript эса бу хатони сиз ҳали код ёзаётганингизда, муҳаррир ойнасида қизил чизиқ билан белгилаб беради.

Бундан ташқари, тип маълумотлари муҳаррирингизга ақлли автокомплит имконини беради. Объектнинг қандай майдонлари борлигини, функция қандай аргумент кутаётганини муҳаррир ўзи билиб туради ва сизга таклиф қилади. Катта жамоада ишлаётганда бу яна ҳам муҳим, чунки типлар коднинг ўзини ҳужжатга айлантиради ва бошқа дастурчилар сизнинг функциянгиздан қандай фойдаланишни дарров тушунади. Айнан шу сабаблардан йирик лойиҳаларда TypeScript деярли мажбурий ҳолатга айланган.

Тип аннотацияси ва асосий тушунчалар

TypeScript билан ишлашни бошлаш жуда осон, чунки ҳар қандай JavaScript коди аллақачон тўғри TypeScript ҳисобланади. Энг биринчи қадам ўзгарувчилар ва функцияларга тип аннотациясини қўшишдир. Қуйидаги мисолда функция иккита рақам қабул қилиб, рақам қайтаришини аниқ кўрсатамиз, шунда нотўғри тур юборилса компилятор дарров огоҳлантиради.

function summa(a: number, b: number): number {
  return a + b;
}

let ism: string = "Aziz";
let yosh: number = 25;
let faolmi: boolean = true;

summa(5, 10);      // to'g'ri
summa(5, "10");    // xato: string number emas

Мураккаброқ тузилмалар учун interface ва type ишлатилади. Interface объектнинг шаклини, яъни қандай майдонлари ва уларнинг турлари борлигини тасвирлайди. Type эса ўхшаш вазифани бажаради, лекин ундан ташқари union турлар ва бошқа мураккаб комбинациялар учун ҳам мос келади.

interface Foydalanuvchi {
  id: number;
  ism: string;
  email?: string; // ixtiyoriy maydon
}

type Holat = "faol" | "bloklangan" | "kutilmoqda";

function salom(u: Foydalanuvchi): string {
  return "Salom, " + u.ism;
}

Union турлар ва generics

Union турлар бир ўзгарувчи бир нечта турдаги қиймат сақлаши мумкинлигини билдиради. Юқоридаги Holat типи бунга яхши мисол, чунки ўзгарувчи фақат учта аниқ қийматдан бирини ололади ва бошқа матн ёзсангиз хато чиқади. Generics эса кодни қайта ишлатиш учун энг кучли воситадир, у функцияга турни параметр сифатида бериш имконини беради.

function birinchi<T>(massiv: T[]): T {
  return massiv[0];
}

const raqam = birinchi<number>([1, 2, 3]); // number
const soz = birinchi<string>(["a", "b"]);   // string

Бу ерда T ҳар қандай турни англатади ва функция қайси тур билан чақирилса, ўшанга мослашади. Шу тариқа бир функция рақамлар билан ҳам, матнлар билан ҳам, объектлар билан ҳам хавфсиз ишлайди ва ҳар сафар тип маълумотини сақлаб қолади.

JavaScript лойиҳасини TypeScriptга ўтказиш

Мавжуд JavaScript лойиҳасини бирданига тўлиқ ўзгартириш шарт эмас. Кўпчилик жамоалар босқичма-босқич ёндашувни танлайди: аввал tsconfig.json файлини яратиб, файлларни биттталаб .ts кенгайтмасига ўтказади. Компиляция жараёни tsc буйруғи орқали амалга оширилади, у TypeScript кодини браузер ва Node.js тушунадиган оддий JavaScriptга айлантиради.

# TypeScript o'rnatish
npm install -D typescript

# konfiguratsiya yaratish
npx tsc --init

# kodni kompilyatsiya qilish
npx tsc

Бу жараёнда strict режимини ёқиш тавсия этилади, чунки у энг қаттиқ текширувларни фаоллаштиради ва келажакда юзага келадиган кўплаб муаммоларни олдини олади. Бошида бу бироз кўп огоҳлантириш бериши мумкин, аммо узоқ муддатда код сифатини сезиларли даражада оширади.

Кучли томонлари ва қачон керак эмаслиги

TypeScript кодни ишончли қилади, хатоларни эрта тутади ва катта жамоаларда ҳамкорликни осонлаштиради. Шу билан бирга унинг ўрганиш эгрилиги мавжуд ва лойиҳага қўшимча созлаш ҳамда компиляция босқичини олиб келади. Агар сиз жуда кичик, бир марталик скрипт ёзаётган бўлсангиз ёки тез прототип қилаётган бўлсангиз, оддий JavaScript етарли бўлиши мумкин. Аммо лойиҳа ўсиб борадиган, бир неча ой ёки йиллар давомида сақланадиган ва бир нечта дастурчи устида ишлайдиган ҳар қандай жиддий маҳсулот учун TypeScript сармояга арзийдиган танловдир. Айнан шунинг учун кўплаб компаниялар янги лойиҳаларни тўғридан-тўғри TypeScriptда бошлашни афзал кўради.