Support different typings with import attributes

[jakearchibald]

🔍 Search Terms

import attributes declare module types

✅ Viability Checklist

• 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 isn't a request to add a new utility type: https://github.com/microsoft/TypeScript/wiki/No-New-Utility-Types
• This feature would agree with the rest of our Design Goals: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals

⭐ Suggestion

With import attributes, you can now do this:

import AnImage from './icon.png' with { type: 'image' };
import AnArrayBuffer from './icon.png' with { type: 'arrayBuffer' };

…where a build tool (such as Rollup) will generate the modules.

What's missing is a way to provide the types, so TypeScript sees AnImage as (for example) an ImageBitmap, and AnArrayBuffer as an ArrayBuffer.

One suggestion, adapted from #53656 (comment):

declare module '*' with { type: 'image' } {
  const image: ImageBitmap;
  export default image;
}

However, it would also be nice if declared exports could be conditional. So in ./icon.png.d.ts:

declare const buffer: ArrayBuffer;
declare const image: ImageBitmap;

export for { type: 'image' } default image;
export for { type: 'arrayBuffer' } default buffer;

📃 Motivating Example

As described in the suggestion.

💻 Use Cases

1. What do you want to use this for?

I think this is covered in the suggestion.

2. What shortcomings exist with current approaches?

It's common for with { type: "value" } to influence the types of the returned module, but TypeScript doesn't allow the types to differ.

3. What workarounds are you using in the meantime?

Avoid using import attributes for this use-case, and instead use custom schemes in the module ID (or custom query strings).

[fatcerberus]

Wow, import attributes do add quite a bit of complexity to module loading, don't they... I'm guessing this can of worms is what TC39 were attempting to avoid when they originally specified asserts as not affecting how a module is loaded...

[andrewbranch]

Thanks @jakearchibald; could I get you to post this feedback in #46135? We discussed this recently in #56359 and we’re looking for more information about existing real-world use cases, but I’d like to consolidate the discussion there.

[jakearchibald]

Ugh, sorry, I promise I searched for an existing issue.

[typescript-bot]

This issue has been marked as "Duplicate" and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[jakearchibald]

Follow-up post #46135 (comment)