使用TypeScript与Browserify处理Handlebars模板

Question

我正在将一个项目迁移到TypeScript。该项目结合了Handlebars和Browserify，并使用hbsfy来处理模板。这意味着我有类似于以下的JavaScript代码：

var photosTemplate = require('./views/photos.hbs');

这需要在一个名为“photos.hbs”的模板文件中调用，该文件位于一个名为“views”的文件夹中，其内容如下：

{{#each this}}
    <span class="title">{{title}}</span>
{{/each}}

有一个 gulpfile 作为构建步骤的一部分运行，将模板转换为可用的函数。这意味着在我的消费文件中，我可以编写像这样使用函数模板的代码：

var newHtml = photosTemplate([{title: "test title 1"}, {title: "test title 2"}]);

问题是，如何使其适用于TypeScript？我已经将我的var替换为import并使用--module commonjs编译器标志：

import photosTemplate = require('./views/photos.hbs');

在这一点上，我遇到了错误：

错误 TS2307：找不到外部模块"./views/photos.hbs"。

你可能会认为这很公平。所以我创建了一个与之相伴的photos.hbs.d.ts文件，看起来像这样：

interface photos {
    (context: any, options?: any): string;
}

export = photos;

这是一个简单的界面，展示了照片模板的使用方式。然而，使用这个界面时编译器会报错：

error TS2304: Cannot find name 'photosTemplate'.

这里有一个类似的问题：https://dev59.com/64Dba4cB1Zd3GeqPAy_c#23957928 我认为问题出在我的 photos.hbs.d.ts 文件上，但我不确定哪里出了问题。我感觉定义中缺少了关于外部模块的一些非常简单的东西，但就是想不出来是什么……

- John Reilly

Answer 1

这对我有效...

photos.hbs.d.ts

declare function photos (context: any, options?: any): string;

export = photos; 

使用它:

import photosTemplate = require('./views/photos.hbs');

photosTemplate("");

原因在于你想要实际调用函数，而不仅仅是定义其签名。

你也可以这样做：

interface Photos {
    (context: any, options?: any): string;
}

declare var photos: Photos;

export = photos;

- Fenton

---

这就是为什么我喜欢你的原因，Steve :-) 你知道当你看着某个问题太久，无法解决它，只需要离开一会儿再回来时的那种感觉吗？完全就是那样。谢谢，伙计！ - John Reilly