DEV Community

Discussion on: Adding URL Search Parameters to Imports!

View post
Collapse
 
servernoj profile image
servernoj • • Edited

Does anybody know how to use this trick with Typescript? Say, I have a TS project with "type": "module" in package.json and "module" set to "esnext" in tsconfig.json. Then, I have 2 TS files in the same directory, e.g. a.ts and b.ts with a line in b.ts reading:

import {...} from './a.js'
Enter fullscreen mode Exit fullscreen mode

and it works fine after compilation with tsc (please notice the use of a.js instead of a in the import statrement -- this is a requirement for imports of local ESM modules)

But... when I replace import statement to

import {...} from './a.js?q=hello'
Enter fullscreen mode Exit fullscreen mode

then tsc throws error that it cannot find module.

The only solution that I know is to suppress TS error checking by adding @ts-ignore like that:

// @ts-ignore
import {...} from './a.js?q=hello'
Enter fullscreen mode Exit fullscreen mode
Collapse
 
gabrielrurbina profile image
Gabriel Urbina •

There is limited support for this, add this into your tsconfig.json,

{
    "compilerOptions": {
        "paths": {
            "./somedir/*?q=hello": [
                "./somedir/*"
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Have a look at path-mapping

Collapse
 
abc_wendsss profile image
Wendy Wong •

Great article by Lioness100 and thanks @servernoj for asking a thoughtful question and sharing with the DEV community 🙂