TypeScript กำลังปูทางสู่การเป็นหนึ่งในภาษาโปรแกรมยอดนิยมสำหรับองค์กรสมัยใหม่
TypeScript เป็นตัวยก JavaScript ที่รวบรวมและพิมพ์อย่างเคร่งครัด (สร้างขึ้นจากภาษา JavaScript) ภาษาที่พิมพ์แบบสแตติกนี้พัฒนาและดูแลโดย Microsoft สนับสนุนแนวคิดเชิงวัตถุ เช่น JavaScript
ภาษาโปรแกรมแบบโอเพ่นซอร์สนี้มีกรณีการใช้งานมากมาย เช่น การสร้างเว็บ แอปพลิเคชันขนาดใหญ่ และมือถือ TypeScript สามารถใช้สำหรับการพัฒนาส่วนหน้าและส่วนหลัง นอกจากนี้ยังมีเฟรมเวิร์กและไลบรารีต่างๆ ที่ทำให้การพัฒนาง่ายขึ้นและขยายกรณีการใช้งาน
เหตุใดจึงต้องใช้ TypeScript กับ Node.js บทความนี้จะอธิบายว่าทำไม TypeScript จึงถือว่า “ดีกว่า” JavaScript วิธีติดตั้งโดยใช้ Node.js กำหนดค่าและสร้างโปรแกรมขนาดเล็กโดยใช้ TypeScript และ Node.js
TypeScript พร้อม Node.js: ประโยชน์
- การพิมพ์แบบสแตติกที่เป็นทางเลือก: JavaScript ถูกพิมพ์แบบไดนามิก หมายความว่าประเภทข้อมูลของตัวแปรถูกกำหนดในขณะรันไทม์ ไม่ใช่ระหว่างเวลาคอมไพล์ ในทางกลับกัน TypeScript มีทางเลือกในการพิมพ์แบบสแตติก ซึ่งหมายความว่าเมื่อคุณประกาศตัวแปรแล้ว ตัวแปรจะไม่เปลี่ยนประเภทและจะรับเฉพาะค่าบางอย่างเท่านั้น
- ความสามารถในการคาดเดา: เมื่อจัดการกับ TypeScript มีการรับประกันว่าทุกสิ่งที่คุณกำหนดจะยังคงเหมือนเดิม ตัวอย่างเช่น หากคุณประกาศตัวแปรบางตัวเป็นบูลีน ตัวแปรนั้นจะไม่สามารถเปลี่ยนเป็นสตริงได้เลย ในฐานะนักพัฒนา คุณมั่นใจได้ว่าฟังก์ชันของคุณจะยังคงเหมือนเดิม
- ตรวจพบข้อบกพร่องได้ง่ายตั้งแต่เนิ่นๆ: TypeScript ตรวจจับข้อผิดพลาดประเภทส่วนใหญ่ได้ตั้งแต่เนิ่นๆ ดังนั้นโอกาสที่จะย้ายไปยังเวอร์ชันที่ใช้งานจริงจึงต่ำ ซึ่งช่วยลดเวลาที่วิศวกรใช้ในการทดสอบโค้ดในขั้นตอนต่อๆ ไป
- รองรับ IDE ส่วนใหญ่: TypeScript ทำงานร่วมกับสภาพแวดล้อมการพัฒนาแบบรวม (IDE) ส่วนใหญ่ IDE เหล่านี้ส่วนใหญ่ให้การเติมโค้ดและการเน้นไวยากรณ์ บทความนี้จะใช้ Visual Studio Code ซึ่งเป็นผลิตภัณฑ์อื่นของ Microsoft
- รีแฟคเตอร์โค้ดได้ง่าย: คุณสามารถอัปเดตหรือรีแฟคเตอร์แอป TypeScript ของคุณได้โดยไม่ต้องเปลี่ยนลักษณะการทำงาน การมีเครื่องมือนำทางและ IDE ที่เข้าใจโค้ดของคุณทำให้ง่ายต่อการปรับโครงสร้างโค้ดเบสอย่างง่ายดาย
- ใช้แพ็คเกจที่มีอยู่: คุณไม่จำเป็นต้องสร้างทุกอย่างตั้งแต่เริ่มต้น คุณสามารถใช้แพ็คเกจ NPM ที่มีอยู่กับ TypeScript ภาษานี้ยังมีชุมชนที่แข็งแกร่งที่รักษาและสร้างคำจำกัดความประเภทสำหรับแพ็คเกจยอดนิยม
วิธีใช้ TypeScript กับ Node.js
แม้ว่า TypeScript จะมีข้อดีเหล่านี้ แต่เบราว์เซอร์สมัยใหม่ไม่สามารถอ่านโค้ดในรูปแบบธรรมดาได้ ดังนั้น โค้ด TypeScript จะต้องทรานสไพล์เป็นโค้ด JavaScript ก่อนจึงจะรันบนเบราว์เซอร์ได้ โค้ดที่ได้จะมีฟังก์ชันเหมือนกับโค้ด TypeScript ดั้งเดิมและฟังก์ชันพิเศษที่ไม่มีใน JavaScript
ข้อกำหนดเบื้องต้น
- Node.js: โหนดเป็นสภาพแวดล้อมรันไทม์ข้ามแพลตฟอร์มที่อนุญาตให้เรียกใช้โค้ด JavaScript นอกสภาพแวดล้อมเบราว์เซอร์ คุณสามารถตรวจสอบว่ามีการติดตั้งโหนดในเครื่องของคุณหรือไม่โดยใช้คำสั่งนี้
โหนด -v
มิฉะนั้น คุณสามารถดาวน์โหลด Node.js ได้จากเว็บไซต์อย่างเป็นทางการ เรียกใช้คำสั่งด้านบนอีกครั้งหลังการติดตั้งเพื่อตรวจสอบว่าได้รับการกำหนดค่าอย่างดีหรือไม่
- Node Package Manager: คุณสามารถใช้ NPM หรือ Yarn อดีตจะถูกติดตั้งตามค่าเริ่มต้นเมื่อคุณติดตั้ง Node.js เราจะใช้ NPM เป็นตัวจัดการแพ็คเกจในบทความนี้ ใช้คำสั่งนี้เพื่อตรวจสอบเวอร์ชันปัจจุบัน
npm -v
การติดตั้ง TypeScript ด้วย Node.js
ขั้นตอนที่ 1: ตั้งค่าโฟลเดอร์โครงการ
เราจะเริ่มต้นด้วยการสร้างโฟลเดอร์โครงการสำหรับโครงการ TypeScript คุณสามารถตั้งชื่อโฟลเดอร์นี้ได้ตามต้องการ คุณสามารถใช้คำสั่งเหล่านี้เพื่อเริ่มต้น
mkdir typescript-node.js
cd typescript โหนด
ขั้นตอนที่ 2: เริ่มต้นโครงการ
ใช้ npm เพื่อเริ่มต้นโครงการของคุณโดยใช้คำสั่งนี้
npm เริ่มต้น -y
คำสั่งดังกล่าวจะสร้างไฟล์ package.json แฟล็ก -y ในคำสั่งบอกให้ npm รวมค่าดีฟอลต์ ไฟล์ที่สร้างขึ้นจะมีเอาต์พุตที่คล้ายกัน
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
การกำหนดค่า TypeScript ด้วย Node.js
ขั้นตอนที่ 1: ติดตั้งคอมไพเลอร์ TypeScript
ตอนนี้คุณสามารถติดตั้งคอมไพเลอร์ TypeScript ในโครงการของคุณได้แล้ว เรียกใช้คำสั่งนี้
npm ติดตั้ง –save-dev typescript
ผลลัพธ์ในบรรทัดคำสั่งของคุณจะคล้ายกับสิ่งนี้
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
หมายเหตุ: วิธีการข้างต้นจะติดตั้ง TypeScript ในเครื่องในโฟลเดอร์โครงการที่คุณกำลังทำงานอยู่ คุณสามารถติดตั้ง TypeScript ได้ทั่วโลกในระบบของคุณ คุณจึงไม่ต้องติดตั้งทุกครั้งที่ทำงานในโครงการ ใช้คำสั่งนี้เพื่อติดตั้ง TypeScript ทั่วโลก
npm install -g typescript
คุณสามารถตรวจสอบว่ามีการติดตั้ง TypeScript โดยใช้คำสั่งนี้หรือไม่
tsc -v
ขั้นตอนที่ 2: เพิ่มประเภท Ambient Node.js สำหรับ TypeScript
TypeScript มีหลายประเภท เช่น Implicit, Explicit และ Ambient ประเภทสภาพแวดล้อมจะถูกเพิ่มในขอบเขตการดำเนินการส่วนกลางเสมอ ใช้คำสั่งนี้เพื่อเพิ่ม Ambient Types
npm ติดตั้ง @types/node –save-dev
ขั้นตอนที่ 3: สร้างไฟล์ tsconfig.json
นี่คือไฟล์การกำหนดค่าที่ระบุตัวเลือกการคอมไพล์ TypeScript ทั้งหมด เรียกใช้คำสั่งนี้ที่มาพร้อมกับตัวเลือกการคอมไพล์หลายตัวที่กำหนดไว้
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
สิ่งนี้จะถูกส่งออกที่เทอร์มินัล
ไฟล์ tsconfig.json ซึ่งมีค่าเริ่มต้นและความคิดเห็นบางส่วนจะถูกสร้างขึ้น
ไฟล์ tsconfig.json
นี่คือสิ่งที่เรากำหนดค่า:
- rootDir คือที่ที่ TypeScript จะค้นหาโค้ดของเรา เราได้นำไปที่ /src โฟลเดอร์ที่เราจะเขียนโค้ดของเรา
- โฟลเดอร์ outDir กำหนดตำแหน่งที่จะใส่โค้ดที่คอมไพล์แล้ว รหัสดังกล่าวได้รับการกำหนดค่าให้เก็บไว้ในโฟลเดอร์ build/
ใช้ TypeScript กับ Node.js
ขั้นตอนที่ 1: สร้างโฟลเดอร์ src และไฟล์ index.ts
ตอนนี้เรามีการกำหนดค่าพื้นฐานแล้ว ตอนนี้เราสามารถสร้างแอป TypeScript อย่างง่ายและคอมไพล์ได้แล้ว นามสกุลไฟล์สำหรับไฟล์ TypeScript คือ .ts เรียกใช้คำสั่งเหล่านี้ในขณะที่อยู่ในโฟลเดอร์ที่เราสร้างในขั้นตอนก่อนหน้า
mkdir src
แตะ src/index.ts
ขั้นตอนที่ 2: เพิ่มโค้ดลงในไฟล์ TypeScript (index.ts)
คุณสามารถเริ่มต้นด้วยสิ่งง่ายๆ เช่น
console.log('Hello world!')
ขั้นตอนที่ 3: คอมไพล์โค้ด TypeScript เป็นโค้ด JavaScript
เรียกใช้คำสั่งนี้
npx tsc
คุณสามารถตรวจสอบโฟลเดอร์ build (build/index.js) และคุณจะเห็นว่ามีการสร้าง index.js ด้วยเอาต์พุตนี้
TypeScript ถูกคอมไพล์เป็นโค้ด JavaScript
ขั้นตอนที่ 4: รันโค้ด JavaScript ที่คอมไพล์แล้ว
โปรดจำไว้ว่ารหัส TypeScript ไม่สามารถทำงานบนเบราว์เซอร์ได้ เราจะรันโค้ดใน index.js ในโฟลเดอร์ build เรียกใช้คำสั่งนี้
node build/index.js
นี่จะเป็นผลลัพธ์
ขั้นตอนที่ 5: กำหนดค่า TypeScript เพื่อคอมไพล์อัตโนมัติเป็นโค้ด JavaScript
การคอมไพล์โค้ด TypeScript ด้วยตนเองทุกครั้งที่คุณเปลี่ยนไฟล์ TypeScript อาจทำให้เสียเวลา คุณสามารถติดตั้ง ts-node (รันโค้ด TypeScript ได้โดยตรงโดยไม่ต้องรอให้คอมไพล์) และ nodemon (ตรวจสอบโค้ดของคุณเพื่อดูการเปลี่ยนแปลงและรีสตาร์ทเซิร์ฟเวอร์โดยอัตโนมัติ)
เรียกใช้คำสั่งนี้
npm install --save-dev ts-node nodemon
จากนั้นคุณสามารถไปที่ไฟล์ package.json และเพิ่มสคริปต์นี้
"scripts": {
"start": "ts-node ./src/index.ts"
}
เราสามารถใช้บล็อกรหัสใหม่เพื่อจุดประสงค์ในการสาธิต
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
ลบไฟล์ index.js (/build/index.js) และเรียกใช้ npm start
ผลลัพธ์ของคุณจะคล้ายกับอันนี้
ผลรวมของ 3 หมายเลข
กำหนดค่า TypeScript Linting ด้วย eslint
ขั้นตอนที่ 1: ติดตั้ง eslint
Linting อาจมีประโยชน์หากคุณต้องการรักษาความสอดคล้องของโค้ดและตรวจจับข้อผิดพลาดก่อนรันไทม์ ติดตั้ง eslint โดยใช้คำสั่งนี้
npm install --save-dev eslint
ขั้นตอนที่ 2: เริ่มต้น eslint
คุณสามารถเริ่มต้น eslint ได้โดยใช้คำสั่งนี้
npx eslint --init
กระบวนการเริ่มต้นจะนำคุณผ่านหลายขั้นตอน ใช้ภาพหน้าจอต่อไปนี้เพื่อแนะนำคุณ
เมื่อดำเนินการเสร็จสิ้น คุณจะเห็นไฟล์ชื่อ .eslintrc.js ซึ่งมีเนื้อหาคล้ายกับไฟล์นี้
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
ขั้นตอนที่ 3: เรียกใช้ eslint
รันคำสั่งนี้เพื่อตรวจสอบและลบไฟล์ทั้งหมดที่มีนามสกุล .ts;
npx eslint . --ext .ts
ขั้นตอนที่ 4: อัปเดต package.json
เพิ่มสคริปต์ linting ในไฟล์นี้สำหรับ linting อัตโนมัติ
"scripts": {
"lint": "eslint . --ext .ts",
},
TypeScript กับ Node.js: แนวทางปฏิบัติที่ดีที่สุด
- อัปเดต TypeScript ให้ทันสมัยอยู่เสมอ: นักพัฒนา TypeScript จะออกเวอร์ชันใหม่อยู่เสมอ ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งเวอร์ชันล่าสุดไว้ในเครื่อง/โฟลเดอร์โครงการของคุณ และรับประโยชน์จากคุณสมบัติใหม่และการแก้ไขจุดบกพร่อง
- เปิดใช้งานโหมดเข้มงวด: คุณสามารถตรวจพบข้อผิดพลาดทั่วไปของโปรแกรมในเวลาคอมไพล์ เมื่อคุณเปิดใช้งานโหมดเข้มงวดในไฟล์ tsconfig.json วิธีนี้จะลดเวลาการดีบักของคุณ ซึ่งนำไปสู่ประสิทธิภาพการทำงานที่มากขึ้น
- เปิดใช้งานการตรวจสอบค่า Null ที่เข้มงวด: คุณสามารถตรวจหาค่า Null และข้อผิดพลาดที่ไม่ได้กำหนดทั้งหมดได้ในขณะคอมไพล์ โดยเปิดใช้การตรวจสอบค่า Null ที่เข้มงวดในไฟล์ tsconfig.json
- ใช้โปรแกรมแก้ไขโค้ดที่รองรับ TypeScript: มีโปรแกรมแก้ไขโค้ดมากมาย แนวทางปฏิบัติที่ดีคือการเลือกตัวแก้ไขโค้ด เช่น VS Code, Sublime Text หรือ Atom ที่รองรับ TypeScript ผ่านปลั๊กอิน
- ใช้ประเภทและส่วนต่อประสาน: ด้วยประเภทและส่วนต่อประสาน คุณสามารถกำหนดประเภทแบบกำหนดเองที่คุณสามารถนำมาใช้ใหม่ในโครงการทั้งหมดของคุณได้ วิธีการดังกล่าวจะทำให้โค้ดของคุณเป็นแบบแยกส่วนและง่ายต่อการบำรุงรักษา
ห่อ
ตอนนี้คุณมีโครงสร้างพื้นฐานของแอปที่สร้างด้วย TypeScript บน Node.js ตอนนี้คุณสามารถใช้แพ็คเกจ Node.js ปกติได้ แต่ยังคงเขียนโค้ดของคุณใน TypeScript และเพลิดเพลินไปกับคุณสมบัติพิเศษทั้งหมดที่มาพร้อมกับรุ่นหลัง
หากคุณเพิ่งเริ่มต้นใช้งาน TypeScript ตรวจสอบให้แน่ใจว่าคุณเข้าใจความแตกต่างระหว่าง TypeScript และ JavaScript
