TypeScript in Marathi | TypeScript म्हणजे काय? (What is TypeScript ?)
Lets learn typescript in Marathi language :
TypeScript हे JavaScript चे एक Advanced Version (Superset) आहे. याचा अर्थ असा की, तुम्ही जे काही JavaScript मध्ये लिहिता ते TypeScript मध्ये चालतेच, पण TypeScript मध्ये काही additional Features असतात.
TypeScript हे Microsoft ने तयार केलेले JavaScript चे एक प्रगत स्वरूप (Superset) आहे. साध्या भाषेत सांगायचे तर, JavaScript + ‘Type’ Safety = TypeScript.
जेव्हा आपण JavaScript लिहितो, तेव्हा ब्राउझरला तो कोड समजतो. पण TypeScript थेट ब्राउझरला समजत नाही. आपण लिहिलेल्या TS कोडचे रूपांतर (Transpilation) आधी JS मध्ये केले जाते आणि मग तो रन होतो.
मुख्य फरक असा आहे की:
- JavaScript: यामध्ये variables ला ठराविक ‘Type’ (Data Type) नसतो. (JavaScript is Dynamically Typed)
- TypeScript: यामध्ये तुम्हाला प्रत्येक variable चा ‘Type’ सांगावा लागतो. (TypeScript is Statically Typed)
JavaScript मधील मुख्य समस्या (Issues with JavaScript)
JavaScript लवचिक (Flexible) आहे, पण हीच लवचिकता मोठ्या प्रोजेक्ट्समध्ये डोकेदुखी ठरते:
१. डायनॅमिक टायपिंग (Dynamic Typing)
JS मध्ये व्हेरिएबलचा कोणताही डेटा टाईप ठरलेला नसतो. तुम्ही एकाच व्हेरिएबलमध्ये आधी नंबर आणि नंतर स्ट्रिंग टाकू शकता. यामुळे मोठे गोंधळ होतात.
२. रन-टाइम एरर्स (Runtime Errors)
JS मधील चुका कोड ‘Run’ केल्याशिवाय समजत नाहीत. जेव्हा युजर तुमची वेबसाईट वापरत असतो, तेव्हा अचानक ती क्रॅश होते. उदा. “undefined is not a function.”
३. ‘Silent’ चुका (Silent Failures)
JS चुका दाखवण्याऐवजी काहीतरी भलतेच उत्तर देऊन मोकळे होते.
- उदा:
5 + "5"चे उत्तर10येण्याऐवजी"55"येते.
आपल्याला TypeScript ची गरज का आहे? (Why do we need it ? )
JavaScript वापरताना अनेकदा छोटे-छोटे बदल केल्यामुळे मोठे Bugs निर्माण होतात. TypeScript ते टाळण्यास मदत करते.
१. चुका लवकर शोधणे (Catching Bugs Early)
JavaScript मध्ये एखादी चूक झाली तर ती प्रोग्राम ‘Run’ केल्यावर समजते. पण TypeScript मध्ये कोड लिहितानाच (Compile-time error) लाल line येते आणि तुम्हाला चूक सुधारण्यास सांगते.
JavaScript उदाहरण:
function addition(a, b) {
return a + b;
}
console.log(addition(5, "10")); // उत्तर येईल "510" (कारण JavaScript ने 10 ला string मानले)TypeScript उदाहरण:
function addition(a: number, b: number) {
return a + b;
}
// addition(5, "10"); -> इथे TypeScript लगेच Error दाखवेल की "10" हा नंबर नाहीये!२. मोठ्या प्रोजेक्ट्ससाठी सोयीचे (Scalability)
जेव्हा एखादा मोठा प्रोजेक्ट असतो आणि त्यात १०-२० डेव्हलपर्स काम करत असतात, तेव्हा कोणाचे फंक्शन काय काम करते आणि त्याला कोणता डेटा हवा आहे, हे समजणे कठीण जाते. TypeScript मुळे कोड वाचणे सोपे होते.
TypeScript काम कसे करते? (How it works?)
लक्षात ठेवा: Web Browser ला TypeScript समजत नाही. Web Browser understand only JavaScript.
१. तुम्ही कोड लिहिता .ts फाईलमध्ये.
२. TypeScript Compiler (tsc) तो कोड चेक करतो.
३. जर सर्व बरोबर असेल, तर तो त्याचे रूपांतर .js फाईलमध्ये करतो.
४. ही .js फाईल मग Browser मध्ये रन होते.
| वैशिष्ट्ये | JavaScript | TypeScript |
| Data Types | नसतात (Dynamic) | असतात (Static) |
| Error | रन करताना समजतात | लिहितानाच समजतात |
| प्रोजेक्टचा आकार | छोट्या कामासाठी उत्तम | मोठ्या प्रोजेक्टसाठी आवश्यक |
| वापर | थेट ब्राउझरमध्ये चालते | प्रथम JS मध्ये रुपांतर करावे लागते |
JavaScript म्हणजे अशी गाडी आहे जिला ब्रेक आणि आरसे नाहीत, तुम्ही वेगाने जाऊ शकता पण अपघाताची भीती असते. TypeScript म्हणजे अशी गाडी आहे जिला सर्व Safety Features आहेत, जी तुम्हाला चुकीच्या रस्त्याला जाण्यापासून आधीच वॉर्निंग देते.
का आणि कशासाठी? (Why do we need TS ? )
आता आपण उदाहरणासह पाहूया की TypeScript आपली कशी मदत करते.…
उदाहरण १ : डेटा टाईपची खात्री (Type Checking)
समजा तुम्हाला युजरचे वय तपासायचे आहे.
JavaScript मध्ये :
function checkAge(age) {
if (age > 18) {
console.log("तुम्ही पात्र आहात!");
}
}
checkAge("पंचवीस"); // इथे आपण चुकून 'String' पाठवली.
// JS एरर देणार नाही, पण उत्तरही मिळणार नाही.TypeScript मध्ये:
function checkAge(age: number) { // इथे आपण 'number' type अनिवार्य केला आहे
if (age > 18) {
console.log("तुम्ही पात्र आहात!");
}
}
// checkAge("पंचवीस"); // TS इथेच लाल ओळ (Error) दाखवेल!
checkAge(25); // हेच बरोबर आहे.उदाहरण २: ऑब्जेक्टचा साचा (Interfaces/Objects)
मोठ्या प्रोजेक्टमध्ये डेटा कसा असेल हे ठरवण्यासाठी TS मदत करते.
TypeScript उदाहरण:
interface Mobile {
brand: string;
price: number;
}
let myPhone: Mobile = {
brand: “Samsung”,
price: 50000
};
// जर तुम्ही ‘price’ लिहायला विसरलात किंवा तिथे ‘string’ लिहली,
// तर TS कोड सेव्ह होऊ देणार नाही.
TypeScript का लागते? (The Need for TS)
| कारण | सविस्तर स्पष्टीकरण |
| Bugs पकडणे | कोड लिहितानाच ८०% चुका समजतात. |
| AutoComplete | कोड एडिटरमध्ये तुम्हाला आपोआप सुचवले जाते की पुढे काय लिहायचे आहे. |
| सोपे वाचन (Readability) | दुसरा डेव्हलपर तुमचा कोड सहज समजू शकतो कारण प्रत्येक गोष्टीचा ‘Type’ समोर लिहिलेला असतो. |
| रिफॅक्टरिंग (Refactoring) | कोडमध्ये मोठे बदल करणे सुरक्षित असते. एक बदल केल्यावर कुठे कुठे चुका झाल्या आहेत, हे TS स्वतः सांगते. |
मराठीमध्ये TypeScript (TS) आणि JavaScript (JS) मधील फरक, त्यांच्यातील समस्या आणि उपाय यांचा हा सखोल लेख:
TypeScript म्हणजे काय? (What is TypeScript?)
TypeScript हे Microsoft ने तयार केलेले JavaScript चे एक प्रगत स्वरूप (Superset) आहे. साध्या भाषेत सांगायचे तर, JavaScript + ‘Type’ Safety = TypeScript.
जेव्हा आपण JavaScript लिहितो, तेव्हा ब्राउझरला तो कोड समजतो. पण TypeScript थेट ब्राउझरला समजत नाही. आपण लिहिलेल्या TS कोडचे रूपांतर (Transpilation) आधी JS मध्ये केले जाते आणि मग तो रन होतो.
JavaScript मधील मुख्य समस्या (Issues with JavaScript)
JavaScript लवचिक (Flexible) आहे, पण हीच लवचिकता मोठ्या प्रोजेक्ट्समध्ये डोकेदुखी ठरते:
१. डायनॅमिक टायपिंग (Dynamic Typing)
JS मध्ये व्हेरिएबलचा कोणताही डेटा टाईप ठरलेला नसतो. तुम्ही एकाच व्हेरिएबलमध्ये आधी नंबर आणि नंतर स्ट्रिंग टाकू शकता. यामुळे मोठे गोंधळ होतात.
२. रन-टाइम एरर्स (Runtime Errors)
JS मधील चुका कोड ‘Run’ केल्याशिवाय समजत नाहीत. जेव्हा युजर तुमची वेबसाईट वापरत असतो, तेव्हा अचानक ती क्रॅश होते. उदा. “undefined is not a function.”
३. ‘Silent’ चुका (Silent Failures)
JS चुका दाखवण्याऐवजी काहीतरी भलतेच उत्तर देऊन मोकळे होते.
- उदा:
5 + "5"चे उत्तर10येण्याऐवजी"55"येते.
का आणि कशासाठी? (Why do we need TS?)
आता आपण उदाहरणासह पाहूया की TypeScript आपली कशी मदत करते.
उदाहरण १: डेटा टाईपची खात्री (Type Checking)
समजा तुम्हाला युजरचे वय तपासायचे आहे.
JavaScript मध्ये:
JavaScript
function checkAge(age) {
if (age > 18) {
console.log("तुम्ही पात्र आहात!");
}
}
checkAge("पंचवीस"); // इथे आपण चुकून 'String' पाठवली.
// JS एरर देणार नाही, पण उत्तरही मिळणार नाही.
TypeScript मध्ये:
TypeScript
function checkAge(age: number) { // इथे आपण 'number' अनिवार्य केला आहे
if (age > 18) {
console.log("तुम्ही पात्र आहात!");
}
}
// checkAge("पंचवीस"); // TS इथेच लाल ओळ (Error) दाखवेल!
checkAge(25); // हेच बरोबर आहे.
उदाहरण २: ऑब्जेक्टचा साचा (Interfaces/Objects)
मोठ्या प्रोजेक्टमध्ये डेटा कसा असेल हे ठरवण्यासाठी TS मदत करते.
TypeScript उदाहरण:
TypeScript
interface Mobile {
brand: string;
price: number;
}
let myPhone: Mobile = {
brand: "Samsung",
price: 50000
};
// जर तुम्ही 'price' लिहायला विसरलात किंवा तिथे 'string' लिहली,
// तर TS कोड सेव्ह होऊ देणार नाही.
TypeScript का लागते? (The Need for TS)
| कारण | सविस्तर स्पष्टीकरण |
| Bugs पकडणे | कोड लिहितानाच ८०% चुका समजतात. |
| AutoComplete | कोड एडिटरमध्ये तुम्हाला आपोआप सुचवले जाते की पुढे काय लिहायचे आहे. |
| सोपे वाचन (Readability) | दुसरा डेव्हलपर तुमचा कोड सहज समजू शकतो कारण प्रत्येक गोष्टीचा ‘Type’ समोर लिहिलेला असतो. |
| रिफॅक्टरिंग (Refactoring) | कोडमध्ये मोठे बदल करणे सुरक्षित असते. एक बदल केल्यावर कुठे कुठे चुका झाल्या आहेत, हे TS स्वतः सांगते. |
JavaScript का पुरेशी नाही? (Why JS is not enough?)
आजच्या काळात आपण Facebook, Netflix किंवा Amazon सारख्या प्रचंड मोठ्या वेबसाईट्स बनवतो. अशा वेळी:
१. Teamwork: १० लोक एकाच कोडवर काम करत असताना कोणाचे फंक्शन काय डेटा घेते हे समजणे कठीण असते.
२. Maintenance: सहा महिन्यांनी स्वतःचाच कोड बघितल्यावर “हा डेटा नेमका काय आहे?” हा प्रश्न पडतो.
३. Reliability: युजरला क्रॅश झालेली वेबसाईट बघायला आवडत नाही.
निष्कर्ष:
JavaScript हे “बोलबच्चन” मित्रासारखे आहे, जो म्हणतो “हो होऊन जाईल, बघू नंतर”. तर TypeScript हे “शिस्तप्रिय” मित्रासारखे आहे, जो म्हणतो “आधी नियम ठरवूया, मगच काम करूया”.
थोडक्यात लक्षात ठेवा:
- JS = वेगवान पण धोकादायक (छोट्या कामासाठी).
- TS = सुरक्षित आणि शिस्तबद्ध (प्रोफेशनल कामासाठी).
अँगुलरमध्ये (Angular) JavaScript ऐवजी TypeScript का वापरले जाते, याची काही ठोस तांत्रिक कारणे आहेत. Google ने अँगुलर तयार करताना मुद्दाम TypeScript ची निवड केली, कारण अँगुलर हे प्रामुख्याने “Enterprise Level” (मोठ्या आकाराच्या) ॲप्लिकेशन्ससाठी बनवले आहे.
त्याची मुख्य कारणे खालीलप्रमाणे आहेत:
१. Why Angular Use Typescript – explanation in Marathi : Dependency Injection (DI)
अँगुलरमध्ये Dependency Injection नावाची एक महत्त्वाची सिस्टिम असते. यामध्ये एका क्लासला दुसऱ्या क्लासची गरज असते.
- TS मुळे सोपे होते: TypeScript मुळे अँगुलरला कळते की कोणता क्लास (Service) कुठे हवा आहे, कारण आपण तिथे
Typeलिहितो (उदा.constructor(private service: DataService)). - JS मध्ये समस्या: JavaScript मध्ये ‘Types’ नसल्यामुळे अँगुलरला हे ओळखणे खूप कठीण आणि गुंतागुंतीचे झाले असते.
२. डेकोरेटर्स (Decorators) आणि मेटाडेटा
अँगुलरमध्ये आपण @Component, @NgModule, किंवा @Injectable असे शब्द वापरतो. याला Decorators म्हणतात.
- हे डेकोरेटर्स TypeScript मध्ये खूप आधीपासून उपलब्ध होते आणि ते कोडला “मेटाडेटा” (जादा माहिती) देतात.
- JavaScript मध्ये हे फिचर्स अधिकृतपणे खूप उशिरा आले, त्यामुळे अँगुलरने सुरुवातीपासूनच TS ला पसंती दिली.
३. मोठ्या टीमसाठी ‘कोड मेंटेनन्स’
अँगुलरचा वापर सहसा अशा कंपन्या करतात जिथे १०० पेक्षा जास्त डेव्हलपर्स एकाच प्रोजेक्टवर काम करतात.
- JS मधील धोका: जर एका डेव्हलपरने कोड बदलला, तर दुसऱ्या डेव्हलपरचा कोड कुठे ब्रेक झाला हे समजायला खूप वेळ लागतो.
- TS चा फायदा: अँगुलरमध्ये जर तुम्ही एखाद्या फंक्शनचा डेटा टाईप बदलला, तर पूर्ण प्रोजेक्टमध्ये जिथे जिथे एरर येतील तिथे TypeScript लगेच वॉर्निंग देते. यामुळे “App Crash” होण्याचे प्रमाण कमी होते.
४. उत्तम टूलिंग आणि इंटेलिजन्स (IntelliSense)
अँगुलरचे स्वतःचे CLI (Command Line Interface) आहे. तुम्ही जेव्हा कोड लिहिता, तेव्हा TypeScript मुळे तुम्हाला VS Code मध्ये अचूक सजेशन्स मिळतात.
- उदा. जर तुम्ही
this.user.असे टाईप केले, तरuserऑब्जेक्टमध्ये असलेले सर्व पर्याय (name, id, email) तुम्हाला लगेच दिसतात. JavaScript मध्ये हे इतक्या अचूकपणे शक्य नाही.
५. ‘Classes’ आणि ‘Interfaces’ वर आधारित रचना
अँगुलरची पूर्ण रचना ही Object-Oriented Programming (OOP) वर आधारित आहे.
- TypeScript मध्ये
Interfaces,Abstract Classes, आणिAccess Modifiers(public, private) हे फीचर्स अत्यंत प्रगत आहेत. यामुळे अँगुलरचा कोड अधिक शिस्तबद्ध आणि वाचायला सोपा (Readable) होतो.
थोडक्यात सांगायचे तर:
| कारण | JavaScript का नाही? | TypeScript का? |
| शिस्त (Discipline) | खूप मोकळीक, ज्यामुळे चुका वाढतात. | कडक नियम, ज्यामुळे चुका कमी होतात. |
| प्रोजेक्टचा आकार | मोठ्या प्रकल्पात मॅनेज करणे कठीण. | मोठ्या प्रकल्पासाठीच बनवलेले. |
| बग्स (Bugs) | रन-टाईमवर समजतात. | कोड लिहितानाच समजतात. |
| Google ची निवड | Google ला अँगुलरसाठी एक ‘Robust’ भाषा हवी होती. | अँगुलरच्या टीमने Microsoft सोबत मिळून TS ला अँगुलरसाठी ऑप्टिमाइझ केले. |
थोडक्यात: अँगुलर ही एक ‘शक्तिशाली’ फ्रेमवर्क आहे. ही शक्ती हाताळण्यासाठी JavaScript पेक्षा TypeScript चा ‘शिस्तबद्ध’ लगाम जास्त गरजेचा असतो.