Ի՞նչ է TypeScript-ը. պարզ ուղեցույց ոչ մշակողների համար

TypeScript-ը JavaScript է տիպերով։ Դուք ավելացնում եք պիտակներ, որոնք ասում են, թե յուրաքանչյուր արժեք ինչ տեսակի տվյալ պետք է լինի՝ թիվ, տեքստ, պատվերների ցանկ, և TypeScript-ը ստուգում է ձեր կոդը անհամապատասխանությունների համար՝ նախքան այն գործարկվելը։ TypeScript-ի կայքը նկարագրում է այն որպես «JavaScript՝ տիպերի շարահյուսությամբ»։ տիպերը հեռացվում են, երբ կոդը վերածվում է սովորական JavaScript-ի, որը հետո աշխատում է ամենուր, որտեղ աշխատում է JavaScript-ը։

Ինչու է դա կարևոր AI-ով կառուցելիս

AI մոդելները կոդ են գրում արագ, իսկ արագ գրված կոդում սխալներ են լինում։ customerName դաշտը մի ֆայլում և customer_name մյուսում, գինը փոխանցված տեքստի տեսքով թվի փոխարեն, ֆունկցիա, որը կանչվում է բացակայող արժեքով։ Սովորական JavaScript-ում շատ սխալներ հայտնվում են միայն այն ժամանակ, երբ ինչ-որ մեկը սեղմում է սխալ կոճակը։

TypeScript-ը դրանցից շատերը բռնում է ավելի վաղ, երբ կոդը դեռ գրվում է։

• AI-ն ստանում է անմիջական արձագանք։ Տիպի սխալները ցույց են տալիս ճիշտ սխալ տողը, ուստի agent-ը կարող է այն շտկել, մինչև դուք այն տեսնեք։
• Փոփոխությունները ավելի անվտանգ են։ Վերանվանեք դաշտը, և TypeScript-ը նշում է յուրաքանչյուր տեղ, որտեղ դեռ օգտագործվում է հին անունը։
• Կոդը իրեն բացատրում է։ Տիպերը փաստաթղթավորում են, թե ինչ է սպասում և վերադարձնում ֆունկցիան, ինչը օգնում է ձեզ, AI-ին և յուրաքանչյուր մշակողի, որը հետագայում կաշխատի դրա վրա։
• Խմբագիրները ավելի խելացի են դառնում։ Ավտոլրացումը և «go to definition»-ը ավելի լավ են աշխատում, քանի որ խմբագիրը գիտի, թե յուրաքանչյուր արժեք ինչ է։

Սա մեծ պատճառն է, թեև շատ AI հավելվածների կառուցողներ լռելյայն ընտրում են TypeScript-ը։

Առօրյա անալոգիա

Պատկերացրեք պահեստ՝ պիտակավորված բաժիններով։ Յուրաքանչյուր բաժին ունի նշան՝ «Միայն պալետներ», «Սառնարանային», «Առավելագույնը 500 կգ»։ Երբ առաքում է հասնում, դռան մոտ գտնվող ստուգիչը ապրանքները համեմատում է նշանի հետ։ Սառեցված ձուկը, որը ուղարկված է չոր ապրանքների բաժին, կանգնեցվում է դռան մոտ, ոչ թե մեկ շաբաթ անց, երբ արդեն հոտ է գալիս։

TypeScript-ը դռան ստուգիչն է։ Տիպերը նշաններն են։ Ստուգումը տեղի է ունենում այն ժամանակ, երբ ապրանքները՝ ձեր կոդը, դեռ չեն օգտագործվել։ Եվ երբ ամեն ինչ տեղում է, նշանները հանվում են։ աշխատող JavaScript-ի մեջ տիպեր այլևս չկան։

Ինչպես է աշխատում TypeScript-ը

1. Դուք (կամ AI-ն) գրում եք .ts կամ .tsx ֆայլեր՝ TypeScript, տիպերի պիտակներով։
2. Տիպերի ստուգիչը կարդում է կոդը և անհամապատասխանությունները հայտնում է որպես սխալներ խմբագրում կամ build-ում։
3. Build քայլը հեռացնում է տիպերը՝ ստանալով սովորական 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; // the ? means optional
};

Եվ ֆունկցիա, որը հաշվարկում է կանխավճարը։

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-ով կառուցված հավելվածը։

TypeScript Mythex-ում

Երբ որևէ բան կոնկրետ չեք խնդրում, Mythex-ը նոր նախագծերը սկսում է Vite + React + TypeScript + Tailwind կառուցվածքով։ Կոդի խմբագիրը ներառում է լեզվական խելք՝ լրացումներ, ախտորոշումներ և go-to-definition TypeScript-ի և JavaScript-ի համար, ի թիվս այլ լեզուների, ուստի տիպերի սխալները երևում են կոդում, ոչ միայն Preview-ում։ Խմբագիրը միայն կարդալու համար է Free-ում և լրիվ խմբագրելի՝ Pro-ում։ Կարող եք դեռ ձեր առաջին հուշման մեջ խնդրել այլ կարգավորում։ docs-ի էջը այն մասին, թե ինչպես է ընտրվում տեխնոլոգիան բացատրում է, թե ինչպես, իսկ կոդի խմբագրի docs-ը ներկայացնում է, թե ինչ է ցույց տալիս խմբագիրը։

Հարցեր