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. Төрлийн шалгагч кодыг уншиж, таарахгүй байдлыг редактор эсвэл 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 кодыг алдаагүй болгодог.» Энэ нь өгөгдлийн хэлбэрийн таарахгүй байдлыг олдог, буруу логикийг биш. 20%-ийн оронд 2% урьдчилгаа нь төрлийн шалгалтаар тэнцэнэ.
• «Төрлүүд намайг буруу оролтоос хамгаална.» Төрлүүд ажиллах үед алга болдог. Хэрэглэгч, маягт, API-аас ирсэн өгөгдлийг баталгаажуул.
• Бүх газар any. AI гацахад алдааг дарахын тулд any эсвэл // @ts-ignore руу хандаж болно. Энэ нь асуудлыг засах биш нуудаг.
• Урьдчилан харах ажиллаж байгаа тул төрлийн алдааг үл тоох. Зарим хэрэгсэл төрлийн алдаатай кодыг ажиллуулсаар байдаг. Алдаанууд нь гарч ирэх гэж буй баг хэвээр.
• «TypeScript удаан.» Төрлүүд ажиллахаас өмнө авагддаг; ажиллах JavaScript нь үндсэндээ адил.
• «Зөвхөн том багт зориулагдсан.» Ганцаараа бүтээгчид ч ашигладаг, ялангуяа AI ихэнх засварыг хийж байгаа үед.

AI builder-таасаа юу хүсэх вэ

• «TypeScript-ийг strict горимтойгоор ашигла.»
• «Гол бүртгэлүүдийнхээ — Customer, Booking, Invoice — хуваалцсан төрлүүдийг тодорхойл, frontend болон backend дээр хоёуланд нь ашигла.»
• «Алдааг давахын тулд any эсвэл @ts-ignore бүү ашигла; үндсэн асуудлыг засаад юу байсныг надад хэл.»
• «Бүх ирж буй өгөгдлийг серверт баталгаажуул, зөвхөн төрлөөр бүү хязгаар.»
• «Төрлийн шалгагчийг ажиллуулж, дууссан гэж хэлэхээс өмнө бүх алдааг засаарай.»
• «Талбарын нэрийг өөрчилбөл TypeScript тэмдэглэсэн газар бүрийг шинэчил.»
• «Энэ төрлийн алдааг энгийн үгээр тайлбарла.»

AI-ийн бүтээсэн зүйлийг шалгах талаар дэлгэрэнгүйг AI-ийн бүтээсэн кодыг хэрхэн шалгах вэ болон AI-аар бүтээсэн аппыг хэрхэн дебаг хийх вэ хуудаснаас үзнэ үү.

Mythex дээрх TypeScript

Тодорхой зүйл хүсээгүй бол Mythex шинэ төслүүдээ Vite + React + TypeScript + Tailwind дээр эхэлдэг. Код засварлагч хэл ойлголтыг агуулдаг — TypeScript болон JavaScript-д автоматаар дуусгах, оношлогоо, тодорхойлолт руу очих гэх мэт — тиймээс төрлийн алдаа зөвхөн урьдчилан харахад биш, кодонд харагддаг. Засварлагч Free дээр зөвхөн унших, Pro дээр бүрэн засах боломжтой. Эхний зааварт өөр тохиргоо хүсч болно; технологийг хэрхэн сонгодог docs хуудсанд тайлбарласан, кодын засварлагчийн docs нь засварлагчид юу харуулдгийг тайлбарладаг.

Асуултууд