TypeScript म्हणजे काय? नॉन-डेव्हलपर्ससाठी सोपी माहिती

TypeScript म्हणजे types असलेले JavaScript. प्रत्येक value कोणत्या प्रकारचा डेटा असावा — संख्या, मजकूर, ऑर्डरची यादी — त्याची लेबले तुम्ही जोडता, आणि कोड चालण्यापूर्वीच TypeScript विसंगती तपासते. TypeScript साइट त्याचे वर्णन “types साठी वाक्यरचना असलेले JavaScript” असे करते; सामान्य JavaScript मध्ये रूपांतर होताना types काढून टाकले जातात, आणि ते JavaScript जिथे चालते तिथे चालते.

AI सह बनवताना हे का महत्त्वाचे आहे

AI मॉडेल्स वेगाने कोड लिहितात, आणि वेगवान कोडमध्ये चुका असतात: एका फाईलमध्ये customerName आणि दुसरीकडे customer_name, संख्येऐवजी मजकूर म्हणून पास केलेली किंमत, किंवा एखादे फंक्शन गहाळ मूल्यासह बोलावणे. साध्या JavaScript मध्ये यातील अनेक चुका कोणी चुकीचे बटण दाबल्यावरच दिसतात.

TypeScript यातील अनेक चुका कोड लिहिला जात असतानाच आधी पकडते:

• AI ला तात्काळ अभिप्राय मिळतो. Type errors नेमक्या चुकीच्या ओळीकडे बोट दाखवतात, त्यामुळे agent तुम्हाला दिसण्यापूर्वीच ती दुरुस्त करू शकतो.
• बदल अधिक सुरक्षित होतात. एखादे फील्ड नाव बदलले, तर जुने नाव अजूनही वापरणाऱ्या प्रत्येक ठिकाणी TypeScript ध्वज लावते.
• कोड स्वतःचे स्पष्टीकरण देतो. Types सांगतात की फंक्शनकडून काय अपेक्षित आहे आणि ते काय परत देते, जे तुम्हाला, AI ला आणि नंतर त्यावर काम करणाऱ्या कोणत्याही डेव्हलपरला उपयोगी पडते.
• Editors अधिक हुशार होतात. Autocomplete आणि “go to definition” अधिक चांगले चालतात, कारण editor प्रत्येक value काय आहे ते ओळखतो.

अनेक AI app builders डीफॉल्टने TypeScript वापरण्याचे हेच मोठे कारण आहे.

रोजच्या आयुष्यातील उदाहरण

लेबल असलेल्या बे (bays) असलेल्या शिपिंग गोदामाचा विचार करा. प्रत्येक बेवर फलक असतो: “फक्त पॅलेट्स”, “रेफ्रिजरेटेड”, “कमाल 500 kg”. डिलिव्हरी आली की दारावरचा तपासणीकार माल फलकाशी जुळवून पाहतो. कोरड्या मालाच्या बेसाठी आलेला गोठवलेला मासा दारातच थांबवला जातो, आठवड्याभरानंतर वास येईपर्यंत नाही.

TypeScript हा दारावरचा तपासणीकार आहे. Types हे फलक आहेत. तपासणी माल — तुमचा कोड — वापरात येण्यापूर्वी होते. आणि सर्व काही जागेवर आल्यावर फलक काढले जातात: चालणाऱ्या JavaScript मध्ये कोणतेही types उरत नाहीत.

TypeScript कसे काम करते

1. तुम्ही (किंवा AI) .ts किंवा .tsx फाईल्स लिहिता — type लेबल्स असलेले TypeScript.
2. Type checker कोड वाचतो आणि विसंगती editor किंवा build मध्ये errors म्हणून नोंदवतो.
3. Build step types काढून टाकतो, आणि साधे JavaScript तयार करतो.
4. JavaScript चालते browser मध्ये किंवा server वर (Node.js, Deno, Bun).

एक महत्त्वाचा परिणाम: TypeScript तुम्ही लिहिलेल्या कोडची तपासणी करते, अॅप चालत असताना येणाऱ्या डेटाची नाही. बाहेरील API ने अनपेक्षित काही परत पाठवले, तर runtime validation जोडल्याशिवाय TypeScript ते पाहू शकत नाही.

एक प्रत्यक्ष उदाहरण: बुकिंग फॉर्म

समजा तुम्ही एका केशकर्तन सलूनसाठी बुकिंग अॅप बनवत आहात. बुकिंगचे वर्णन करणारा type असा आहे:

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 हे ओळखले जाणारे property नाही आणि price गहाळ आहे. साध्या JavaScript मध्ये हे शांतपणे NaN (संख्या नसलेले) डिपॉझिट मोजेल.

चुकीच्या प्रकारची value.

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

TypeScript सांगते की संख्या अपेक्षित असताना मजकूर वापरता येत नाही. त्याशिवाय "40" * 0.2 योगायोगाने चालते, पण "40" + 5 चा निकाल "405" येतो — अशी चूक जी इनव्हॉइसवर दिसते.

अस्तित्वात नसलेली सेवा.

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

TypeScript सांगते की "perm" ही परवानगी असलेल्या सेवांपैकी एक नाही. नंतर सलूनने perms जोडले, तर तुम्ही ते type मध्ये जोडता, आणि TypeScript प्रत्येक अशी जागा दाखवते जिथे बदल करणे आवश्यक आहे — किंमत यादी, फॉर्म, कॅलेंडरचे रंग.

जे पकडू शकत नाही. बुकिंग फॉर्म ब्राउझरमधून सर्व्हरला price: "40" पाठवत असेल, तर सर्व्हरवरचे TypeScript runtime ला ते पाहत नाही. म्हणूनच चांगले बनवलेले अॅप्स येणारा डेटा देखील validate करतात, अनेकदा validation library वापरून, जी आकार तपासते आणि त्याचे योग्य Booking बनवते.

TypeScript विरुद्ध JavaScript

महत्त्वाच्या संज्ञा

सामान्य चुका आणि गैरसमज

• “TypeScript कोड बग-फ्री करते.” ते डेटाच्या आकारातील विसंगती पकडते, चुकीचे तर्क नाही. 20% ऐवजी 2% डिपॉझिट type-check मध्ये व्यवस्थित पास होते.
• “Types मला वाईट इनपुटपासून वाचवतात.” Types runtime ला नाहीसे होतात. वापरकर्ते, फॉर्म्स आणि APIs कडून आलेला डेटा validate करा.
• सगळीकडे any. AI अडकले की errors शांत करण्यासाठी any किंवा // @ts-ignore वापरू शकते. त्यामुळे समस्या दुरुस्त होत नाहीत, तर लपतात.
• Preview चालते म्हणून type errors दुर्लक्षित करणे. काही साधने type errors असतानाही कोड चालवतात. त्या errors म्हणजे अजूनही होऊ शकणारे बग्स.
• “TypeScript हळू असते.” चालवण्यापूर्वी types काढले जातात; प्रत्यक्ष चालणारे JavaScript जवळपास सारखेच असते.
• “ते फक्त मोठ्या टीमसाठी आहे.” एकट्याने बनवणाऱ्यांनाही फायदा होतो, विशेषतः जेव्हा AI बहुतेक बदल करत असते.

तुमच्या AI builder कडे काय मागायचे

• “Strict mode चालू ठेवून TypeScript वापरा.”
• “आमच्या मुख्य नोंदींसाठी — Customer, Booking, Invoice — सामायिक types परिभाषित करा आणि frontend व backend दोन्हीकडे वापरा.”
• “Errors पार करण्यासाठी any किंवा @ts-ignore वापरू नका; मूळ समस्या दुरुस्त करा आणि ती काय होती ते सांगा.”
• “सर्व येणारा डेटा सर्व्हरवर validate करा, फक्त types नव्हे.”
• “Type checker चालवा आणि सर्व errors दुरुस्त केल्याशिवाय ते पूर्ण झाले आहे असे सांगू नका.”
• “फील्डचे नाव बदलताना, TypeScript ध्वज लावते त्या प्रत्येक ठिकाणी बदल करा.”
• “हा type error साध्या इंग्रजीत समजावून सांगा.”

AI ने तयार केलेल्या गोष्टी तपासण्याबद्दल अधिक माहितीसाठी, AI ने लिहिलेला कोड कसा तपासायचा आणि AI ने बनवलेल्या अॅपमधील बग कसा शोधायचा पहा.

Mythex मध्ये TypeScript

तुम्ही काही विशेष मागितले नाही, तर Mythex नवे प्रकल्प Vite + React + TypeScript + Tailwind वर सुरू करते. Code editor मध्ये भाषा समज आहे — TypeScript आणि JavaScript सह इतर भाषांसाठी completions, diagnostics आणि go-to-definition — त्यामुळे type errors फक्त Preview मध्ये नव्हे तर कोडमध्येही दिसतात. Editor Free वर फक्त वाचनीय आहे आणि Pro वर पूर्णपणे संपादनीय आहे. तुम्ही पहिल्या prompt मध्ये वेगळा सेटअप मागू शकता; तंत्रज्ञान कसे निवडले जाते हे docs पान सांगते, आणि code editor docs मध्ये editor काय दाखवतो ते आहे.

प्रश्न