Whitelist supported require.extensions

[oojacoboo]

TypeScript Version: 2.0.3

When executing ts-node or just tsc on a TS file that requires files/assets other than .ts, .tsx, .js or other supported file types, the compiler throws Invalid character (1127) errors.

http://files.jacobt.com/pI1CAj0BaV

It seems the most sensible to me to include within the tsconfig a compilerOptions prop for require.extensions to target as a whitelist, while defaulting to include all extensions. It's common in many build environments to require assets such as images and sass, etc. These extensions don't play nice with the compiler.

You can always patch the default require.extensions to prevent the ts compiler from processing these require constructs like so:

require.extensions['.png'] = function(){};
require.extensions['.scss'] = function(){};

However, doing so and altering the global require.extensions should be avoided.

I did try various glob definitions within the files prop of the tsconfig in hopes that it would also apply to require statements. However, it doesn't seem that's supported.

Any thoughts or advice here?

[kitsonk]

I think what you are looking for is #6615.

Where:

declare module '*.png' {
    const png: any;
    export = png;
}

Or any sort of typing you so desire.

[oojacoboo]

Thanks @kitsonk, any way to automatically include a typeRoots declaration file in a global context? I tried specifying under the typeRoots prop the following:

"typeRoots": [
  "./node_modules/@types",
  "./typings"
]

Where I have:

+-- typings
|   +-- images
|   |   +-- index.d.ts
|   +-- styles
|   |   +-- index.d.ts

included in the images/index.d.ts is a file with various declare module declarations like you'd mentioned. I realize this is unrelated since I can include it directly within the source, but this may help others as well.