Typescript: Wildcard module declarations don't work as expected with require.js

[jotabe-net]

If I use a wildcard declaration like recommended in the documentation

TypeScript Version: 2.2.2

declare module "text!*" {
    const content: string;
    export default content;
}

If I do these two imports in a module:

// As documented:
import template from 'text!template.html';
// Not as documented:
import * as template2 from 'text!template.html';

When using the documented import:

console.log(template);

is transpiled into:

// As documented:
console.log(template_html_1.default);

which doesn't work, because template_html_1 is a string, without a property named default

On the other hand, when importing it in the other way:

console.log(template2);

is transpiled into:

// Not as documented:
console.log(template2);

which works perfectly because template2 is in fact a string with the contents imported from template.html by requirejs.

ADDITIONAL PROBLEM: the second form is typed as text!*, instead of as string, so it's necessary to do this ugly cast: <string><any>template to use it as string.

Besides, in Chrome developer console, template doesn't exist (becasuse it's transpiled with the odd name template_html_1) while template2 is available, and has the right contents.

I don't know if this is an special case for requirejs, or if the documentation is wrong for all module loaders.

tsconfig.base.json:

{
    "compilerOptions": {
        "target": "ES5",
        "module": "amd",
        "noImplicitAny": true,
        "sourceMap": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "strictNullChecks": true,
        "emitBOM": true,
        "declaration": false,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "noEmitHelpers": true,
        "listEmittedFiles": true
    }
}

tsconfig.json

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
        "outDir": "../Scripts"
    },
    "include": [ "**/*" ]
}

[mhegazy]

your declaration says 'text!template.html' has a default export. if that is not the case, then change the declaration to:

declare module "text!*" {
    const content: string;
    export = content;
}

and use it as:

import * as template2 from 'text!template.html';

[jotabe-net]

Thanks for the quisk and exact answer, @mhegazy. Using the second import with this export, works like a charm.

However, the default export documented in http://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations doesn't work at all with requirejs. I wonder if these documents could be updated, and if the problem with default is only for my configuration, or is a general problem.

[mhegazy]

It all depends on what the plugin is doing. If your plugin will return a default, then it is accurate. This is not meant to be a template for all projects, this is just a demonstration that you can declare a module with wild cards just like you can declare any regular module.

[jotabe-net]

Thank you very much for your answer and explanation. I didn't think that the plugin implementation could have something to do with the way to implement the wildcard module declaration, and it's consumption.

As a reference for people using requirejs with its text plugin, as explained above, this combination works perfectly:

Wildcard module declaration:

declare module "text!*" {
    const content: string;
    export = content;
}

Import

import * as template from 'text!aBeautifulTemplate.html';