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

การประกาศโมดูลแบบวายลด์การ์ดไม่ทำงานใน TypeScript 2.x.x ทำไม?


ทำไมการประกาศเมธอดนี้: declare module "*!text" {} ถึงใช้งานไม่ได้?

เป้าหมาย - การใช้เนื้อหาของไฟล์ในตัวแปร:

import layout = require("/js/views/layouts/wnd.html!text");

ประมาณนั้น:

import layout from "/js/views/layouts/wnd.html!text";

ถ้าเราทำการประกาศดังนี้: declare module "/js/views/layouts/wnd.html!text" {} - ทุกอย่างทำงานได้ แต่ถ้าใช้วิธีนี้ "*!text" ผมจะได้ข้อผิดพลาด cannot find module ผมจะบังคับให้เทมเพลตนี้ทำงานได้อย่างไร: "*!text"?

การอ้างอิงถึงตัวอย่างของเอกสาร

ฉันใช้ systemJS พร้อมปลั๊กอินในการดาวน์โหลดไฟล์ข้อความ

เวอร์ชัน Typescript - 2.0.6

คำตอบ #1

Typescript จะไม่ลบกฎพิเศษนี้ "!text" ในขณะที่แปลงเป็นไฟล์ js ด้วยสาเหตุบางประการ (แม้ว่าจะตั้งค่า moduleResolution เป็น "node")

ดังนั้นจึงทำให้การระบุเส้นทางไฟล์ล้มเหลว (ทดสอบกับ TypeScript v2.2.1, Node.js v6.9.5)

เอกสารจำเป็นต้องได้รับการปรับปรุง

นี่คือเวอร์ชันที่ใช้งานได้โดยการเพิ่มนามสกุลไฟล์ที่กำหนดเอง:

index.d.ts

declare module "*.html" {
    const value: string;
    export default value;
}

ขยายการขยายโมดูล nodejs เพื่ออ่าน *.html เป็นข้อความบริสุทธิ์

require.extensions['.html'] = function(module, filename) {
    module.exports = fs.readFileSync(filename, 'utf8');
}

และจากตัวอย่างของคุณ มันควรทำงานในลักษณะนี้:

import * as layout from "./js/views/layouts/wnd.html";
console.log(layout);