angularjs - คำว่า module ใน TypeScript หมายความว่าอะไร?
ฉันกำลังพยายามหาคำตอบเกี่ยวกับโมดูล ES6 วิธีการใช้เนมสเปซร่วมกับ Angular และ TypeScript
สมมติว่าโค้ดต่อไปนี้แทน directive ของ Angular ใครรู้ว่าคำว่า module หมายถึงอะไรและคุณสามารถเข้าถึง MyClass ในไฟล์อื่นได้อย่างไร
// file1.ts
module NSpace.Space {
export class MyClass {
constructor() { ... }
...
}
}
ฉันได้พยายามเข้าถึงไฟล์อื่นโดยใช้วิธีนั้นและส่งออกใหม่ อย่างไรก็ตาม
// file2.ts
import {MyClass} from 'file1';
export {MyClass}
ฉันได้รับข้อผิดพลาดนี้: error TS2306: ไฟล์ 'file.ts' ไม่ใช่โมดูล
คำถามของฉันคือ:
- ทำไมฉันถึงได้รับสิ่งนี้?
- คีย์เวิร์ด
moduleนี้คืออะไร? - เราสร้างโมดูล ES6 โดยอิงจากโครงสร้างไดเร็กทอรีเท่านั้นหรือสามารถใช้สัญลักษณ์นี้ได้จริง ๆ ?
module Space.Space1.Space2 ...
จากสิ่งที่ฉันได้อ่านและประสบการณ์จนถึงตอนนี้ ดูเหมือนว่าโมดูล ES6 จะถูกกำหนดตามโครงสร้างไฟล์ นั่นเป็นเหตุผลที่ฉันได้รับข้อผิดพลาดนี้
ฉันไม่ได้เขียนโค้ดนี้ นั่นคือเหตุผลที่ฉันถาม นอกจากนี้ อาจเป็นประโยชน์ที่จะบอกว่าฉันกำลังใช้ System.JS สำหรับการนำเข้า
คำตอบ #1
คีย์เวิร์ด module ใน TypeScript ทำให้เกิดความสับสนเล็กน้อย ดังนั้นมันจะถูกเปลี่ยนชื่อเป็น namespace
แทนที่จะใช้เนมสเปซ คุณสามารถจัดระเบียบโค้ดของคุณโดยใช้ไฟล์/ระบบไฟล์ (ซึ่งหมายความว่าตำแหน่งไฟล์จริงจะตรงกับเนมสเปซที่มองเห็น นี่คือวิธีที่ "โมดูลภายนอก" (TypeScript) ทำงาน - และยังเป็นวิธีที่โมดูล ECMAScript 2015 ทำงานด้วย
ดังนั้นด้วยการปรับแต่งอย่างรวดเร็ว คุณจะมี:
// file1.ts
export class MyClass {
constructor() { ... }
...
}
และจากนั้นสิ่งนี้จะใช้ได้:
import {MyClass} from 'file1';
หากคุณคอมไพล์โดยกำหนดเป้าหมายเป็น ES6 คุณจะสังเกตได้ว่าบรรทัดโค้ดนี้ไม่ต้องแปลงใด ๆ เพราะมันตรงตามมาตรฐานสำหรับการนำเข้ามอดูล หากคุณกำหนดเป้าหมายเป็น ES5 หรือต่ำกว่า TypeScript จะทำการแปลงคำสั่งนี้ให้คุณ (คุณสามารถเลือกการแปลงโดยใช้แฟล็ก --module)
ฉันมักจะใช้ตัวเลือกการคอมไพล์แบบ UMD ซึ่งหมายความว่าเอาต์พุตจะสามารถทำงานในเว็บเบราว์เซอร์ (พร้อม RequireJS) หรือบน Node ได้ จริงๆ แล้ว System JS กำลังได้รับความนิยมมากขึ้นในตอนนี้ ดังนั้นคุณอาจต้องพิจารณาเรื่องนั้นด้วย ในที่สุด เบราว์เซอร์ก็จะรองรับการโหลดโมดูลโดยตรง
