Import a JSON file into TypeScript declaration files (*.d.ts)

Question

Import a JSON file into TypeScript declaration files (*.d.ts)

I am currently working on a declaration file where I need to establish a global type that is specifically tied to a predetermined list of string phrases. These string phrases are part of property keys within an object located in a JSON file.

I have a couple of questions:

Can I import a JSON file into a declaration file and manipulate it using basic functions like Object.keys and Array.map?
Additionally, can I utilize a JavaScript array of strings to define a type in TypeScript?

Let's delve into some code example for better clarification.

Imagine we have the following JSON file named data.json:

{
  "someList": {
    "#key1": {"a": 1, "b": 2},
    "#key2": "some value",
    "#key3": 1234
  }
}

My goal is to create the declaration file global.d.ts as shown below:

import data from './data.json';

declare global {
  type AllowedKeys = Object(data.someList).map(key => key.substr(1));
}

In essence, I need the type to be dynamically defined based on the contents of the JSON file, such as:

type AllowedKeys = "key1" | "key2" | "key3";

Any assistance or pointers on this matter would be greatly appreciated.

json typescript dynamic types import

Answer 1

Answer №1

UPDATE: Now, with template string literals, you can extract a substring starting from a specified character like this:

import data from "./data.json";
export type AllowedKeys = keyof typeof data["someList"] extends `#${infer K extends string}` ? K : never;
// This is similar to
// export type AllowedKeys = "key1" | "key2" | "key3"

In TypeScript, you can let the compiler infer a type based on JSON data.

import data from "./data.json";

export type AllowedKeys = keyof typeof data["someList"];
// This is equivalent to
// export type AllowedKeys = "#key1" | "#key2" | "#key3"

The resulting d.ts file will appear as follows:

import data from "./data.json";
export declare type AllowedKeys = keyof typeof data["someList"];

~~Currently, there are limitations in manipulating string literals within TypeScript (e.g., removing the #).~~

For more information, refer to these GitHub issues :

Answer 2

UPDATE: Now, with template string literals, you can extract a substring starting from a specified character like this:

import data from "./data.json";
export type AllowedKeys = keyof typeof data["someList"] extends `#${infer K extends string}` ? K : never;
// This is similar to
// export type AllowedKeys = "key1" | "key2" | "key3"

In TypeScript, you can let the compiler infer a type based on JSON data.

import data from "./data.json";

export type AllowedKeys = keyof typeof data["someList"];
// This is equivalent to
// export type AllowedKeys = "#key1" | "#key2" | "#key3"

The resulting d.ts file will appear as follows:

import data from "./data.json";
export declare type AllowedKeys = keyof typeof data["someList"];

~~Currently, there are limitations in manipulating string literals within TypeScript (e.g., removing the #).~~

For more information, refer to these GitHub issues :

Import a JSON file into TypeScript declaration files (*.d.ts)

Answer №1

Similar questions

Ways to manage an rxjs observable reaction that may potentially have no data?

loop through the array of objects using ng-repeat in Angular

The scroll animation feature was not functioning properly in Next.js, however, it was working flawlessly in create react app

Retrieving the value that is not currently selected in a mat-select component

The unit tests are not triggering the execution of setTimeout

Hidden back navigation strategy in AngularJS 2 with location strategy

Converting Json string to a Set of objects in Java

Testing in Jasmine: Verifying if ngModelChange triggers the function or not

Transforming Excel data into JSON format using ReactJS

Is there a way to assign API data as inner HTML using Lit?

I am facing an issue with my useFetch hook causing excessive re-renders

Leverage the power of Python to extract and store various JSON data entries into an SQLite

Failed to decipher an ID token from firebase

Guide to using a JSON WCF service in C#

Exploring TypeScript's Classes and Generics

Get JSON information based on index position

Is it possible to continuously re-render a React Functional Component with Axios and useState/useEffect?

Using Regular Expressions to Eliminate JSON Node in SQL Server

Adjusting the prototype of a JavaScript object in real-time

Managing errors with the RxJS retry operator