วิธีตั้งค่าโปรเจ็กต์ TypeScript + Node.js

คำแนะนำสั้นๆ นี้จะแนะนำคุณเกี่ยวกับการตั้งค่า TypeScript ด้วยโปรเจ็กต์ Node.js ใหม่ (หรือที่มีอยู่แล้ว!)

ข้อกำหนดเบื้องต้น:

• คุณน่าจะคุ้นเคยกับ Node และ JavaScript มาบ้างแล้ว
• คุณควรติดตั้งตัวแก้ไขโค้ด (ควรเป็น VSCode)
• คู่มือนี้อนุมานว่าคุณใช้ Linux, MacOS หรือระบบปฏิบัติการอื่นๆ ที่คล้าย UNIX
• คู่มือนี้ยังอนุมานว่าคุณกำลังใช้ npm เป็นตัวจัดการแพ็คเกจของคุณ (อย่าลังเลที่จะใช้ Yarn, pnpm หรือตัวจัดการแพ็คเกจที่คุณต้องการแทน)

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

• TypeScript เป็น superset ของ JavaScript ซึ่งให้ตัวเลือกการพิมพ์แบบสแตติกแก่เรา มันถูกสร้างขึ้นโดย Microsoft และเป็นเนื้อหาที่ดีเพียงอย่างเดียวที่พวกเขาเปิดตัวใน VS Code ตั้งแต่นั้นเป็นต้นมา (ล้อเล่น )
• ทำหน้าที่เป็นเอกสารประกอบและลดค่าใช้จ่ายในการเริ่มต้นใช้งานและปรับปรุงประสบการณ์ของนักพัฒนาซอฟต์แวร์
• ช่วยให้เราสามารถระบุจุดบกพร่อง/ปัญหาได้อย่างรวดเร็ว ซึ่งจะเป็นการเพิ่มคุณภาพของซอฟต์แวร์โดยรวม
• อ่านคู่มือ TypeScriptสำหรับรายละเอียดเพิ่มเติม

1. สร้างไดเร็กทอรีและไปที่โฟลเดอร์ที่สร้างขึ้นใหม่

mkdir typescript-example
cd typescript-example

npm init -y

npm install typescript --save-dev

npm install @types/node --save-dev

5. สร้าง tsconfig.json ของคุณ

npx tsc --init

6. คอมไพล์โค้ดของคุณโดยใช้คำสั่ง tsc โดยใช้Node package executer (npx )

npx tsc

ปรับปรุงประสบการณ์นักพัฒนาในพื้นที่ของคุณ

1. การโหลดซ้ำอย่างรวดเร็ว — สิ่งนี้จะช่วยปรับปรุง dev ของคุณอย่างมาก เนื่องจากจะทำให้แอปพลิเคชันของคุณสามารถโหลดซ้ำได้ทันทีเมื่อมีการเปลี่ยนแปลงจริง เราสามารถตั้งค่านี้ผ่าน Nodemon ในแอพ Node.js ของเรา

npm install --save-dev ts-node nodemon

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

• ใช้ linter: ใช้บางอย่างเช่นESLint นี่คือเครื่องมือวิเคราะห์โค้ดแบบสแตติกที่ช่วยให้เราสามารถกำหนดมาตรฐานสำหรับโค้ดของเราได้ เราสามารถใช้สิ่งนี้เพื่อบังคับใช้มาตรฐานการเข้ารหัสและรูปแบบสำหรับโค้ดเบสของเรา
• แนะนำเครื่องมือลบลึก: Rimrafเพื่อลบไฟล์ที่ไม่ต้องการก่อนที่จะส่งไปยังการผลิต
• เพิ่มบันเดิลโมดูลสแตติก: ใช้ webpack (หรือ turbopack) นี่อาจจะเกินความจำเป็นสำหรับโครงการขนาดเล็ก — แต่เมื่อแอปพลิเคชันของคุณปรับขนาด คุณจะต้องมีกลไกในการจัดการ JS/TS ทั้งหมดของคุณ
• ระบบอัตโนมัติ — คุณจะทำให้ธุรกิจของคุณเป็นอัตโนมัติได้อย่างไร