มีข้อเสียในการใช้. tsx แทน. ts ตลอดเวลาใน typescript หรือไม่?

ฉันเพิ่งเริ่มทำงานกับโครงการ React ด้วย TypeScript และถามตัวเองว่าฉันควรทำอย่างไรกับไฟล์คลาสปกติ ฉันควรใช้.tsหรือ.tsxไฟล์แล้วฉันไม่พบเหตุผลที่จะไม่ใช้.tsxไฟล์ตลอดเวลาแม้ว่าจะไม่ใช่โครงการ React ก็ตาม!

มีเหตุผลหรือสถานการณ์เฉพาะที่เราไม่ควรใช้.tsxไฟล์หรือไม่? ถ้าไม่ทำไมทีม TypeScript จึงเพิ่มส่วนขยายใหม่ทั้งหมด

คุณสามารถใช้tsxแทนtsด้วยความแตกต่างเพียงเล็กน้อย tsxเห็นได้ชัดว่าอนุญาตให้ใช้jsxแท็กภายใน typescript แต่สิ่งนี้นำเสนอความคลุมเครือในการแยกวิเคราะห์ที่ทำให้ tsx แตกต่างกันเล็กน้อย จากประสบการณ์ของฉันความแตกต่างเหล่านี้ไม่ใหญ่มาก:

พิมพ์คำยืนยันโดย<>ไม่ทำงานเนื่องจากเป็นเครื่องหมายสำหรับแท็ก jsx

typescript มีไวยากรณ์สองแบบสำหรับการยืนยันประเภท ทั้งคู่ทำสิ่งเดียวกัน แต่อย่างใดอย่างหนึ่งใช้งานได้ใน 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ถูกนำมาใช้จริงใน typescript เนื่องจาก<>ไม่สามารถใช้งานได้ใน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ในตอนท้ายเมื่อ JavaScript ของคุณอยู่ในJSX Harmonyโหมด นั่นคือเมื่อสิ่งนี้ถูกต้อง:

doSomething(<div>My div</div>);

อย่างไรก็ตามนามสกุลไฟล์ของคุณไม่สำคัญตราบใดที่ผู้ประมวลผลล่วงหน้าของคุณตระหนักถึงการตัดสินใจของคุณ (browserify หรือ webpack) ฉันใช้.jsสำหรับ JavaScript ทั้งหมดของฉันแม้ว่าจะเป็น React ก็ตาม เช่นเดียวกับ ts/tsxtypescript,

แก้ไข

ตอนนี้ฉันขอแนะนำอย่างยิ่งให้ใช้ JSX สำหรับ Javascript กับ React syntax และ TSX สำหรับ TypeScript with React เนื่องจากตัวแก้ไข / IDE ส่วนใหญ่จะใช้ส่วนขยายเพื่อเปิดใช้งานหรือไม่ใช้ไวยากรณ์ React นอกจากนี้ยังถือว่าเป็นการแสดงออกมากขึ้น

สาเหตุที่ทำให้นามสกุล. jsx ถูกนำมาใช้คือ JSX เป็นส่วนขยายของไวยากรณ์ JS ดังนั้นไฟล์. jsx จึงไม่มี JavaScript ที่ถูกต้อง

TypeScript เป็นไปตามแบบแผนเดียวกันโดยแนะนำนามสกุล. ts และ. tsx ความแตกต่างในทางปฏิบัติคือ. tsx ไม่อนุญาตการ<Type>ยืนยันประเภทเนื่องจากไวยากรณ์ขัดแย้งกับแท็ก JSX as Typeคำยืนยันถูกนำมาใช้แทน<Type>และถือเป็นทางเลือกที่ต้องการด้วยเหตุผลความสอดคล้องทั้งใน. ts และ. tsx ในกรณีที่ใช้รหัสจาก. ts ในไฟล์. tsx <Type>จะต้องได้รับการแก้ไข

การใช้นามสกุล. tsx หมายความว่าโมดูลเกี่ยวข้องกับ React และใช้ไวยากรณ์ JSX ในกรณีที่ไม่เป็นเช่นนั้นส่วนขยายอาจให้การแสดงผลที่ผิดพลาดเกี่ยวกับเนื้อหาโมดูลและบทบาทในโปรเจ็กต์ซึ่งเป็นข้อโต้แย้งในการใช้นามสกุล. tsx ตามค่าเริ่มต้น

ในทางกลับกันหากไฟล์เกี่ยวข้องกับ React และมีโอกาสที่ดีที่จะมี JSX ในบางจุดสามารถตั้งชื่อไฟล์เป็น. tsx ตั้งแต่ต้นเพื่อหลีกเลี่ยงการเปลี่ยนชื่อในภายหลัง

ตัวอย่างเช่นฟังก์ชันยูทิลิตี้ที่ใช้ร่วมกับส่วนประกอบ React อาจเกี่ยวข้องกับ JSX ณ จุดใดก็ได้ดังนั้นจึงสามารถใช้ชื่อ. tsx ได้อย่างปลอดภัยในขณะที่โครงสร้างโค้ด Reduxไม่ควรใช้ส่วนประกอบ React โดยตรงสามารถใช้และทดสอบได้นอกเหนือจาก React และสามารถใช้ชื่อ. ts

ฉันเชื่อว่าไฟล์. tsx คุณสามารถใช้โค้ด JSX (JavaScript XML) ทั้งหมดได้ ในขณะที่ในไฟล์. ts คุณสามารถใช้ได้เฉพาะ typescript

.tsไฟล์มี<AngleBracket>ไวยากรณ์การยืนยันประเภทซึ่งขัดแย้งกับไวยากรณ์ JSX เพื่อหลีกเลี่ยงการทำลายผู้คนจำนวนมากเราใช้.tsxสำหรับ JSX และเพิ่มfoo as Barไวยากรณ์ที่อนุญาตในทั้งสองไฟล์.tsและ.tsxไฟล์

let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

และอีกอย่างคือ as-syntax:

let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

เราใช้. ts ได้ด้วยas-syntaxแต่<string>someValueเจ๋ง!