Repository: TypeScript
Issue: [Feature] Import non-js content as const string
Labels: Suggestion,Awaiting More Feedback

# Suggestion

There is a need for a way to import non-js content and process that content to produce TypeScript definitions, as asked for in for example #16607. But with the template literal types introduces in TS 4.1 I believe most of this can be solved without a plugin system. There are examples of projects that parse strings representing for example SQL, and produces useful types based on the string value. So given only the string content of a file it is possible to declare a module with useful types. 

## 🔍 Search Terms

import module string

## ✅ 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

My proposal is something like this:

```ts
declare module "*.txt" {
  const content: import.meta.content; //this is the new feature
  export default content
}
```

(I'm using `import.meta.content` here as an example of how it could work. [import.meta](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import.meta) will contain many possible properties, so I'm just using `content` here as an idea)

This way the actual textual value of the file could be known both in the editor and at compile time. For example:

```ts
//given that example.txt contains 'example'
import text from 'example.txt';

type True = text extends 'example';
```

This isn't very useful in and of itself, but with template literal types it is now possible to parse and make use of other languages. 

For example, when using css modules it is useful when the IDE can help and show all the classes in the css file. Here is a trivally simple (and therefore not completely working) example of how this can be done:

```ts
declare module "*.module.css" {
  const content: import.meta.content;

  // This is the magic that parses the css file and generates the css module object
  type ParseCSS<T extends string> = T extends `${string}.${infer ClassName} {${string}}${infer Rest}` 
    ? { [K in (ClassName | keyof ParseCSS<Rest>)]: string } 
    : {};

  export ParseCSS<content>;
}
```
(The code above can be tested [here](https://www.typescriptlang.org/play?ts=4.1.3#code/C4TwDgpgBACghgJwM4QMIGV0B4AqUIAewEAdgCZJRLAICWJA5gHxQC8Uehx5lABgCQBvanUYBfAHRD6AMwgIoqADZwkSAHJwAthDFRBQkfQZix0knIUAlCNTG8oAKChQA-PqgBtANJR6UAAplVQ1taAAfKABrCBAAexlYRBQMbBtqJgBKAF0ALioaYyg9Zyh8wTEAbkdHUEgodIBXJWA2JOQ0TCxeRwkACwBGfRqxGv6AJmHHUd6+gGYp0d4matrwaHRGgGMt20p2GFotqKwmloAaKAByQauWSMPj09tm4Eub8buoB6OTs7frvM7tU6tAAGJwWhKNqPP4vC7XLS0NTGO5AA)

Given a simple css file with classes this declaration will make it possible to import the file and use the classes in a project, like this:

```ts
import style from 'style.module.css';

export default (props: {value: string}) => <h1 className={style.title}>{props.value}</h1>;
```

This is just a simple example, there are many examples of parsing and working with strings that represent json and sql [here](https://github.com/ghoullier/awesome-template-literal-types). Something I've been looking into is parsing glsl files and extracting the list of uniforms and their types. I'm sure there are many other usecases for parsing the string into a type declaration.

So to summarize, by making the string content of a file available in a module declaration, existing features of TypeScript, like template literal types, makes it possible to parse the string and producing useful types.