TypeScript дегеніміз не? Техникалық емес адамдарға арналған қарапайым нұсқаулық

TypeScript — типтері бар JavaScript. Әр мәннің қандай деректер болуы керек екенін — сан, мәтін, тапсырыстар тізімі — белгілейсіз, ал TypeScript кодыңызды іске қосқанға дейін сәйкессіздіктерге тексереді. TypeScript сайты оны «типтерге арналған синтаксисі бар JavaScript» деп сипаттайды; код әдеттегі JavaScript-ке айналдырылғанда типтер алынып тасталады, содан кейін ол JavaScript жұмыс істейтін кез келген жерде іске қосылады.

AI көмегімен құрастырғанда ол неге маңызды

AI модельдері кодты жылдам жазады, ал жылдам код қателерге толы: бір файлда customerName, ал екіншісінде customer_name деп аталған өріс, бағаны санның орнына мәтін ретінде беру, мәні жоқ функцияны шақыру. Таза JavaScript-те көп қателер біреу дұрыс емес түймені басқанда ғана көрінеді.

TypeScript көбін код жазылып жатқанда, одан да ерте байқайды:

• AI лезде кері байланыс алады. Типтік қателер дұрыс емес жолды дәл көрсетеді, сондықтан агент оны сіз көрмей-ақ түзете алады.
• Өзгерістер қауіпсіздеу. Өріс атын өзгертсеңіз, TypeScript ескі атты әлі пайдаланатын әр жерді белгілейді.
• Код өзін түсіндіреді. Типтер функцияның не күтетінін және не қайтаратынын құжаттайды, бұл сізге, AI-ға және кейін онымен жұмыс істейтін кез келген әзірлеушіге көмектеседі.
• Редакторлар ақылдырақ болады. Автотолтыру мен «анықтамаға өту» жақсырақ жұмыс істейді, себебі редактор әр мәннің не екенін біледі.

Мұның үлкен себебі — көптеген AI қолданба құрастырушылар TypeScript-ті әдепкі етіп алған.

Күнделікті ұқсастық

Жапсырмалары бар жүк қоймасын елестетіңіз. Әр бөлімнің белгісі бар: «Тек паллеттер», «Суытқыш», «Максимум 500 кг». Жеткізу келгенде, есік алдындағы тексеруші тауарларды белгіге салыстырады. Құрғақ тауарлар бөліміне кеткен мұздатылған балық есікте тоқтатылады, бір аптадан кейін иіс шыққанда емес.

TypeScript — есік алдындағы тексеруші. Типтер — белгілер. Тексеру тауарлар — сіздің кодыңыз — қолданысқа енгізілмес бұрын жүреді. Ал бәрі орнына қойылғаннан кейін белгілер алынады: іске қосылған JavaScript-те типтер қалмайды.

TypeScript қалай жұмыс істейді

1. Сіз (немесе AI) .ts немесе .tsx файлдарын жазасыз — типтік белгілері бар TypeScript.
2. Типтерді тексеруші кодты оқиды және сәйкессіздіктерді редакторда немесе құрастыруда қате ретінде хабарлайды.
3. Құрастыру қадамы типтерді алып тастайды, таза JavaScript шығарады.
4. JavaScript браузерде немесе серверде (Node.js, Deno, Bun) іске қосылады.

Маңызды салдар: TypeScript сіз жазған кодты тексереді, қолданба жұмыс істеп тұрғанда келетін деректерді емес. Сыртқы API күтпеген нәрсе қайтарса, оны көру үшін іске қосу кезіндегі тексеруді қоспасаңыз, TypeScript көрмейді.

Жұмыс мысалы: брондау формасы

Шаш үлгерту салоны үшін брондау қолданбасын жасап жатырсыз делік. Брондауды сипаттайтын түр мынадай:

type Booking = {
  id: number;
  customerEmail: string;
  service: "haircut" | "colour" | "blow-dry";
  startsAt: Date;
  price: number;
  notes?: string; // ? белгісі міндетті емес дегенді білдіреді
};

Ал алдын ала төлемді есептейтін функция:

function depositFor(booking: Booking): number {
  return booking.price * 0.2;
}

Енді TypeScript нені байқайтынын қараңыз.

Дұрыс жазылмаған өріс.

depositFor({ id: 1, customerEmail: "lena@example.com", service: "haircut",
  startsAt: new Date(), prise: 40 });

TypeScript prise белгісіз қасиет екенін, ал price жоқ екенін хабарлайды. Таза JavaScript-те бұл үнсіз NaN (сан емес) алдын ала төлемін есептейтін еді.

Қате түрдегі мән.

const booking: Booking = { ...otherFields, price: "40" };

TypeScript мәтінді сан күтілетін жерде қолдануға болмайтынын хабарлайды. Онсыз "40" * 0.2 кездейсоқ жұмыс істейді, бірақ "40" + 5 нәтижесі "405" болады — шот-фактурада көрінетін қате түрі.

Жоқ қызмет.

const booking: Booking = { ...otherFields, service: "perm" };

TypeScript "perm" рұқсат етілген қызметтердің бірі емес екенін хабарлайды. Салон кейін perm қызметін қосса, оны типке қоса аласыз, ал TypeScript жаңартуды қажет ететін әр жерді көрсетеді — баға тізімін, форманы, күнтізбе түстерін.

Ол не байқай алмайды. Брондау формасы браузерден серверге price: "40" жіберсе, серверде TypeScript мұны іске қосу кезінде көрмейді. Сондықтан жақсы жасалған қолданбалар келіп түскен деректерді де тексереді, әдетте пішінді тексеріп, оны дұрыс Booking-ке айналдыратын валидация кітапханасымен.

TypeScript және JavaScript

Негізгі терминдердің түсіндірмесі

Жиі кездесетін қателер мен қате түсініктер

• «TypeScript кодты қатесіз етеді». Ол деректер пішініндегі сәйкессіздіктерді байқайды, дұрыс емес логиканы емес. 20%-дың орнына 2% алдын ала төлем типтік тексерістен сәтті өтеді.
• «Типтер мені жаман енгізуден қорғайды». Типтер іске қосу кезінде жоғалады. Пайдаланушылардан, формалардан және API-дан келетін деректерді тексеріңіз.
• Барлық жерде any. AI тығырыққа тірелгенде, қателерді басу үшін any немесе // @ts-ignore қолдануы мүмкін. Бұл мәселелерді түзетудің орнына жасырады.
• Preview жұмыс істегендіктен типтік қателерді елемеу. Кейбір құралдар типтік қателері бар кодты әлі де іске қосады. Бұл қателер әлі де болашақта пайда болуы мүмкін бағдарламалық қателер.
• «TypeScript баяу». Типтер іске қосар алдында алынып тасталады; іске қосылатын JavaScript іс жүзінде сол сияқты.
• «Бұл тек үлкен командаларға арналған». Жалғыз құрастырушылар да пайда көреді, әсіресе өңдеулердің көбін AI жасаса.

AI құрастырушыңыздан не сұрау керек

• «TypeScript-ті strict режимі қосылған күйде пайдаланыңыз.»
• «Негізгі жазбаларымыз үшін ортақ типтерді анықтаңыз — Customer, Booking, Invoice — және оларды frontend мен backend-те пайдаланыңыз.»
• «Қателерді өткізу үшін any немесе @ts-ignore қолданбаңыз; негізгі мәселені түзетіңіз және ол не болғанын айтыңыз.»
• «Барлық келіп түсетін деректерді тек типтермен емес, серверде валидациялаңыз.»
• «Типтерді тексерушіні іске қосыңыз және аяқталды деп айтпас бұрын әр қатені түзетіңіз.»
• «Өрісті атын өзгерткен кезде TypeScript белгілейтін әр жерді жаңартыңыз.»
• «Осы типтік қатені қарапайым тілмен түсіндіріңіз.»

AI шығарған нәрсені тексеру туралы көбірек білу үшін AI жасаған кодты қалай қарау керек және AI арқылы салынған қолданбаның қатесін қалай табу керек бөлімдерін қараңыз.

Mythex-тегі TypeScript

Нақты нәрсе сұрамасаңыз, Mythex жаңа жобаларды Vite + React + TypeScript + Tailwind негізінде бастайды. Код редакторында тілдік интеллект бар — TypeScript және JavaScript үшін толықтыру, диагностика және анықтамаға өту, басқа тілдермен қатар — сондықтан типтік қателер тек Preview-да емес, кодта көрінеді. Редактор Free жоспарында тек оқуға арналған, ал Pro-да толық өңделеді. Бірінші сұранысыңызда басқа баптауды сұрай аласыз; техникалық стек қалай таңдалады туралы құжат бетінде бұл түсіндірілген, ал код редакторының құжаттары редактор не көрсететінін сипаттайды.

Сұрақтар