typescript - Handlebars 模板和使用 TypeScript 的 Browserify

Question

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

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

这需要来自 View 文件夹的名为“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');

此时遇到错误:

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

这对我有用...

照片.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;