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" } }
มาแจกแจงองค์ประกอบสำคัญ:
- เป้าหมาย: ตัวเลือก เป้าหมาย ระบุเวอร์ชันของ JavaScript ที่คอมไพเลอร์ TypeScript ควรแปลงโค้ดของคุณไป โดยค่าเริ่มต้น จะตั้งค่าเป็น ES3 แต่คุณสามารถปรับให้ตรงกับสภาพแวดล้อมเป้าหมายของคุณได้ ตัวอย่างเช่น หากคุณกำลังปรับใช้กับสภาพแวดล้อมแบบเก่า การตั้งค่าเป็น ES5รับประกันความเข้ากันได้
- โมดูล: ตัวเลือก โมดูลจะกำหนดระบบโมดูลที่คุณใช้ เช่น โมดูล CommonJS, AMD หรือ ES6 ซึ่งจะส่งผลต่อวิธีที่โค้ด TypeScript ที่คอมไพล์ของคุณโต้ตอบกับไฟล์ในเครื่องและ
node_modules
- SourceMap: เมื่อ sourceMapถูกตั้งค่าเป็นจริง TypeScript จะสร้างแผนที่ต้นฉบับ ซึ่งช่วยให้คุณสามารถแก้ไขข้อบกพร่องโค้ด TypeScript ของคุณได้แม้หลังจากการคอมไพล์แล้ว
- 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/*"] } }
กรณีการใช้งานสำหรับข้อกำหนดของโครงการที่แตกต่างกัน:
- การพัฒนาเว็บสมัยใหม่:
- เป้าหมาย: 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 มากขึ้น
ในภาษาอังกฤษธรรมดา
ขอขอบคุณสำหรับการเป็นส่วนหนึ่งของชุมชนของเรา! ก่อนที่คุณจะไป:
- อย่าลืม ปรบมือ และ ติดตาม นักเขียน! 👏
- คุณสามารถค้นหาเนื้อหาเพิ่มเติมได้ที่ PlainEnglish.io 🚀
- ลงทะเบียนเพื่อรับ จดหมายข่าวรายสัปดาห์ฟรี ของเรา 🗞️
- ติดตามเราบน Twitter(X), LinkedIn, YouTube และ ความขัดแย้ง.