Handlebars模板和使用TypeScript进行Browserify

Question

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

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

这需要一个名为＆＃34; photos.hbs＆＃34;的模板文件。从一个看起来像这样的视图文件夹：

{{#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：找不到外部模块＆＃39; ./ views / photos.hbs＆＃39;。

你可能会想得够公平。所以我创建了一个photos.hbs.d.ts坐在旁边，看起来像这样：

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

export = photos;

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

  

错误TS2304：找不到名称＆＃39; photosTemplate＆＃39;。

这里有一个类似的问题：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;