如何让TypeScript理解RequireJS插件的导入路径，例如＆＃34;插件！。/ path / to / foo＆＃34;？

Question

例如，假设我们写

import template from 'hb!./foo.hb'

我们如何使TypeScript理解（或忽略它，因为RequireJS会处理它）？

Answer 1

添加环境模块声明将使TypeScript了解模块，并防止编译器错误。

关于module resolution的TypeScript文档：

  

    

编译器将尝试查找代表导入模块的文件。为此，编译器遵循以下两种策略之一：Classic或Node。

         

如果这不起作用且模块名称是非相对的，则编译器将尝试查找环境模块声明。

  

在您的情况下，您可以添加环境模块定义：

//foo.d.ts
declare module "hb!./foo.hb" {
    export default class template { }
}

然后你可以编译如下：

tsc --module amd .\test.ts .\foo.d.ts

获得此输出：

define(["require", "exports", "hb!./foo.hb"], function (require, exports, foo_hb_1) {
    "use strict";
    console.log(foo_hb_1["default"]);
});

这里重要的是环境模块声明只是告诉TypeScript关于template将是什么样的事情。从编译输出中可以看出，模块加载器实际上将负责实际工作。

<强>更新

可以在模块声明中使用wildcards。所以你可以声明一个模块：

declare module "hb!*" {
    export default class template { }
}

现在您可以导入与hb!*匹配的任何内容：

import template from 'hb!./foo.hb'
import template from 'hb!./bar.hb'
import template from 'hb!./baz.hb'