Typescript ES6 has problems with syntax

[floflock]

If I want to import an image via ES6 import in a TypeScript file, the module cannot be found, because of missing declaration:

I do declare the modules here:

But because of the query parameters, it does not work. Are there any other possibilities to give the query information to the responsive-loader?

I can use require, but it hat more consistency if I use import everywhere.
I can use the default configuration, but I cannot gather a specific image size then, srcSet does work then.

Is there any solution for TypeScript?

[cyrilwanner]

Hi @floflock
You can add more declare module statements for the query parameters:

declare module '*.jpg?resize';

If you want to add every possible combination, this could get quite huge.. I'll try to implement this in this package and ship those typings, but you can use this as a quickfix.

[tomaskallup]

@cyrilwanner Sadly that won't fix everything, if you combine multiple params eg. ?resize&sizes[]=500 you would need to add that to the definition

declare module '*.jpg?resize&sizes[]=500';

Meaning you would need to add every single combination you use, because *.jpg?* doesn't seem to work.

[karl]

I worked around this by adding the following TypeScript declaration:

declare module '*&ts-ignore' {
  const value: string;
  export = value;
}

And then importing images as follows:

import thumbsUpImage from './thumbs-up.png?resize&size=408&ts-ignore';

[rootical]

@karl 's suggestion doesn't work for me. The images (modules) can't be found, only require works :( Would be great to have TS support.