โต้ตอบกับ TypeScript หรือ JavaScript: ไหนดีกว่ากัน?

TypeScript คืออะไร?

Open-source TypeScript จัดเตรียมคอมไพเลอร์ที่แปลงโค้ด TypeScript เป็นโค้ด JavaScript ภาษานั้นเป็นโอเพ่นซอร์สและข้ามเบราว์เซอร์ สมมติว่าแทบไม่มีข้อบกพร่องทางตรรกะในภาษา js ในกรณีนั้น คุณสามารถใช้ TypeScript โดยเปลี่ยนชื่อไฟล์สคริปต์ your.js เป็น.ts และเริ่มรับโค้ด TypeScript ที่เหมาะสม

ภาษา JavaScript จะเป็นเวอร์ชันเฉพาะของ TypeScript Anders Hejlsberg เพื่อนร่วมงานด้านเทคนิคของ Microsoft ได้แนะนำและสร้างมันขึ้นมาในปี 2012 เนื่องจาก JavaScript ได้รับความนิยมมากขึ้น โค้ด JS จึงมีขนาดใหญ่ขึ้นและเข้าใจยากขึ้น ซึ่งเป็นสาเหตุที่ Typescript ได้รับการพัฒนา เมื่อโปรแกรมเมอร์เริ่มใช้ JavaScript สำหรับเทคโนโลยีฝั่งเซิร์ฟเวอร์ สิ่งนี้ชัดเจนขึ้น

JavaScript คืออะไร?

ทุกครั้งที่หน้าผู้ใช้ทำมากกว่าการนั่งอยู่ที่นั่นและแสดงข้อมูลคงที่เพื่อให้คุณดู — การแสดงเนื้อหาที่ดีขึ้น, การสร้างภาพ, กราฟิกการ์ตูน 2D/3D, การเรียกดูเครื่องเล่นบันทึกวิดีโอ ฯลฯ — คุณสามารถเดิมพันได้ว่า JavaScript เป็น อาจเกี่ยวข้อง JavaScript เป็นภาษาสคริปต์หรือภาษาเขียนโค้ดที่ช่วยให้คุณสามารถรวมโครงสร้างขั้นสูงบนหน้าเว็บได้ เป็นชั้นที่สามของเค้กที่ประกอบด้วยเทคโนโลยีเว็บมาตรฐาน สองอันดับแรก (HTML และ CSS)

React ดีกว่าด้วย JavaScript หรือ TypeScript หรือไม่?

ในการตรวจสอบครั้งแรก ดูเหมือนจะไม่มีความแตกต่างระหว่างโค้ดจาก React TypeScript มาตรฐานและ JavaScript นี่เป็นสิ่งที่คาดหวังโดยสิ้นเชิงเนื่องจาก TypeScript เป็นชุดของรหัสและเป็นบรรพบุรุษของ JavaScript ความแตกต่างระหว่าง JavaScript และ TypeScript ไม่ได้เปลี่ยนแปลงไปมากนักในช่วงไม่กี่ปีที่ผ่านมา คุณพร้อมที่จะไปถ้าคุณรู้จักพวกเขา

ความก้าวหน้าทางเทคโนโลยีในอนาคตอาจเร่งการผลิตซอฟต์แวร์ ผลักดันความต้องการโปรแกรมเมอร์ กรุณาใช้ภาษาใดก็ได้ เราคาดหวังการพัฒนาทั้งในโปรเจ็กต์ย่อยและโปรเจ็กต์หลัก: เลือก TypeScript สำหรับโปรเจ็กต์ขนาดใหญ่ที่มีทีมจากต่างประเทศ หรือ JavaScript สำหรับงานที่ตรงไปตรงมากับทีมที่ยอดเยี่ยม

JavaScript ใช้กันอย่างแพร่หลาย พวกเขาวิเคราะห์และพบว่าภาษานั้นไม่เสถียรและคาดเดาไม่ได้ หากจำเป็น สามารถแปลกรอบงาน JS เป็น TypeScript ได้ ต้องใช้แรงงานในการแปลงระบบ JS ที่เป็นที่นิยมเป็น TS

ไฟล์ The.d.ts จะต้องจัดทำเป็นเอกสารและมีวิธีการส่งคืนทั้งหมดสำหรับแต่ละไลบรารีที่พอร์ต การย้ายพอร์ตของ jQuery ต้องใช้ความพยายามเพิ่มเติม บางทีนี่อาจไม่ใช่เรื่องยากขนาดนั้น TypeScript รองรับโดย IDEA, WebStorm, Expressive, Particle และอื่นๆ

รหัสตอบโต้และประเภทไฟล์ใน TypeScript กับ JavaScript

ในการตรวจสอบครั้งแรก ดูเหมือนจะไม่มีความแตกต่างระหว่างโค้ดจาก React TypeScript มาตรฐานและ JavaScript

นี่เป็นสิ่งที่คาดหวังโดยสิ้นเชิงเนื่องจาก TypeScript เป็นชุดของรหัสและเป็นบรรพบุรุษของ JavaScript นี่หมายความว่าการเขียนโปรแกรมที่ใช้ JavaScript ใด ๆ จะสามารถรันไฟล์ TypeScript ได้ ในทำนองเดียวกัน ภาษา SASS บางภาษาเท่านั้นที่สามารถเป็นโค้ด CSS ที่ถูกต้องได้ แนวคิดนี้ระบุว่า CSS ทั้งหมดยอมรับได้ในโค้ด SASS

อย่างไรก็ตาม คอมพิวเตอร์ไม่สามารถรันภาษา TypeScript ได้ ซึ่งเป็นสาเหตุที่แอปพลิเคชัน TypeScript ส่วนใหญ่ของคุณมี tsconfig.json ไฟล์การกำหนดค่านี้จะเปลี่ยนแปลงลักษณะการทำงานของคอมไพเลอร์ TypeScript และแปลโค้ด TypeScript เป็น JavaScript ซึ่งเบราว์เซอร์สามารถเข้าใจและใช้งานได้

ความแตกต่างหลักระหว่าง TypeScript และแอปพลิเคชัน JavaScript React คือชื่อไฟล์ของอดีต ตัวอย่างเช่น TSX ในขณะที่ตัวหลังคือ.js

จะสร้างโครงการ React ใน typescript ได้อย่างไร?

คุณสามารถสร้างโปรเจ็กต์ TypeScript React ใหม่ได้โดยใช้ไลบรารี create-react-app ในสภาพแวดล้อมของคุณ และใช้คำสั่งนี้:

 npx create-react-app my-app --template typescript

หรือ,

 yarn create react-app my-app --template Typescript

หากคุณมีโปรเจ็กต์ JavaScript React อยู่แล้วและต้องการแปลงเป็น TypeScript คุณสามารถเรียกใช้คำสั่งนี้ได้

 npm install — save typescript @types/node @types/react @types/react-dom @types/jest

หรือ,

 yarn add typescript @types/node @types/react @types/react-dom @types/jest

หลังจากรันคำสั่งแล้ว คุณสามารถเปลี่ยนชื่อไฟล์ .js ทั้งหมดเป็น .tsx รีสตาร์ทเซิร์ฟเวอร์ และเริ่มต้นได้

1. ดักจับแมลง

สัดส่วนของข้อบกพร่องที่เหลืออยู่ที่ TypeScript สามารถแก้ไขได้จะเพิ่มขึ้นเมื่อมีการตั้งค่าจุดบกพร่องที่ตรวจไม่พบด้วยวิธีอื่น แต่ยังช่วยลดจำนวนปัญหาโดยรวมที่ TypeScript ยังสามารถปรับปรุงได้ ดังนั้นในขณะที่สัดส่วนอาจเพิ่มขึ้น จำนวนปัญหาที่พบอาจเปลี่ยนแปลงเล็กน้อย

2. ตัวช่วย IntelliSense ใน IDE

รายการส่วนประกอบ ข้อมูลพารามิเตอร์ ข้อมูลอย่างรวดเร็ว และทั้งคำ เป็นฟังก์ชันบางส่วนที่นำเสนอโดย IntelliSense ซึ่งเป็นเครื่องมือเติมโค้ดให้สมบูรณ์ ด้วยการกดแป้นเพียงไม่กี่ครั้ง คุณสามารถเพิ่มการเรียกไปยังแอตทริบิวต์และวิธีการ บันทึกข้อโต้แย้งที่คุณกำลังพิมพ์ และค้นพบเล็กน้อยเกี่ยวกับซอฟต์แวร์ที่คุณใช้ด้วยความสามารถเหล่านี้

3. พิมพ์ ระบบ

คุณอาจสงสัยว่าจะพิมพ์ตัวแปรหรืออ็อบเจ็กต์ของคุณอย่างไรอย่างเคร่งครัดเพื่อให้โค้ดของโปรเจ็กต์ React TypeScript สามารถเปิดใช้งาน Bug Catcher และ IntelliSense ได้ เพื่อให้กระบวนการ TypeScript Type ดำเนินไปสำหรับคุณในโครงการ Reactive TypeScript มีสามสิ่งที่ต้องคำนึงถึง

1. ประกาศการโต้ตอบสำหรับอ็อบเจ็กต์/อาร์เรย์และประเภทย่อยสำหรับตัวแปรประเภทดั้งเดิม

ในการทำให้ฟิลด์ในออบเจ็กต์เป็นทางเลือก คุณสามารถใช้โอเปอเรเตอร์ มันจะป้องกัน TypeScript ไม่ให้รบกวนคุณเมื่อตรวจสอบรหัสของคุณ

2. เมื่อใดก็ตามที่จำเป็น ให้ประกาศประเภทส่วนประกอบการทำงาน

3. คุณสามารถใช้สิ่งนี้ได้ฟรี การเริ่มต้นคุณสมบัติที่มีค่าทำให้ TypeScript สามารถเลือกคุณภาพสำหรับคุณได้ทันที

5 เหตุผลในการใช้ TypeScript กับ React

TypeScript เป็นที่ต้องการอย่างมากในหมู่โปรแกรมเมอร์ส่วนหน้าในช่วงสองสามปีที่ผ่านมา ปัจจัยสองสามประการที่นำไปสู่ความสำเร็จคือความสามารถในการใช้ซ้ำที่ดีขึ้น ความสม่ำเสมอของโค้ด และการสนับสนุนแพลตฟอร์มในอนาคต นอกจากนี้ ปฏิกิริยาตอบสนองยังคงเป็นกลาง โดยเสนอตัวเลือกให้โปรแกรมเมอร์ใช้ TypeScript หรือ JavaScript ในทางตรงกันข้าม แพลตฟอร์มและไลบรารีอื่น ๆ จำนวนมากใช้ TypeScript เป็นค่าเริ่มต้น

ในโพสต์นี้ เราจะพูดถึง 5 ข้อโต้แย้งที่น่าสนใจ เพื่อสนับสนุนการใช้ TypeScript สำหรับแอป React

1. ส่วนประกอบอ่านและเข้าใจได้ง่าย

ประเภทอุปกรณ์ประกอบฉากนั้นง่ายต่อการกำหนดโดยใช้ TypeScript ซึ่งทำให้โค้ดมีความแม่นยำและเข้าใจมากขึ้น นอกจากนี้ จะมีการรองรับ IntelliSense และการตรวจสอบประเภทสแตติกด้วย

ปัจจัยเหล่านี้ช่วยปรับปรุงกระบวนการพัฒนาและลดโอกาสเกิดข้อบกพร่อง นอกจากนี้ การเพิ่มบันทึกลงในประเภทอุปกรณ์ประกอบฉากยังช่วยให้เข้าใจคำจำกัดความขององค์ประกอบได้ง่ายขึ้น

2. รองรับ JSX ที่ดีขึ้น

ประโยชน์อีกประการของ TypeScript + React ที่ปรับปรุง IntelliSense และการสังเคราะห์โค้ดสำหรับ JSX Bit ทำให้ง่ายต่อการแจกจ่าย อธิบาย และนำส่วนประกอบอิสระมาใช้ซ้ำในโครงการต่างๆ ใช้เพื่อสร้างแอปพลิเคชันที่ปรับขนาดได้ รักษาการออกแบบที่สอดคล้องกัน ส่งเสริมการใช้รหัสซ้ำ ร่วมมือกับผู้อื่น และเร่งการส่งมอบ

3. รองรับ TypeScript โดยค่าเริ่มต้นในไลบรารีที่ใช้ร่วมกัน

สมมติว่าคุณใช้ TypeScript เมื่อสองสามปีก่อน ในกรณีนั้น คุณอาจจำได้ว่ามันน่าหงุดหงิดแค่ไหนที่จะมองหาแนวคิดที่เกิดขึ้นสำหรับไลบรารีของบุคคลที่สาม แต่ตอนนี้ TypeScript กำลังได้รับความนิยมอย่างรวดเร็ว ไลบรารีที่ใช้กันอย่างแพร่หลายมากที่สุดรองรับ Type Definitions นอกจากนี้ Type Definitions ยังได้รับการสนับสนุนโดยสถาปัตยกรรมไลบรารี React ดังนั้นคุณไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้อีกต่อไป

4. การดำเนินการทีละน้อยสำหรับโครงการปัจจุบัน

การเลือก TypeScript จะไม่ใช่การตัดสินใจเปิดหรือปิดง่ายๆ แต่เป็นการเปลี่ยนแปลงแบบก้าวหน้าตามสถานะของโปรแกรมในขณะนั้น ตัวอย่างเช่น สมมติว่าคุณเลือกใช้ TypeScript สำหรับโครงการ React ปัจจุบัน ในสถานการณ์นั้น คุณควรพิจารณาวิธีใช้งาน TypeScript และ JavaScript ควบคู่กัน ในขณะที่ขยายการใช้ TypeScript ไปเรื่อย ๆ นอกจากนี้ คุณอาจตั้งค่าพารามิเตอร์คอมไพเลอร์ TypeScript ให้ค่อย ๆ ย้าย

5. ข้อดีของ IntelliSense และการตรวจสอบประเภทสแตติกโดยทั่วไป

ก. การทดสอบสำหรับประเภทคงที่

ข้อผิดพลาดจะมองเห็นได้เร็วกว่านี้เนื่องจากการตรวจสอบประเภทสแตติก ตัวอย่างที่กล่าวถึงก่อนหน้านี้ตระหนักอย่างเหมาะสมว่าจำเป็นต้องใช้สตริง ไม่ใช่ตัวเลข เป็นอินพุตสำหรับวิธีดูรายละเอียด

ข. IntelliSense ที่ดีกว่า

คุณสามารถวางใจได้ว่า IntelliSense ยังคงถูกต้อง 100% เมื่อการตรวจสอบความถูกต้องของข้อมูลแบบคงที่ของ TypeScript และ IntelliSense ถูกรวมเข้าด้วยกัน

ค. ปรับปรุงการปรับโครงสร้างใหม่

การปรับโครงสร้างใหม่ทำได้ง่ายกว่ามากเมื่อใช้ TypeScript เนื่องจากเรารู้ภาษาที่แม่นยำและตำแหน่งที่จะทำการเปลี่ยนแปลง นอกจากนี้ หากพบปัญหาอย่างรวดเร็ว คุณจะไม่เสี่ยงต่อความเสียหายใดๆ

ง. ความผิดพลาดน้อยลงที่ไม่ได้กำหนดไว้

เนื่องจากล่าม TypeScript ระบุข้อผิดพลาดที่ไม่ได้กำหนดไว้ในช่วงเวลา transpile เพิ่มเติม โอกาสที่จะเกิดขึ้นที่การดำเนินการจะลดลง

อี ปรับปรุงการอ่านและการบำรุงรักษา

ฐานรหัสจะเข้าใจและบำรุงรักษาได้ชัดเจนยิ่งขึ้นโดยใช้คำจำกัดความประเภท คุณอาจปฏิบัติตามหลักการของการพัฒนาเชิงวัตถุและใช้โครงสร้างเช่นอินเทอร์เฟซเพื่อจัดระเบียบโค้ดของคุณในลักษณะที่ลดการมีเพศสัมพันธ์

ฉ. ปัญหาการใช้งาน TypeScript ได้รับการแก้ไขแล้ว

เนื่องจากก่อนหน้านี้เราได้พูดถึงข้อดีของ TypeScript แล้ว มาเรียนรู้เพิ่มเติมเกี่ยวกับข้อเสียของ TypeScript เพื่อให้พร้อมสำหรับการนำไปใช้

กรัม เส้นโค้งเพื่อการเรียนรู้

การเริ่มต้นใช้งาน TypeScript อาจเป็นเรื่องท้าทายเนื่องจากมีช่วงการเรียนรู้ที่สูงชัน โดยเฉพาะอย่างยิ่งหากพนักงานของคุณมีประสบการณ์กับ JavaScript พื้นฐานเท่านั้น แนวทางปฏิบัติที่ดีที่สุดในสถานการณ์นี้คือการนำเอาการปรับตัวแบบก้าวหน้าที่ได้อธิบายไว้ข้างต้นมาใช้

แต่ถ้ากลุ่มนี้มีประสบการณ์กับภาษาที่พิมพ์แบบไดนามิก เช่น Java หรือ C#Understanding Typescript ก็ไม่ยากเกินไป

ชม. คำจำกัดความประเภทหายไปจากไลบรารีบุคคลที่สาม

นี่เป็นสถานการณ์ที่ไม่ปกติเนื่องจาก TypeScript ได้รับความนิยมเพิ่มขึ้น อย่างไรก็ตาม เอกสารอย่างเป็นทางการของ TypeScript มีคำแนะนำที่เป็นประโยชน์หากคุณพบไลบรารี่ที่ไม่มีคำจำกัดความ อ้างสิ่งนี้

ผม. ระยะเวลาการคำนวณ

โดยปกติจะใช้เวลาสองสามมิลลิวินาทีในการสร้างซอร์สโค้ดเนื่องจากต้องผ่านเลเยอร์เพิ่มเติมของการปรากฏ แต่ส่วนใหญ่แล้วสิ่งนี้จะไม่ปรากฏให้เห็น ข้อได้เปรียบในแง่ของความเชี่ยวชาญด้านการพัฒนาและแนวโน้มที่จะเกิดปัญหาน้อยลงจะมีค่ามากกว่าข้อเสียที่ต้องใช้ความพยายามเป็นเวลานาน

ห่อ

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