Typed JSON imports

[sdegutis]

🔍 Search Terms

json import module type

✅ 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

Allow specifying the type of dynamically created and imported JSON files with .d.ts files.

📃 Motivating Example

import icons from '/icons.json' with { type: 'json' };

This is a type error when /icons.json doesn't exist statically. There's no way to give it a type currently.

💻 Use Cases

1. What do you want to use this for?

Give /icons.json a type when imported though it's dynamically generated.

2. What shortcomings exist with current approaches?

/icons.json doesn't have a type, and is a type error.

3. What workarounds are you using in the meantime?

Using fetch with a then-generic-type.

[SebastienGllmt]

I think this is already supported: #32063

[MartinJohns]

I think this is already supported: #32063

That would require the file to be existing, which, if I understand OP correctly, is not the case.

Normally you would create a declaration file and provide the types there, but it does not seem to work with a leading / character (and I don't know why). For an import from icons.json instead of /icons.json it works fine.

[sdegutis]

It doesn't require the file to exist, and it actually worked for me, with allowArbitraryExtensions: true. Solved, thanks.