Can we generate simplified Typescript types in the compiled distribution of a Node package?

My goal is to streamline the output in the TypeScript declaration files (*.d.ts) that come with the bundled version of my module's code. This involves a process that includes the TypeScript compiler, Babel, and Rollup. I'm also utilizing Relay and GraphQL, although that shouldn't have much impact on the question I have.

For example, in my .tsx source code, I have the following:

import { graphql } from 'babel-plugin-relay/macro'

// Generates some code 
graphql`fragment task_model on Task { id message createdAt deadline modifiers { hard medium easy } }`

// A generated type exists for this fragment, but it's not very aesthetic
import { task_model } from './__generated__/task.graphql'

// I want to improve the type information and export it with a better name
export type Task = Readonly<Omit<task_model & { deadline: string, createdAt: string }, ' $refType'>>

In the resulting .d.ts file, the content looks like this:

export declare type Task = Readonly<Omit<task_model & {
    deadline: string;
    createdAt: string;
}, ' $refType'>>;

However, when viewed within an IDE, I notice that the type actually resolves to a more readable format:

type Task = {
    readonly id: string;
    readonly message: string;
    readonly createdAt: string;
    readonly deadline: string;
    readonly modifiers: {
        readonly hard: number;
        readonly medium: number;
        readonly easy: number;
    };
}

Is there an option or method to output this cleaner, human-readable type resolution instead of the corrected version? It would be beneficial for understanding the type information even if the consumer project isn't configured properly.

Answer №1

I've developed a handy tool for this purpose! If you're interested, check out ts-simplify. It's a command-line interface tool that simplifies types by reducing them to their basic data types without retaining any aliases.
Although it's quite basic at the moment, it may not cover all scenarios, but feel free to give it a try!

npx ts-simplify <source> <output>

Take this example:

type ExampleObj = { deadline: string, createdAt: string, $refType: string };
export type Example = Readonly<Omit<ExampleObj, '$refType'>>;

After using the tool, the code will be simplified to:

export type Example = { readonly deadline: string, readonly createdAt: string };

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to setting up a custom callback function for a setState in a React Functional Component

Although this question may seem similar to others, the issue at hand is quite complex and unique in its own way. According to the official React documentation, it suggests that using useEffect can serve as an alternative to the inline callBack function wi ...

The functionality of reordering columns, virtual scrolling, and resizing the grid in jqgrid are not functioning properly

Implementing jqgrid with Symfony to display a datagrid has been a challenging task for me. Thanks to Oleg's insightful response, many of the major issues have been resolved. Below is a snippet of my code: <link rel="stylesheet" type="text/css" ...

HTML not updating after a change in properties

My template is structured as a table where I update a column based on a button click that changes the props. Even though the props are updated, I do not see the template re-rendered. However, since I am also caching values for other rows in translatedMessa ...

Having trouble integrating a custom dialog with DirtyForms plugin

I have successfully implemented DirtyForms, a plugin that triggers a confirmation dialog when a user tries to navigate away from a page. The base functionality of the plugin is working as intended. Now, I am trying to integrate jQuery UI's Dialog for ...

Difficulty with the width of the HTML5 video player frame

My website features multiple user-submitted videos with different content, resulting in varying frame widths and heights. For instance: (Video 1) - Frame width: 1280. (Video 2) - Frame width: 480. Frame height: 360. The issue arises when a video with a ...

Embedding Facebook data into an HTML document

While I am able to retrieve data from Facebook and display it on the console, I am facing issues when trying to display it on an HTML page. I attempted using: $("#mydiv").text(data); or $("#mydiv").append(data); However, this displays [object Object] ...

Struggling to properly access an object in EJS template engine

I am encountering an issue with an object I am passing into my EJS template, as I keep receiving an error message stating Cannot read property 'link' of undefined. Below is the object and the corresponding template code. Upon logging the object, ...

The "Splash Screen Div" page displayed during transitions and page loading

Creating a "Splash Screen Div" for a loading page involves waiting until everything is loaded and then hiding or moving the div off screen. Below is an example: index.html <div id="loading-Div"> <div id="bear-Logo"> < ...

When utilizing React and Expressjs to upload a file through REST, the request seems to stall indefinitely

Seeking assistance with a simple React page containing a form for file selection and submission. The file is uploaded to the server via a POST request using axios. Here's the code snippet for the client-side: import React, { useState } from "reac ...

Angular lacks the ability to directly set HTTP headers, except when using an interceptor

When utilizing an HTTP interceptor to include an authentication token in all requests, I encountered a scenario where I needed to add a different token instead of the standard auth token for a specific request. The challenge I faced was the inability to se ...

Creating 3D text using textGeometry in React Three Fiber results in a cube-shaped representation

Trying to create 3D text in React Three Fiber by following this tutorial but ending up with a cube instead of text. This is the code snippet I used: import { extend } from "@react-three/fiber" import { FontLoader } from "three/examples/jsm/l ...

Converting time from 00:00:01 to a format of 8 minutes and 49 seconds in Angular

Is there a way to transform a time value from 00:00:01 (not a date object) into a format showing 8 minutes and 49 seconds? Even after consulting the Angular 'date pipe' documentation, I couldn't find a solution to this issue. ...

Creating input fields in Angular 2

Can someone guide me on how to sum the values entered in two input fields? Here is my HTML code snippet. I'm not sure if there's anything missing in the ts file. <div class="small-7 columns"> <md-input-container> <input t ...

Issues arise when there is excessive tapping on an iPad while incorporating jQuery animate and scrollTop() commands

I am currently in the process of designing a user interface for a web application. The layout I have in mind is similar to what can be found here. $("#scroll-down").on("click", function() { thumbnails.stop(true, true).animate({ scrollTop: &apos ...

What is the best way to link an ASP.NET byte array to a file input field in a form?

In my ASP.NET project, I am looking to send a POST request to a third-party service for document editing (Zoho). While I have experience with making such requests using front-end forms and VB.NET in the code-behind, integrating both becomes tricky due to t ...

Display/Conceal the UL subelement when selected

I've been struggling to toggle the visibility of some ul checkboxes when their parent is clicked. Despite my best efforts, I just can't seem to make it work! Could someone lend a hand in getting this functionality working? Essentially, I need th ...

What is the right way to import a module in TypeScript?

There is a module that I have declared like so: declare module conflicts { export interface Item {} export interface Item2 {} export interface Item3 {} } I attempted to import this module in a component using the following code: import * from ...

Responsive Grey Tiles for Google Maps v3

I've successfully implemented Google Maps V3 in my project, but I'm encountering an issue with grey tiles appearing on the map. I attempted to fix this problem by triggering a resize event using the following code snippet: google.maps.event.trig ...

Transforming arrays with map or alternative methods in javascript

Below is the JSON object I am working with: { id: 3, cno: 103, username: 'basha', name: 'New Complaint', desc: 'Need bag', storeId: [ 5, 1 ] } My desired output should look like this: [ {id: 3,cno: 103, ...

How can we automate the process of assigning the hash(#) in Angular?

Is it possible to automatically assign a unique hash(#) to elements inside an ngFor loop? <div *ngFor="let item of itemsArray; index as i"> <h3 #[item][i]> {{ item }} </h3> </div> I would like the outp ...