Handlebars 模板和 Browserify 与 TypeScript

Question

我正在将一个项目移植到 TypeScript。该项目结合了 Handlebars 和 Browserify 以及 hbsfy 来处理模板。这意味着我有这样的 JavaScript 代码：

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

这需要一个名为“photos.hbs”的模板文件，它来自一个看起来有点像这样的视图文件夹：

{{#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;

这是一个简单的界面，说明了如何使用照片模板。但是，有了这个，编译器会产生错误：

错误 TS2304：找不到名称“photosTemplate”。

这里有一个类似的问题：https://stackoverflow.com/a/23957928/761388 我认为问题出在我的photos.hbs.d.ts 文件上，但我不确定它有什么问题。我觉得我在定义中遗漏了一些与外部模块有关的非常简单的东西。但是对于我的生活，我无法弄清楚它是什么......

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;