मैं बस टाइपस्क्रिप्ट के साथ एक रिएक्ट प्रोजेक्ट पर काम करना शुरू करता हूं और खुद से पूछता हूं कि मुझे नियमित रूप से फाइल के साथ क्या करना चाहिए? क्या मुझे फ़ाइलों का उपयोग करना चाहिए .tsया .tsxफिर मैं किसी भी कारण से .tsxफ़ाइल का उपयोग नहीं करने का कोई कारण नहीं ढूंढ सका , जबकि यह एक रिएक्ट प्रोजेक्ट नहीं है!
क्या कोई कारण या विशिष्ट स्थिति है जिसे हमें .tsxफ़ाइलों का उपयोग नहीं करना चाहिए ? यदि नहीं, तो टाइपस्क्रिप्ट टीम पूरे नए एक्सटेंशन को क्यों जोड़ती है?
जवाबों:
आप बहुत कम अंतर tsxके tsसाथ उपयोग कर सकते हैं । tsxस्पष्ट रूप से jsxटाइपस्क्रिप्ट के अंदर टैग के उपयोग की अनुमति देता है , लेकिन यह कुछ पार्सिंग अस्पष्टता का परिचय देता है जो tsx को थोड़ा अलग बनाता है। मेरे अनुभव में ये अंतर बहुत बड़े नहीं हैं:
प्रकार के साथ <>काम न करें जैसा कि jsx टैग के लिए मार्कर है।
टाइपस्क्रिप्ट के प्रकार के सिद्धांत के लिए दो वाक्यविन्यास हैं। वे दोनों सटीक एक ही काम करते हैं लेकिन एक tsx में प्रयोग करने योग्य है दूसरा नहीं है:
let a: any;
let s = a as string // ok in tsx and ts
let s2 = <string>a // only valid in ts
मैं का प्रयोग करेंगे asके बजाय <>में tsस्थिरता के लिए भी फ़ाइलें। asवास्तव में टाइपस्क्रिप्ट में पेश किया <>गया था क्योंकि इसमें प्रयोग करने योग्य नहीं थाtsx
बिना किसी बाधा के जेनेरिक एरो फ़ंक्शंस को सही ढंग से पार्स नहीं किया जाता है
नीचे तीर समारोह में ठीक है ts, लेकिन में एक त्रुटि tsxके रूप में <T>में एक टैग की शुरुआत के रूप में व्याख्या की हैtsx
const fn = <T>(a: T) => aआप एक बाधक फ़ंक्शन का उपयोग करके या तो बाधा डालकर इसे प्राप्त कर सकते हैं:
const fn = <T extends any>(a: T) => a
const fn = <T,>(a: T) => a // this also works but looks weird IMO
const fn = function<T>(a: T) { return a;}
ध्यान दें
जबकि आप tsx का उपयोग ts के बजाय कर सकते हैं, मैं इसके खिलाफ सुझाऊंगा। कन्वेंशन एक शक्तिशाली चीज है, लोग इसके tsxसाथ जुड़ते हैं jsxऔर शायद आपको आश्चर्य होगा कि आपके पास कोई jsxटैग नहीं है , डेवलपर को न्यूनतम के लिए आश्चर्यचकित रखें।
हालांकि उपरोक्त अस्पष्टता (हालांकि शायद पूरी सूची नहीं है) बड़ी नहीं हैं, उन्होंने tsफाइलों को पीछे की ओर संगत रखने के लिए नए सिंटैक्स के लिए समर्पित फ़ाइल एक्सटेंशन का उपयोग करने के निर्णय में एक बड़ी भूमिका निभाई है ।
(एक जेएसएक्स टैग के सामने आने से पहले ऐसा नहीं हो सकता है ताकि कोई अस्पष्टता न हो।
xजब आपका जावास्क्रिप्ट JSX Harmonyमोड में हो तो यह अंत में उपयोग करने के लिए एक तरह का सम्मेलन है। अर्थात्, जब यह मान्य है:
doSomething(<div>My div</div>);हालाँकि, आपका फ़ाइल एक्सटेंशन वास्तव में मायने नहीं रखता है, जब तक कि आपके पूर्व-प्रोसेसर आपके निर्णय (ब्राउज़राइज़ या वेबपैक) के बारे में जानते हैं। मैं, एक के लिए, .jsमेरे सभी जावास्क्रिप्ट के लिए उपयोग करता हूं, तब भी जब वे रिएक्ट होते हैं। टाइपस्क्रिप्ट के लिए भी यही बात लागू होती है ts/tsx।
संपादित करें
अब, मैं रिएक्ट के साथ टाइपस्क्रिप्ट के लिए जावास्क्रिप्ट सिंटैक्स और TSX के साथ जावास्क्रिप्ट के लिए JSX का उपयोग करने की दृढ़ता से सिफारिश करूंगा क्योंकि अधिकांश संपादक / आईडीई रिएक्ट सिंटैक्स को सक्षम या नहीं करने के लिए एक्सटेंशन का उपयोग करेंगे। इसे अधिक अभिव्यंजक भी माना जाता है।
tsऔर के बारे में मूल प्रश्न का अच्छा उत्तर नहीं है tsx। टाइपस्क्रिप्ट में कंपाइलर केवल JSX सिंटैक्स को .tsxफाइलों में सक्षम करता है, क्योंकि सिंटैक्स TS सिंटैक्स (जैसे कि <>सिंटैक्स सिंटैक्स) के साथ कुछ अस्पष्टता पैदा करता है , इसे हल करने के लिए कंपाइलर एक tsxफाइल के विपरीत एक फाइल में विभिन्न धारणाएं बनाता है ts। टिटियन सर्निकोवा-ड्रैगोमिर का जवाब देखें।
.Jsx एक्सटेंशन को पेश करने का कारण यह है कि JSX JS syntax का एक एक्सटेंशन है और इस प्रकार .jsx फ़ाइलों में मान्य JavaScript नहीं है।
टाइपस्क्रिप्ट .ts और .tsx एक्सटेंशन शुरू करके समान कन्वेंशन का अनुसरण करता है। एक व्यावहारिक अंतर यह है कि .tsx <Type>प्रकार के कथनों की अनुमति नहीं देता है क्योंकि वाक्य रचना JSX टैग के साथ विरोध में है। मुखरता को as Typeप्रतिस्थापन के रूप में पेश किया गया था <Type>। दोनों .ts और .tsx में स्थिरता के कारणों के लिए एक पसंदीदा विकल्प माना जाता है। यदि .tsx फ़ाइल में कोड का उपयोग किया जाता है, तो <Type>उसे ठीक करने की आवश्यकता होगी।
.Tsx एक्सटेंशन के उपयोग का अर्थ है कि एक मॉड्यूल रिएक्ट से संबंधित है और JSX सिंटैक्स का उपयोग करता है। यदि ऐसा नहीं होता है, तो विस्तार मॉड्यूल सामग्री और परियोजना में भूमिका के बारे में गलत धारणा दे सकता है, यह डिफ़ॉल्ट रूप से .tsx एक्सटेंशन के खिलाफ तर्क है।
दूसरी ओर, यदि कोई फ़ाइल रिएक्ट से संबंधित है और किसी बिंदु पर JSX को समाहित करने की अच्छी संभावना है, तो इसे बाद में नाम बदलने से बचने के लिए शुरुआत से .tsx नाम दिया जा सकता है।
उदाहरण के लिए, रिएक्ट घटकों के साथ एक साथ उपयोग किए जाने वाले उपयोगिता फ़ंक्शंस किसी भी बिंदु पर JSX को शामिल कर सकते हैं और इस प्रकार सुरक्षित रूप से .tsx नामों का उपयोग किया जा सकता है, जबकि Redux कोड संरचना को सीधे रिएक्ट घटकों का उपयोग करने के लिए नहीं माना जाता है, इसका उपयोग और प्रतिक्रिया के अलावा परीक्षण किया जा सकता है। और .ts नाम का उपयोग कर सकते हैं।
मेरा मानना है कि .tsx फ़ाइलों के साथ आप सभी JSX (जावास्क्रिप्ट XML) कोड का उपयोग कर सकते हैं। जबकि .ts फ़ाइल में आप केवल टाइपस्क्रिप्ट का उपयोग कर सकते हैं।
.tsफ़ाइलों में एक <AngleBracket>प्रकार का सिंटैक्स सिंटैक्स होता है जो JSX व्याकरण के साथ संघर्ष करता है। एक टन लोगों को तोड़ने से बचने के लिए, हम .tsxJSX के लिए उपयोग करते हैं, और foo as Barवाक्यविन्यास को जोड़ा जो दोनों .tsऔर .tsxफ़ाइलों में अनुमत है ।
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;और दूसरा सिंटैक्स है:
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;हम .ts का उपयोग कर सकते हैं as-syntaxलेकिन <string>someValueअच्छा है!