microsoft / microsoft/TypeScript
[Feature] Import non-js content as const string
Nobody has claimed this yet.
- Dominant language
- Go
- Stars
- 111k
- Forks
- 14.3k
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 132
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.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
No implementation files or tests are named. Start by reviewing TypeScript's module declarations and import type-checking behavior, then assess how the proposed import.meta.content value would interact with template literal types. Done means non-JavaScript module content can be exposed as a typed string for editor and compile-time use without changing emitted JavaScript.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- compilers
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100