microsoft / microsoft/TypeScript

[Feature] Import non-js content as const string

Open
#42,219 6 comments 18 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Awaiting More Feedback Suggestion
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.