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

การคอมไพล์ TypeScript เป็น JavaScript ช่วยให้เราสามารถใช้ประโยชน์จากข้อดีเหล่านี้ ในขณะเดียวกันก็รับประกันความเข้ากันได้กับสภาพแวดล้อมต่างๆ เช่น Node.js เบราว์เซอร์ ฯลฯ

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

ทำความเข้าใจกับการรวบรวม TypeScript:

  • การคอมไพล์ TypeScript เป็นกระบวนการแปลงโค้ด TypeScript เป็น JavaScript ธรรมดา
  • นี่เป็นสิ่งจำเป็นเนื่องจากเบราว์เซอร์และกลไก Node.js ไม่สามารถเรียกใช้ TypeScript ได้โดยตรง
  • TypeScript ใช้ไฟล์กำหนดค่า — tsconfig.json — ที่อยู่ในไดเร็กทอรีรากของโปรเจ็กต์ของคุณ
  • ไฟล์การกำหนดค่านี้มีตัวเลือกคอมไพเลอร์ที่สั่งให้คอมไพเลอร์ TypeScript เกี่ยวกับวิธีการแปลงโค้ด
  • tsc — เป็นคำสั่งที่ใช้ในการคอมไพล์ TypeScript เป็น JavaScript และเป็นไปตามการตั้งค่าการกำหนดค่าที่อธิบายไว้ใน tsconfig.json

ตัวอย่าง tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "out"
  }
}

มาแจกแจงองค์ประกอบสำคัญ:

  1. เป้าหมาย: ตัวเลือก เป้าหมาย ระบุเวอร์ชันของ JavaScript ที่คอมไพเลอร์ TypeScript ควรแปลงโค้ดของคุณไป โดยค่าเริ่มต้น จะตั้งค่าเป็น ES3 แต่คุณสามารถปรับให้ตรงกับสภาพแวดล้อมเป้าหมายของคุณได้ ตัวอย่างเช่น หากคุณกำลังปรับใช้กับสภาพแวดล้อมแบบเก่า การตั้งค่าเป็น ES5รับประกันความเข้ากันได้
  2. โมดูล: ตัวเลือก โมดูลจะกำหนดระบบโมดูลที่คุณใช้ เช่น โมดูล CommonJS, AMD หรือ ES6 ซึ่งจะส่งผลต่อวิธีที่โค้ด TypeScript ที่คอมไพล์ของคุณโต้ตอบกับไฟล์ในเครื่องและ node_modules
  3. SourceMap: เมื่อ sourceMapถูกตั้งค่าเป็นจริง TypeScript จะสร้างแผนที่ต้นฉบับ ซึ่งช่วยให้คุณสามารถแก้ไขข้อบกพร่องโค้ด TypeScript ของคุณได้แม้หลังจากการคอมไพล์แล้ว
  4. OutDir: ตัวเลือก outDirระบุไดเรกทอรีที่จะวางไฟล์ JavaScript ที่คอมไพล์แล้ว

การตรวจสอบประเภท:

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

การแปลง TypeScript เป็น JavaScript:

เมื่อการตรวจสอบประเภทสำเร็จ TypeScript จะแปลงโค้ดเป็น JavaScript ตามเป้าหมายที่ระบุใน tsconfig.json รหัส JavaScript ที่ได้จะถูกจัดเก็บไว้ในไดเร็กทอรีที่ระบุโดย outDir ในไฟล์การกำหนดค่า

การดำเนินการเอาท์พุต:

ไฟล์ JavaScript ที่คอมไพล์แล้วพร้อมสำหรับการปรับใช้ในสภาพแวดล้อมเป้าหมายของคุณ ไม่ว่าจะเป็นเว็บเบราว์เซอร์หรือรันไทม์ Node.js

โมดูลกับเป้าหมาย:

เป้าหมาย:

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

โมดูล:

  • ตัวเลือก โมดูลกำหนดระบบโมดูลที่โค้ดที่คอมไพล์จะใช้ ซึ่งจะส่งผลต่อไฟล์ในเครื่องและวิธีที่สามารถอ่านบางอย่างจาก node_modules
  • ค่าทั่วไป ได้แก่ none, commonjs, amd, system และ es6 โดยค่าเริ่มต้นจะเป็น es6หาก เป้าหมายคือ es6,และ commonjs สำหรับเป้าหมายอื่นๆ ทั้งหมด

ลิบ:

ตัวเลือก lib อนุญาตให้คุณใช้คลาสจากไลบรารีมาตรฐาน ES ในแหล่ง TypeScript ของคุณ ด้วยการระบุไลบรารีเช่น es6หรือ dom คุณสามารถใช้ประโยชน์จากอินเทอร์เฟซของไลบรารีเหล่านี้ในโค้ดของคุณได้ ตัวอย่างเช่น โดยใช้ dom คุณสามารถใช้ Array.from ใน es6 ได้

ค่าเริ่มต้นสำหรับ es5: dom, es5, ScriptHost
ค่าเริ่มต้นสำหรับ es6: dom, es6, DOM.Iterable, ScriptHost

ความละเอียดของโมดูล:

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

ตัวอย่าง:

ความละเอียดของโมดูลสัมพัทธ์:

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "jquery": ["libs/jquery"]
  }
}

การใช้รูปแบบสำหรับความละเอียดของโมดูลที่ไม่สัมพันธ์กัน:

"compilerOptions": {
  "baseUrl": ".",
  "paths": {
    "*": ["libs/*"]
  }
}

กรณีการใช้งานสำหรับข้อกำหนดของโครงการที่แตกต่างกัน:

  1. การพัฒนาเว็บสมัยใหม่:
  • เป้าหมาย: es2018 หรือสูงกว่า (es9)
  • โมดูล: es2020 หรือสูงกว่า (es11)
  • เหมาะสำหรับแอปพลิเคชันที่กำหนดเป้าหมายคุณสมบัติ ECMAScript ล่าสุดและระบบโมดูลสมัยใหม่ เช่น โมดูล ES (ESM)

<แข็งแกร่ง>2. การคอมไพล์ลงสำหรับเบราว์เซอร์รุ่นเก่า:

  • เป้าหมาย: es5
  • โมดูล: commonjs
  • เหมาะสำหรับการรองรับเบราว์เซอร์รุ่นเก่าหรือสภาพแวดล้อมที่ขาดการสนับสนุน ES6+ สิ่งนี้ทำให้มั่นใจได้ถึงความเข้ากันได้กับเบราว์เซอร์และเวอร์ชัน node.js ที่หลากหลาย

<แข็งแกร่ง>3. การสร้างโมดูล Node.js:

  • เป้าหมาย: es6 หรือสูงกว่า (โมดูลฝั่งไคลเอ็นต์)
  • โมดูล: commonjs (จำเป็นสำหรับโมดูล Node.js / โมดูลฝั่งเซิร์ฟเวอร์)
  • เหมาะสำหรับการสร้างโมดูล Node.js ด้วยฟีเจอร์ ECMAScript สมัยใหม่ แต่ยังคงใช้ระบบโมดูล commonjs (จำเป็นสำหรับโมดูล Node.js) สิ่งนี้ทำให้มั่นใจได้ถึงความเข้ากันได้
  • เพื่อให้เข้ากันได้กับทั้งเบราว์เซอร์และ Node.js — ให้ใช้โมดูล umd(คำจำกัดความโมดูลสากล)

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

การทำความเข้าใจตัวเลือกการกำหนดค่าและผลกระทบที่มีต่อโค้ดของคุณจะช่วยให้คุณมีความเชี่ยวชาญในการพัฒนา TypeScript มากขึ้น

ในภาษาอังกฤษธรรมดา

ขอขอบคุณสำหรับการเป็นส่วนหนึ่งของชุมชนของเรา! ก่อนที่คุณจะไป: