Invoke the text plugin from requirejs mapping

Question

I\'m writing a web app using TypeScript, Backbone, and Mustache. I want to use Requirejs for dependency loading.

I\'m also using the Web Essentials visual studio plu

Answer 1

There is a slightly nicer way to do this (I'm using typescript 2.0) Referenced here: https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

This code expects that your requirejs configuration and plugins are set up correctly:

/// <amd-dependency path="text!./about.html" name="template"/>
declare let template: string;

This helped me a lot to migrate lagacy code to typescript.

Answer 2

Ran into similar issue. Solved finally. See TypeScript: compiling removes unreferenced imports

/// <amd-dependency path="text!templates/application.htm" />

var applicationTemplate = require('text!templates/application.htm');

Answer 3

We are using Backbone and require.js for our TypeScript applications.
We don't use the

import backbone = module("Backbone")

syntax, but rather use a

/// <reference path="../../modules/Backbone.d.ts" />

reference, and then a BootStrapper.
This way, the 'text!htmlfile.html' syntax works perfectly with require.js.

I've put together a blog on using require.js with TypeScript and AMD: http://blorkfish.wordpress.com/2012/10/23/typescript-organizing-your-code-with-amd-modules-and-require-js/

Answer 4

For Typescript 1.0 this works for me. First I created a .d.ts file which stores all module declarations for each text template.

//workaround for typescript's lack of support for requirejs text template notation
//remember that a reference to the import variable has to be found in the class, otherwise typescript ignores the import
declare module "text!views/details/details.html" {
    var text: string;
    export = text;
} 
declare module "text!views/layout/layout.html" {
    var text: string;
    export = text;
} 
declare module "text!views/home/home.html" {
    var text: string;
    export = text;
} 

then to refer to the text template I add these lines on top of the class/module.

/// <reference path="../texttemplate.d.ts"/>
import detailsTemplate = require('text!views/details/details.html');

The reference line is not actually needed, since the .d.ts file is picked up globally. But I added it as a reminder of the workaround. It also makes it easy to ctrl+click to go the d.ts. file.

Answer 5

Since TypeScript 0.9.0 I think you need to do the following:

/// <amd-dependency path="text!templates/application.htm" />
declare var require:(moduleId:string) => any;
var applicationTemplate:string = require("text!templates/application.htm");

Check out more at http://www.codebelt.com/typescript/typescript-amd-with-requirejs-tutorial/