เรียนรู้พื้นฐานของการเสริมการใช้งานโมดูลใน TypeScript และวิธีการเพิ่มคำจำกัดความประเภทสำหรับไฟล์ JavaScript ที่ซ้อนกัน
TypeScript เป็นการเพิ่มที่มีคุณค่าสำหรับระบบนิเวศของ JavaScript มานานกว่าสิบปีแล้ว โดยได้รับความนิยมเนื่องจากความสามารถในการให้ความปลอดภัยด้านประเภทกับโค้ด JavaScript
เพื่อความเข้ากันได้ย้อนหลังและความยืดหยุ่น TypeScript อนุญาตให้นักพัฒนาแพ็กเกจสามารถเพิ่มคำจำกัดความประเภทสำหรับแพ็กเกจ JavaScript ของพวกเขา คำจำกัดความประเภทเหล่านี้มักจะถูกเก็บไว้ในที่เก็บ "DefinitelyTyped" คุณสามารถใช้ขอบเขต @types เพื่อติดตั้งคำจำกัดความประเภทเหล่านี้ได้ ตัวอย่างเช่น @types/react เป็นคำจำกัดความประเภทสำหรับแพ็กเกจ React
หลังจากติดตั้งคำจำกัดความประเภทเหล่านี้แล้ว คุณสามารถใช้แพ็กเกจได้อย่างมั่นใจในความปลอดภัยด้านประเภท นี่คือตัวอย่างการกำหนดส่วนประกอบ React ด้วยความปลอดภัยด้านประเภท:
ในขณะที่แพ็กเกจ JavaScript ที่เป็นที่นิยมส่วนใหญ่มีคำจำกัดความประเภทพร้อมใช้งานในขอบเขต @types แต่บางแพ็กเกจอาจขาดคำจำกัดความประเภทหรือมีคำจำกัดความที่ล้าสมัย ในกรณีเช่นนี้ TypeScript มีฟีเจอร์ที่มีประสิทธิภาพที่เรียกว่า "module augmentation" เพื่อเพิ่มคำจำกัดความประเภทสำหรับแพ็กเกจเหล่านี้ มาดูตัวอย่างกัน:
ตอนนี้คุณสามารถใช้คำจำกัดความประเภทที่ได้รับการเสริมนี้ในโค้ดของคุณ:
การเสริมโมดูลไม่เพียงแค่อนุญาตให้คุณเพิ่มคำจำกัดความประเภทสำหรับแพ็กเกจ แต่ยังขยายคำจำกัดความประเภทที่มีอยู่เดิมด้วย ตัวอย่างเช่น คุณสามารถเพิ่มคุณสมบัติใหม่ให้กับวัตถุ window:
และใช้งานในโค้ดของคุณ:
ในโพสต์ก่อนหน้านี้, เราได้พูดถึงปัญหาประเภทในไลบรารี React Router และเราต้องเอาชนะผลกระทบโดยการขยายและเสริมประเภทที่มีอยู่ผ่านไฟล์การประกาศที่กำหนดเอง
จำไว้ว่าการใช้การเสริมโมดูล จำเป็นต้องตรวจสอบความถูกต้องของคำจำกัดความประเภทของคุณอย่างใกล้ชิดกับโค้ด JavaScript ไม่เช่นนั้นอาจเกิดข้อผิดพลาดในขณะรันไทม์ได้ ในตัวอย่างด้านบน คุณสมบัติ window.foo จะต้องเป็นสตริงที่มีอยู่ในวัตถุ window
บางครั้งคุณอาจพบสคริปต์ที่สร้างตัวแปรทั่วโลก และคุณอาจต้องการเพิ่มคำจำกัดความประเภทสำหรับตัวแปรเหล่านี้เพื่อใช้ในโค้ด TypeScript ของคุณ ตัวอย่างเช่น หากคุณมีสคริปต์ที่สร้างตัวแปรทั่วโลกที่เรียกว่า __DEV__:
คุณสามารถเพิ่มคำจำกัดความประเภทสำหรับตัวแปรทั่วโลกนี้ได้ดังนี้:
ตอนนี้คุณสามารถใช้งานในโค้ด TypeScript ของคุณ:
โดยการผสมผสานการเสริมโมดูลและการเสริมทั่วโลก คุณสามารถขยายคำจำกัดความประเภทสำหรับโปรโตไทป์ JavaScript ได้ แต่โดยทั่วไปไม่แนะนำให้ทำเพราะอาจก่อให้เกิดมลพิษในขอบเขตทั่วโลกได้
พลังของการเสริมโมดูล อนุญาตให้เกิดการขยายเช่นนี้ได้ แต่ควรใช้อย่างระมัดระวังเพื่อป้องกันมลพิษในขอบเขตทั่วโลก
ในตัวอย่างที่กล่าวถึงก่อนหน้านี้ เราได้ถือว่าการนำเข้าไฟล์อาจถูกแก้ไขผ่านไฟล์เริ่มต้นของแพ็กเกจ อย่างไรก็ตาม บางแพ็กเกจอาจมีการส่งออกไฟล์ JavaScript ที่ซ้อนกันโดยไม่มีคำจำกัดความประเภทที่ตรงกัน พิจารณาแพ็กเกจที่เรียกว่า foo ที่มีโครงสร้างดังนี้:
แพ็กเกจ foo จะส่งออกไฟล์ index.js เป็นจุดเริ่มต้นและยังส่งออกไดเรกทอรี bar ด้วย
เพื่อเสริมคำจำกัดความประเภทสำหรับแพ็กเกจ foo คุณสามารถสร้างไฟล์ foo.d.ts ได้:
อย่างไรก็ตาม หากคุณพยายามนำเข้าไฟล์ baz.js ใน TypeScript คุณจะพบข้อผิดพลาด:
เพื่อเสริมคำจำกัดความประเภทสำหรับไฟล์ baz.js คุณจำเป็นต้องสร้างไฟล์ baz.d.ts แยกกัน:
นี่จะทำให้แน่ใจว่า TypeScript สามารถค้นหาโมดูลและคำจำกัดความประเภทที่เกี่ยวข้องได้:
เพื่อให้การจัดระเบียบคำจำกัดความประเภทเป็นไปด้วยดี คุณสามารถเลียนแบบโครงสร้างของแพ็กเกจในไฟล์คำจำกัดความประเภทของคุณ:
วิธีการนี้จะทำให้โค้ด TypeScript ของคุณมีโครงสร้างและปลอดภัยในประเภท แม้เมื่อจัดการกับไฟล์ JavaScript ที่ซ้อนกัน