Description
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
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
My proposal is something like this:
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 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:
//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:
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
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:
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. 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.