Repository: TypeScript
Issue: Autoimport arbitrary files that are whitelisted as modules
Labels: Suggestion,Awaiting More Feedback

# Suggestion

<!--
  Please fill in each section completely. Thank you!
-->

## 🔍 Search Terms

<!--
  💡 Did you know? TypeScript has over 2,000 open suggestions!
  🔎 Please search thoroughly before logging new feature requests as most common ideas already have a proposal in progress.
  The "Common Feature Requests" section of the FAQ lists many popular requests: https://github.com/Microsoft/TypeScript/wiki/FAQ#common-feature-requests

  Replace the text below:
-->

autoimport files

## ✅ Viability Checklist

<!--
   Suggestions that don't meet all these criteria are very, very unlikely to be accepted.
   We always recommend reviewing the TypeScript design goals before investing time writing
   a proposal for ideas outside the scope of the project.
-->
My suggestion meets these guidelines:

* [ x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [ x] This wouldn't change the runtime behavior of existing JavaScript code
* [ x] This could be implemented without emitting different JS based on the types of the expressions
* [ x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
* [ x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals).


## ⭐ Suggestion

<!-- A summary of what you'd like to see added or changed -->

## 📃 Motivating Example

I'd like to have Typescript automatically import "arbitrary" files that are included via tsconfig.json. Typescript already supports manual imports of any files that are configured as modules. E.g. 

```ts
declare module '*.txt' {
  const content: string;
  export default content;
}
```

allows me to import a text file via `import Foo from '../texts/Foo.txt'`. However, I still have to do the import manually. If I just type `Foo` somewhere in my Typescript code, I get no import recommendation in VSCode. 

For specific file extensions like Vue, there are VSCode plugins which somehow extend the editor with this feature. 

Related to the autoimport feature would be automatic renaming of these imports when the file name is changed in VSCode.

## 💻 Use Cases

In my vue files, I import SVG files as components (could also be raw text, but that's irrelevant). I use a module declaration like mentioned above (but with *.svg instead of *.txt) and the vite-svg-loader dependency to actually have proper SVG imports during build time, not just during compilation time. Now, whenever I want to import an SVG file, I have to add two lines:

```svg
<template>
  <MyIcon /> <!-- new code -->
</template>

<script lang="ts">
  import MyIcon from '@/assets/icons/MyIcon.svg'; // new code
</script>
```

This is doable, but a but cumbersome because I have to jump around the file to make these changes. Additionally, if I rename the asset file, I have to rename at least all import statements scattered throughout my code base. Also, I'd really not like to add another VSCode extension just for automatic SVG imports.