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; // 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 });

prise ತಿಳಿದಿರುವ ಗುಣಲಕ್ಷಣವಲ್ಲ ಮತ್ತು price ಕಾಣೆಯಾಗಿದೆ ಎಂದು TypeScript ವರದಿ ಮಾಡುತ್ತದೆ. ಸರಳ JavaScript ನಲ್ಲಿ ಇದು ಮೌನವಾಗಿ NaN (ಸಂಖ್ಯೆಯಲ್ಲ) ಠೇವಣಿ ಲೆಕ್ಕಹಾಕುತ್ತಿತ್ತು.

ತಪ್ಪು ಪ್ರಕಾರದ ಮೌಲ್ಯ.

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

ಸಂಖ್ಯೆ ಬೇಕಾದಲ್ಲಿ ಪಠ್ಯವನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ ಎಂದು TypeScript ವರದಿ ಮಾಡುತ್ತದೆ. ಅದು ಇಲ್ಲದಿದ್ದರೆ, "40" * 0.2 ಕೆಲಸ ಮಾಡುತ್ತಿತ್ತು, ಆದರೆ "40" + 5 "405" ನೀಡುತ್ತಿತ್ತು — ಇನ್‌ವಾಯ್ಸ್‌ನಲ್ಲಿ ಕಾಣಿಸುವ ರೀತಿಯ ದೋಷ.

ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದ ಸೇವೆ.

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

"perm" ಅನುಮತಿಸಿದ ಸೇವೆಗಳಲ್ಲಿ ಒಂದಲ್ಲ ಎಂದು TypeScript ವರದಿ ಮಾಡುತ್ತದೆ. ಸಲೂನ್ ನಂತರ perms ಸೇರಿಸಿದಾಗ, ನೀವು ಅದನ್ನು ಪ್ರಕಾರಕ್ಕೆ ಸೇರಿಸುತ್ತೀರಿ, ಮತ್ತು TypeScript ನವೀಕರಿಸಬೇಕಾದ ಪ್ರತಿ ಸ್ಥಳವನ್ನು ತೋರಿಸುತ್ತದೆ — ಬೆಲೆ ಪಟ್ಟಿ, ಫಾರ್ಮ್, ಕ್ಯಾಲೆಂಡರ್ ಬಣ್ಣಗಳು.

ಅದು ಏನನ್ನು ಹಿಡಿಯಲಾರದು. ಬುಕಿಂಗ್ ಫಾರ್ಮ್ ಬ್ರೌಸರ್‌ನಿಂದ ಸರ್ವರ್‌ಗೆ price: "40" ಕಳುಹಿಸಿದರೆ, ಸರ್ವರ್‌ನ TypeScript ಅದನ್ನು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ನೋಡುವುದಿಲ್ಲ. ಅದಕ್ಕಾಗಿಯೇ ಚೆನ್ನಾಗಿ ನಿರ್ಮಿತ ಆ್ಯಪ್‌ಗಳು ಒಳಬರುವ ಡೇಟಾವನ್ನು ಮೌಲ್ಯೀಕರಿಸುತ್ತವೆ, ಆಗಾಗ್ಗೆ ಆಕಾರವನ್ನು ಪರಿಶೀಲಿಸಿ ಅದನ್ನು ಸರಿಯಾದ Booking ಆಗಿ ಪರಿವರ್ತಿಸುವ ಮೌಲ್ಯೀಕರಣ ಲೈಬ್ರರಿಯೊಂದಿಗೆ.

TypeScript vs JavaScript

ಸಾಮಾನ್ಯ ಪದಗಳ ವಿವರಣೆ

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ತಪ್ಪು ಗ್ರಹಿಕೆಗಳು

• “TypeScript ಕೋಡ್ ಅನ್ನು ದೋಷರಹಿತವಾಗಿಸುತ್ತದೆ.” ಇದು ಡೇಟಾ ಆಕಾರದಲ್ಲಿನ ಹೊಂದಾಣಿಕೆಯಾಗದಿರುವಿಕೆಯನ್ನು ಹಿಡಿಯುತ್ತದೆ, ತರ್ಕದಲ್ಲಿನ ತಪ್ಪನ್ನಲ್ಲ. 2% ಬದಲು 20% ಠೇವಣಿ ಪ್ರಕಾರ ಪರಿಶೀಲನೆಯಲ್ಲಿ ಉತ್ತೀರ್ಣವಾಗುತ್ತದೆ.
• “ಪ್ರಕಾರಗಳು ನನ್ನನ್ನು ಕೆಟ್ಟ ಇನ್‌ಪುಟ್‌ನಿಂದ ರಕ್ಷಿಸುತ್ತವೆ.” ಪ್ರಕಾರಗಳು ರನ್‌ಟೈಮ್‌ನಲ್ಲಿ ಇರುವುದಿಲ್ಲ. ಬಳಕೆದಾರರು, ಫಾರ್ಮ್‌ಗಳು ಮತ್ತು APIಗಳಿಂದ ಬರುವ ಡೇಟಾವನ್ನು ಮೌಲ್ಯೀಕರಿಸಿ.
• ಎಲ್ಲೆಡೆ any. AI ಸಿಕ್ಕಿಹಾಕಿಕೊಂಡಾಗ ದೋಷಗಳನ್ನು ಮೌನಗೊಳಿಸಲು any ಅಥವಾ // @ts-ignore ಬಳಸಬಹುದು. ಅದು ಸಮಸ್ಯೆಗಳನ್ನು ಸರಿಪಡಿಸದೆ ಮರೆಮಾಡುತ್ತದೆ.
• ಪೂರ್ವವೀಕ್ಷಣೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ ಎಂದು ಪ್ರಕಾರ ದೋಷಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು. ಕೆಲವು ಸಾಧನಗಳು ಪ್ರಕಾರ ದೋಷಗಳಿರುವ ಕೋಡ್ ಅನ್ನು ಇನ್ನೂ ಚಲಾಯಿಸುತ್ತವೆ. ದೋಷಗಳು ಇನ್ನೂ ಸಂಭವಿಸಬಹುದಾದ ಬಗ್‌ಗಳೇ.
• “TypeScript ನಿಧಾನ.” ಪ್ರಕಾರಗಳನ್ನು ಚಲಿಸುವ ಮೊದಲು ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ; ಚಲಿಸುವ JavaScript ಬಹುತೇಕ ಒಂದೇ ಆಗಿರುತ್ತದೆ.
• “ಇದು ದೊಡ್ಡ ತಂಡಗಳಿಗೆ ಮಾತ್ರ.” ಏಕವ್ಯಕ್ತಿ ಬಿಲ್ಡರ್‌ಗಳಿಗೂ ಪ್ರಯೋಜನವಿದೆ, ವಿಶೇಷವಾಗಿ AI ಹೆಚ್ಚಿನ ಬದಲಾವಣೆಗಳನ್ನು ಮಾಡುತ್ತಿರುವಾಗ.

ನಿಮ್ಮ AI ಬಿಲ್ಡರ್‌ಗೆ ಏನು ಕೇಳಬೇಕು

• “TypeScript ಅನ್ನು strict ಮೋಡ್ ಆನ್ ಮಾಡಿ ಬಳಸಿ.”
• “ನಮ್ಮ ಮುಖ್ಯ ದಾಖಲೆಗಳಿಗೆ — Customer, Booking, Invoice — ಹಂಚಿದ ಪ್ರಕಾರಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಿ ಮತ್ತು ಫ್ರಂಟ್‌ಎಂಡ್ ಹಾಗೂ ಬ್ಯಾಕ್‌ಎಂಡ್ ಎರಡರಲ್ಲೂ ಬಳಸಿ.”
• “ದೋಷಗಳನ್ನು ದಾಟಲು any ಅಥವಾ @ts-ignore ಬಳಸಬೇಡಿ; ಮೂಲ ಸಮಸ್ಯೆಯನ್ನು ಸರಿಪಡಿಸಿ ಅದು ಏನಾಗಿತ್ತು ಎಂದು ತಿಳಿಸಿ.”
• “ಸರ್ವರ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಒಳಬರುವ ಡೇಟಾವನ್ನು ಕೇವಲ ಪ್ರಕಾರಗಳಿಂದಲ್ಲ, ಮೌಲ್ಯೀಕರಿಸಿ.”
• “ಪ್ರಕಾರ ಪರೀಕ್ಷಕವನ್ನು ಚಲಾಯಿಸಿ ಮತ್ತು ಮುಗಿದಿದೆ ಎಂದು ಹೇಳುವ ಮೊದಲು ಪ್ರತಿ ದೋಷವನ್ನು ಸರಿಪಡಿಸಿ.”
• “ಒಂದು ಕ್ಷೇತ್ರದ ಹೆಸರು ಬದಲಿಸಿದಾಗ, TypeScript ಗುರುತಿಸುವ ಪ್ರತಿ ಸ್ಥಳವನ್ನು ನವೀಕರಿಸಿ.”
• “ಈ ಪ್ರಕಾರ ದೋಷವನ್ನು ಸರಳ ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ ವಿವರಿಸಿ.”

AI ರಚಿಸಿದ್ದನ್ನು ಪರಿಶೀಲಿಸುವ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಲು, AI ರಚಿಸಿದ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಪರಿಶೀಲಿಸುವುದು ಮತ್ತು AI ನಿರ್ಮಿತ ಆ್ಯಪ್ ಅನ್ನು ಹೇಗೆ ಡೀಬಗ್ ಮಾಡುವುದು ನೋಡಿ.

Mythex ನಲ್ಲಿ TypeScript

ನೀವು ನಿರ್ದಿಷ್ಟವಾಗಿ ಏನನ್ನೂ ಕೇಳದಿದ್ದರೆ, Mythex ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳನ್ನು Vite + React + TypeScript + Tailwind ಮೇಲೆ ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಕೋಡ್ ಎಡಿಟರ್ ಭಾಷಾ ಬುದ್ಧಿವಂತಿಕೆಯನ್ನು ಒಳಗೊಂಡಿದೆ — TypeScript ಮತ್ತು JavaScript ಗಾಗಿ ಆಟೋಕಂಪ್ಲೀಶನ್‌ಗಳು, ಡಯಾಗ್ನೋಸ್ಟಿಕ್ಸ್ ಮತ್ತು ವ್ಯಾಖ್ಯಾನಕ್ಕೆ ಹೋಗುವುದು, ಇತರ ಭಾಷೆಗಳ ಜೊತೆಗೆ — ಆದ್ದರಿಂದ ಪ್ರಕಾರ ದೋಷಗಳು ಪೂರ್ವವೀಕ್ಷಣೆಯಲ್ಲಿ ಮಾತ್ರವಲ್ಲ, ಕೋಡ್‌ನಲ್ಲೂ ಕಾಣಿಸುತ್ತವೆ. Free ನಲ್ಲಿ ಎಡಿಟರ್ ಓದಲು ಮಾತ್ರ; Pro ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ಸಂಪಾದಿಸಬಹುದು. ನಿಮ್ಮ ಮೊದಲ ಪ್ರಾಂಪ್ಟ್‌ನಲ್ಲಿ ಬೇರೆ ಸೆಟಪ್ ಕೇಳಬಹುದು; ತಂತ್ರಜ್ಞಾನ ಹೇಗೆ ಆರಿಸಲಾಗುತ್ತದೆ ಎಂಬ ದಸ್ತಾವೇಜು ಪುಟ ಇದನ್ನು ವಿವರಿಸುತ್ತದೆ, ಮತ್ತು ಕೋಡ್ ಎಡಿಟರ್ ದಸ್ತಾವೇಜು ಎಡಿಟರ್ ಏನನ್ನು ತೋರಿಸುತ್ತದೆ ಎಂದು ವಿವರಿಸುತ್ತದೆ.

ಪ್ರಶ್ನೆಗಳು