Шаблоны Handelbars и 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"}]); 

Вопрос в том, как это может быть сделано, чтобы работать на машинопись? Я переключил свой var для import и переехал с помощью флага в --module commonjs компилятора:

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

На данный момент я сталкиваюсь ошибку:

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

достаточно, то вы можете подумать Fair. Так что я создал 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;