การติดตั้งภาษา TypeScript

18 July 2021

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

  • การติดตั้ง Node.js
  • การติดตั้ง Visual Studio Code
  • การติดตั้ง TypeScript
  • การเขียนโปรแกรมในภาษา TypeScript

การติดตั้ง Node.js

TypeScript เป็นแพ็กเกจหรือโปรแกรมในรูปแบบ Command line ที่ถูกเผยแพร่อยู่บน NPM สำหรับใช้งานบน Node.js เนื่องจากบทเรียนนี้เป็นการเขียนภาษา TypeScript บน Node.js ดังนั้นเราจะใช้วิธีนี้ในการติดตั้ง นั่นหมายความว่าคุณจะต้องติิดตั้งโปรแกรม Node.js ให้พร้อมก่อน สำหรับการติดตั้ง Node.js นั้นสามารถดูได้ที่ การติดตั้ง Node.js

การติดตั้ง Visual Studio Code

แม้ว่าคุณจะสามารถใช้งาน Text editor ใดๆ สำหรับเขียนโปรแกรมภาษา TypeScript แต่เราขอแนะนำให้ใช้โปรแกรม Visual Studio Code เนื่องจากมันเป็นโปรแกรมที่สนับสนุนการเขีียนโปรแกรมด้วยภาษา TypeScript และใช้งานได้ดี หากยังไม่ได้ติงตั้ง คุณสามารถดูวิธีการติดตั้ง Visual Studio Code ได้ที่ การติดตั้งและใช้งานโปรแกรม Visual Studio Code

การติดตั้ง TypeScript

TypeScript นั้นเป็นโปรแกรมแบบ CLI ซึ่งเป็นแพ็กเกจที่เผยแพร่บน NPM ที่เราสามารถติดตั้งได้ผ่านคำสั่ง npm ซึ่งคำสั่งนี้มาพร้อมกับตอนที่คุณติดตั้ง Node.js ไปในขั้นตอนก่อนหน้า เพื่อติดตั้ง TypeScript ให้เปิด Command line บนคอมพิวเตอร์ของคุณขึ้นมา และพิมพ์คำสั่งต่อไปนี้ลงไป แล้วกด Enter

npm install -g typescript

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

npm install -g [email protected]

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

นี่เป็นผลลัพธ์ที่แสดงบน Console ในระหว่างที่ติดตั้งและจนมันเสร็จสิ้น

C:\Users\Metin>npm install -g typescript
C:\Users\Metin\AppData\Roaming\npm\tsserver -> C:\Users\Metin\AppData\Roaming\npm\node_modules\typescript\bin\tsserver
C:\Users\Metin\AppData\Roaming\npm\tsc -> C:\Users\Metin\AppData\Roaming\npm\node_modules\typescript\bin\tsc
+ [email protected]
added 1 package from 1 contributor in 4.151s

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

จากนั้นเป็นการตรวจสอบการติดตั้งว่ามันเรียบร้อยดีหรือไม่ พิมพ์คำสั่งต่อไปนี้ลงบน Command line

tsc -v

นี่เป็นผลลัพธ์จากการรันคำสั่ง

Version 4.3.4

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

การเขียนโปรแกรมในภาษา TypeScript

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

hello.ts
let a: number = 2;
let b: number = 3;

console.log("Hello World!");
console.log(`a + b = ${a + b}`);

จากนั้นบันทึกไฟล์และคอมไพเลอร์โปรแกรมด้วยคำสั่งต่อไปนี้

tsc hello.ts

เมื่อการคอมไพล์เสร็จสิ้น เราจะได้รับไฟล์ hello.js ที่จะถูกสร้างขึ้นมาในโฟล์เดอร์เดียวกัน ซึ่งภายในไฟล์มีเนื้อหาดังต่อไปนี้

hello.js
var a = 2;
var b = 3;
console.log("Hello World!");
console.log("a + b = " + (a + b));

นี่เป็นไฟล์ของโปรแกรมภาษา JavaScript ที่ถูกคอมไพเลอร์มาจากโค้ดของภาษา TypeScript ที่เราเขียนขึ้นก่อนหน้า จากนั้นเราสามารถรันโปรแกรมด้วยไฟล์นี้โดยพิมพ์คำสั่ง

node hello.js

นี่เป็นผลลัพธ์การทำงานของโปรแกรม

Hello World!
a + b = 5

นั่นหมายความว่าเราได้เขียนโปรแกรมในภาษา TypeScript คอมไพล์ และรันมันได้สำเร็จแล้ว

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

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

บทความนี้เป็นประโยชน์หรือไม่? Yes · No