ค้นหาเว็บไซต์

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 กำลังได้รับความนิยมมากขึ้นในตอนนี้ ดังนั้นคุณอาจต้องพิจารณาเรื่องนั้นด้วย ในที่สุด เบราว์เซอร์ก็จะรองรับการโหลดโมดูลโดยตรง

บทความที่เกี่ยวข้อง