การทำความเข้าใจความแตกต่างระหว่าง typescript และ JavaScript

เผยแพร่แล้ว: 2021-09-21

หนึ่งในคำถามที่พบบ่อยที่ฉันได้รับคือ JavaScript และ Typescript ต่างกันอย่างไร

ลองหา…

ตั้งแต่เวลาที่คุณเริ่มเขียนโค้ด JavaScript (JS) จะเป็นส่วนหนึ่งของโปรเจ็กต์ส่วนหน้าทั้งหมดของคุณ หากคุณคุ้นเคยกับ JS เพียงเล็กน้อย ให้คิดว่า TypeScript เป็น JS บวกกับคุณสมบัติเพิ่มเติมบางอย่างที่ทำให้แอปพลิเคชันของคุณเรียบร้อยและ พิมพ์ ได้ typeScript ได้รับการพัฒนาเป็นโครงการโอเพ่นซอร์สโดย Microsoft เพื่อให้การพัฒนา JS มีประสิทธิภาพมากขึ้นและตรวจจับข้อผิดพลาดในการรวบรวมตั้งแต่เนิ่นๆ

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

JavaScript คืออะไร?

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

ให้เราเขียนโค้ด JS ง่ายๆ และรันบนเบราว์เซอร์:

สร้างไฟล์ example.html และเพิ่มรหัสต่อไปนี้:

 <script> feeling = 'happy'; feeling = 23; </script>

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

HTML ของเราจะมีลักษณะดังนี้:

 <input type = "textbox" id = "howyoufeel">

และสคริปต์จะเป็น:

 feeling = document.getElementById("howyoufeel").value;

JS จะยอมรับค่าใดๆ จากผู้ใช้และส่งต่อไป เว้นแต่เราจะทำการตรวจสอบอย่างชัดแจ้งในสคริปต์ ดังนั้น คุณสามารถใส่อะไรก็ได้เช่น 234, @.#$% ฯลฯ ลงในตัวแปรความรู้สึก

คุณสมบัติของ JavaScript

จากข้างต้น เราสามารถสังเกตคุณลักษณะต่อไปนี้ของ JavaScript:

  • ภาษาสคริปต์ที่พิมพ์ไม่ค่อยดี
  • ใช้สำหรับการเขียนสคริปต์ฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ (พร้อม node.js)
  • ยืดหยุ่นและไดนามิก
  • รองรับเบราว์เซอร์หลักทั้งหมด
  • น้ำหนักเบาและตีความ

หากคุณสนใจที่จะเรียนรู้ JavaScript ให้เชี่ยวชาญ ลองดูหลักสูตร Udemy นี้

TypeScript คืออะไร?

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

TypeScript เป็นประเภทที่มีการ พิมพ์สูง และมีคอมไพเลอร์ที่บ่นหากคุณไม่ได้กำหนด ประเภท ของตัวแปร

ทั้ง JavaScript และ TypeScript เป็นไปตามข้อกำหนด ECMAScript สำหรับภาษาสคริปต์ typescript สามารถเรียกใช้โค้ด JavaScript ทั้งหมดและสนับสนุนไลบรารีทั้งหมด - นั่นคือสาเหตุที่เรียกว่า superset ของ JavaScript

การติดตั้ง TypeScript

ในการรันโค้ดก่อนหน้าของเราใน TypeScript เราจำเป็นต้องติดตั้งคอมไพเลอร์ TypeScript โดยใช้แพ็คเกจ npm (ถ้าคุณมีโหนด js)

 npm install -g typescript

หรือดาวน์โหลดโดยตรงจากหน้าดาวน์โหลดของ Microsoft อย่างเป็นทางการ คุณยังสามารถใช้สนามเด็กเล่น TS เพื่อดูว่าโค้ดถูกแปลจาก ts เป็น js อย่างไร

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

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

มันเรียบร้อยเสมอสำหรับโค้ดที่จะมีคำอธิบายประกอบประเภทสำหรับการบำรุงรักษาและใช้งานง่าย:

 var feeling: string = “happy”;

นั่นไม่ใช่มัน!

TypeScript มีคุณสมบัติอื่นๆ มากมายเพื่อทำให้ชีวิตของนักพัฒนาง่ายขึ้น

คุณสมบัติของ TypeScript

typescript มีชุดคุณลักษณะที่หลากหลาย และทุกรุ่นมาพร้อมกับคุณสมบัติใหม่เพื่อให้การพัฒนาง่ายขึ้นกว่าที่เคย ตัวอย่างเช่น ในรีลีสใหม่ (4.0) คุณลักษณะเพิ่มเติมบางอย่าง ได้แก่ ทูเพิลแบบผันแปร โรงงาน JSX แบบกำหนดเอง การอนุมานคุณสมบัติคลาสจากคอนสตรัคเตอร์ เป็นต้น คุณสมบัติทั่วไปบางประการของ TypeScript ได้แก่:

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

ทำไมเราถึงต้องการ TypeScript? (ข้อดีของ TypeScript เหนือ JavaScript)

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

พิจารณารหัสด้านล่าง:

 var mynum = //get from user; addten(number){ return number + 10; }

เราคาดหวังว่าผลลัพธ์จะเป็นตัวเลขเสมอ แต่ถ้าผู้ใช้ให้ "แกะ" ล่ะ? ผลลัพธ์จะเป็น sheep10 – เป็นการดีที่เราต้องบอกผู้ใช้ว่าการดำเนินการนี้เป็นไปไม่ได้!

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

หมายความว่าเราไม่ต้องการ JavaScript หรือไม่ (ข้อเสียของ TypeScript เหนือ JavaScript)

คุณสามารถคิดว่า TypeScript เป็นส่วนขยายของ JavaScript แต่ไม่สามารถแทนที่ได้อย่างแน่นอน

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

เปรียบเทียบตัวต่อตัว

ตอนนี้เราเข้าใจคุณสมบัติและข้อดีของทั้ง TypeScript และ JavaScript แล้ว ให้เราทำการเปรียบเทียบเพิ่มเติม:

TypeScript JavaScript
ภาษาที่พิมพ์ที่จับข้อผิดพลาดในการรวบรวมตั้งแต่เนิ่นๆ คุณสามารถค้นหาข้อผิดพลาดระหว่างรันไทม์
เหมาะสำหรับโครงการขนาดใหญ่เนื่องจากปรับปรุงการบำรุงรักษาโค้ดและความสามารถในการอ่าน เมื่อมีการเพิ่มโค้ดมากขึ้น ทำให้ยากต่อการทดสอบและดีบั๊ก ดังนั้น JS จึงเหมาะสำหรับโครงการขนาดเล็ก
Superset ของ JS เช่น คุณสมบัติต่างๆ เช่น การวางแนววัตถุ การตรวจสอบประเภท และอื่นๆ ภาษาสคริปต์ที่รองรับการสร้างเนื้อหาเว็บแบบไดนามิก
ต้องติดตั้งคอมไพเลอร์และตั้งค่าคอนฟิก ไม่จำเป็นต้องติดตั้งใดๆ สามารถเขียนโค้ด JS ได้โดยตรงในเบราว์เซอร์โดยใช้ <script> tag
ไฟล์ .ts ทั้งหมดจะถูกแปลงเป็นไฟล์ .js ก่อนดำเนินการ เรียกว่าทรานส์คอมไพล์ นักพัฒนาสามารถรวมไฟล์ .js ไว้ในไฟล์ HTML เพื่อดำเนินการได้โดยตรงโดยใช้แท็ก <src>
ทรงพลังและใช้งานง่ายด้วยคุณสมบัติที่หลากหลาย เช่น โมดูล ยาสามัญ อินเทอร์เฟซ เหมาะสำหรับเว็บแอปพลิเคชันทั่วไปที่ไม่ต้องการคุณสมบัติขั้นสูง
ใช้สำหรับการเขียนสคริปต์ฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ ใช้งานง่ายสำหรับการเขียนสคริปต์ฝั่งไคลเอ็นต์ แต่จะหนักและซับซ้อนสำหรับการเขียนสคริปต์ฝั่งเซิร์ฟเวอร์
ใช้เวลาในการดำเนินการเนื่องจากขั้นตอนการรวบรวม ไม่จำเป็นต้องคอมไพล์ดังนั้นจึงดำเนินการได้เร็วขึ้น
รองรับการพิมพ์ทั้งแบบสแตติกและไดนามิก รองรับเฉพาะการพิมพ์แบบไดนามิก
เราสามารถระบุประเภทคำอธิบายประกอบเป็น:

var feeling: string = “happy”;

 ไม่สามารถระบุคำอธิบายประกอบประเภทได้เนื่องจากเราไม่สามารถกำหนดประเภทได้

บทสรุป

จากมุมมองการเรียนรู้ JavaScript อาจเป็นทางเลือกที่เป็นธรรมชาติของคุณ คุณเปิดไฟล์ พิมพ์บางอย่างในแท็ก <script></script> บันทึกเป็น HTML คุณจะเห็นผลลัพธ์! จากนั้นคุณสามารถสร้างเนื้อหาเพื่อสร้างเนื้อหาที่มีไดนามิกมากขึ้น

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

อย่างไรก็ตาม จากมุมมองด้านอาชีพและการจ่ายเงิน ในฐานะนักพัฒนา TypeScript คุณจะมีความยืดหยุ่นและสบายใจมากขึ้นกับทั้งโครงการ JS และ TS – ดังนั้นสินทรัพย์ที่ดีกว่าในตลาดอย่างแน่นอน โดยทั่วไปแล้ว นักพัฒนา TypeScript จะได้รับเงินระหว่าง $110,000-147k ในขณะที่นักพัฒนา JS จะได้รับเงินประมาณ $63k-$118k ต่อปี

แท็ก:
  • JavaScript