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

นำเข้ามอดูลแบบไดนามิกใน TypeScript


วิธีการของ TypeScript ในการโหลดโมดูลแบบไดนามิก (เมื่อทราบเส้นทางของโมดูลในขณะรันไทม์) คืออะไร? ผมได้ลองใช้วิธีนี้แล้ว:

var x = "someplace"
import a = module(x)

แต่ดูเหมือนว่าคอมไพเลอร์ TypeScript จะต้องการเห็น path เป็นสตริงใน import/module เวลาแปลโค้ด:

tsc test.ts 
/tmp/test.ts(2,19): error TS1003: Identifier expected.
/tmp/test.ts(2,20): error TS1005: ';' expected.

ฉันรู้ว่าฉันสามารถใช้ RequireJS ได้โดยตรงเป็นตัวอย่าง (ถ้าฉันใช้รูปแบบโมดูล amd) แต่ฉันรู้สึกว่านั่นไม่ถูกต้องสำหรับฉัน - มันเป็นวิธีแก้ปัญหาสำหรับไลบรารีหนึ่งเท่านั้น

คำตอบ #1

การนำเข้าแบบไดนามิกของข้อเสนอ ES ได้รับการสนับสนุนตั้งแต่ TypeScript 2.4 เอกสารถูกจัดเก็บไว้ที่นี่

ฟังก์ชัน import เป็นแบบอะซิงโครนัสและส่งกลับ Promise

var x = 'someplace';
import(x).then((a) => {
  // `a` is imported and can be used here
});

หรือใช้ async/await:

async function run(x) {
  const a = await import(x);
  // `a` is imported and can be used here
}

คำตอบ #2

คุณต้องระบุสตริงแบบกำหนดค่าโดยตรง ตัวแปรจะใช้ไม่ได้

อัปเดต

ตอนนี้ JavaScript มีการนำเข้าที่ไดนามิกแล้ว ดังนั้นคุณสามารถทำ import(x) :https://developers.google.com/web/updates/2017/11/dynamic-import

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

const x = 'someplace';
import(x).then((a) => { // TypeScript knows that `x` is 'someplace' and will infer the type of `a` correctly
}); 

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