Type detection for dynamic imports with template strings

[danielrentz]

Suggestion

🔍 Search Terms

dynamic imports template string typed

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing TypeScript/JavaScript code
• This wouldn't change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript's Design Goals.

⭐ Suggestion

Dynamic imports using a simple template string could be matched against wildcard module declarations.

📃 Motivating Example

I am using the Rollup plugin dynamic-import-vars to handle import expressions with variable module names, for example to load image files as encoded strings:

const module = await import(`./images/${name}.png`);

There is a wildcard declaration for these files in the project:

declare module "*.png" {
    const data: string;
    export default data;
}

It would be great if the compiler tries to match such wildcard module declarations against template strings, maybe in a strict limited way such as:

• only module declarations with a single leading or trailing asterisk
• only against import expressions with a single template string containing leading/trailing matching characters (or string concatenation with matching string literals at beginning/end)

💻 Use Cases

See example above. The workaround in this situation is to explicitly write a type assertion:

const module = await import(`./images/${name}.png`) as typeof import("*.png");

[KevinMind]

Another use case here would be to infer return type of functions based on a dynamic key specifying the file path to import from. Wicked for file based routing systems like remix.run

export function useRouteLoaderData(routeID: RouteID): typeof import(`./${typeof routeID}`).loader {
    return _useRouteLoaderData(routeID);
}

[suguanYang]

I thought this one is similar to #32401.

[danielrentz]

@suguanYang Right that issue sounds similar. While it is about using the type of a constant defined elsewhere in import expressions, this issue here is about the special case of wildcard module definitions and dynamic template strings.