车把模板和带有TypeScript的Browserify

Question

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

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

这需要一个看起来像这样的views文件夹中的名为“ 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;

Answer 2

我想这样将声明放在global.d.ts中：

声明函数require（fileLocation：String）：any