Handlebars模板和使用TypeScript的Browserify

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"}]); 

的问题是，如何可以在此进行，为打字稿工作？我已经关掉我的var一个import并移动到使用--module commonjs编译标志：

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

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

error TS2307: Cannot find external module './views/photos.hbs'.

你可能会认为这很公平。所以，我创建了一个photos.hbs.d.ts坐一起，看起来像这样：

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

export = photos; 

这是一个简单的界面，说明是如何被使用的照片模板。然而，这种替代编译器产生的错误：

error TS2304: Cannot find name '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;