title: Handlebars Templates and Browserify with TypeScript
body: <p>I'm in the process of porting a project to TypeScript.  The project combines Handlebars and Browserify with <a href="https://www.npmjs.org/package/hbsfy" rel="nofollow noreferrer">hbsfy</a> to handle templates.  This means I have JavaScript code like this:</p>
  
  <pre><code>var photosTemplate = require('./views/photos.hbs');
  </code></pre>
  
  <p>Which requires in a template file called "photos.hbs" from a views folder which looks a little like this:</p>
  
  <pre><code>{{#each this}}
      &lt;span class="title"&gt;{{title}}&lt;/span&gt;
  {{/each}}
  </code></pre>
  
  <p>There's a gulpfile that runs as part of the build step to convert the template into a function that can be used.  This means that in my consuming file I can write code like this which uses the function template:</p>
  
  <pre><code>var newHtml = photosTemplate([{title: "test title 1"}, {title: "test title 2"}]);
  </code></pre>
  
  <p>The question is, how can this be made to work for TypeScript?  I've switched my <code>var</code> for an <code>import</code> and moved to using the <code>--module commonjs</code> compiler flag:</p>
  
  <pre><code>import photosTemplate = require('./views/photos.hbs');
  </code></pre>
  
  <p>At this point I encounter the error:</p>
  
  <blockquote>
    <p>error TS2307: Cannot find external module './views/photos.hbs'.</p>
  </blockquote>
  
  <p>Fair enough you might think.  So I created a <code>photos.hbs.d.ts</code> to sit alongside that looks like this:</p>
  
  <pre><code>interface photos {
      (context: any, options?: any): string;
  }
  
  export = photos;
  </code></pre>
  
  <p>This is a simple interface that illustrates how the photos template is being used.  However, with this in place the compiler yields the error:</p>
  
  <blockquote>
    <p>error TS2304: Cannot find name 'photosTemplate'.</p>
  </blockquote>
  
  <p>There's a similar question here: <a href="https://stackoverflow.com/a/23957928/761388">https://stackoverflow.com/a/23957928/761388</a>  I think the problem is my <code>photos.hbs.d.ts</code> file but I'm not sure what's wrong with it.  I feel like I'm missing something very simple in the definition to do with external modules.  But for the life of me I can't work out what it is...</p>