რა არის TypeScript? მარტივი გზამკვლევი არაპროგრამისტებისთვის

TypeScript არის JavaScript ტიპებით. თქვენ უმატებთ ეტიკეტებს, რომლებიც ამბობს, რა სახის მონაცემია თითოეული მნიშვნელობა — რიცხვი, ტექსტი, შეკვეთების სია — და TypeScript თქვენს კოდს შეუსაბამობებზე ამოწმებს კოდის გაშვებამდე. TypeScript-ის საიტი მას აღწერს როგორც „JavaScript ტიპების სინტაქსით“; ტიპები იშლება ჩვეულებრივ JavaScript-ად გარდაქმნისას, რომელიც მუშაობს ყველგან, სადაც JavaScript.

რატომ არის მნიშვნელოვანი AI-ით აშენებისას

AI მოდელები კოდს სწრაფად წერენ, და სწრაფ კოდს შეცდომები ახასიათებს: ველი სახელად customerName ერთ ფაილში და customer_name მეორეში, ფასი ტექსტად გადაცემული რიცხვის ნაცვლად, ფუნქცია გამოძახებული მნიშვნელობის გარეშე. ჩვეულებრივ JavaScript-ში ბევრი ასეთი შეცდომა მხოლოდ მაშინ ჩნდება, როცა ვინმე არასწორ ღილაკს დააჭერს.

TypeScript ბევრ მათგანს უფრო ადრე იჭერს, კოდის წერის პროცესში:

• AI მყისიერ უკუკავშირს იღებს. ტიპის შეცდომები ზუსტ ხაზზე მიგითითებთ, ასე რომ აგენტს შეუძლია გამოასწოროს, სანამ თქვენ დაინახავთ.
• ცვლილებები უფრო უსაფრთხოა. თუ ველს გადაარქმევთ, 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; // ? ნიშნავს, რომ არასავალდებულოა
};

და ფუნქცია, რომელიც ავანსის გამოთვლას ახდენს:

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 კოდს შეცდომებისგან თავისუფალს ხდის.“ ის იჭერს მონაცემების ფორმის შეუსაბამობებს, არა არასწორ ლოგიკას. 2%-იანი ავანსი 20%-ის ნაცვლად ტიპებს შეესაბამება და მაინც სწორად შემოწმდება.
• „ტიპები დაგიცავთ არასწორი შემომავალი მონაცემებისგან.“ ტიპები გაშვებისას ქრება. ამოწმეთ მომხმარებლების, ფორმებისა და 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-ზე სრულად რედაქტირებადი. თუ სხვა დაყენება გინდათ, თქვით ეს თქვენს პირველ prompt-ში; დოკუმენტაციის გვერდი როგორ შეირჩევა ტექნოლოგია განმარტავს, როგორ, ხოლო კოდის რედაქტორის დოკუმენტაცია აღწერს, რას აჩვენებს რედაქტორი.

კითხვები