การเสริมการใช้งานโมดูลใน TypeScript และการจัดการไฟล์ JavaScript ที่ซ้อนกัน

TypeScript เป็นการเพิ่มที่มีคุณค่าสำหรับระบบนิเวศของ JavaScript มานานกว่าสิบปีแล้ว โดยได้รับความนิยมเนื่องจากความสามารถในการให้ความปลอดภัยด้านประเภทกับโค้ด 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 ที่ซ้อนกัน#

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

แพ็กเกจ foo จะส่งออกไฟล์ index.js เป็นจุดเริ่มต้นและยังส่งออกไดเรกทอรี bar ด้วย

เพื่อเสริมคำจำกัดความประเภทสำหรับแพ็กเกจ foo คุณสามารถสร้างไฟล์ foo.d.ts ได้:

อย่างไรก็ตาม หากคุณพยายามนำเข้าไฟล์ baz.js ใน TypeScript คุณจะพบข้อผิดพลาด:

เพื่อเสริมคำจำกัดความประเภทสำหรับไฟล์ baz.js คุณจำเป็นต้องสร้างไฟล์ baz.d.ts แยกกัน:

นี่จะทำให้แน่ใจว่า TypeScript สามารถค้นหาโมดูลและคำจำกัดความประเภทที่เกี่ยวข้องได้:

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

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