Exploring the structure of TypeScript types using the Compiler API

Is there a way to extract specific type information directly from the TypeScript compiler using an API method? Here's an example:

interface User {
  id: number
  name: string
}

type NameOnly = Pick<User, 'name'>

type NameOnlyAliased = NameOnly

When hovering over NameOnlyAliased in VSCode, it displays as:

type NameOnlyAliased = {
    name: string;
}

My inquiry is whether there is a function available in the compiler API (or any other straightforward method without diving into aliases, Pick, etc.) to retrieve the details on the right side of the = shown above, potentially as structured data instead of just a string, like so:

{
  NameAliasedOnly: {
    properties: {
      name: {
         type: 'string'
      }
    }
  }
}

The purpose here is to automatically generate code for creating fast-check arbitraries based on type definitions (if such functionality already exists, that would be great). I've experimented with using ts-json-schema-generator for this task, but it doesn't handle certain type definitions.

Answer №1

I have solved the problem by utilizing a different approach. Instead of using the TypeScript compiler API directly, I have opted to utilize the fantastic ts-morph library. This library acts as a wrapper for the compiler API, making many tasks much simpler. Below is an example code snippet demonstrating how to achieve this, with the test.ts file containing the code from my original question.

import { Project, TypeFormatFlags } from 'ts-morph'

const project = new Project({
  tsConfigFilePath: 'tsconfig.json',
  skipAddingFilesFromTsConfig: true,
})
const file = 'test.ts'
project.addSourceFileAtPath(file)

const sourceFile = project.getSourceFile(file)

const typeAlias = sourceFile?.getTypeAlias('NameOnlyAliased')
if (typeAlias) {
  console.log(
    typeAlias
      .getType()
      .getProperties()
      .map(p => [
        p.getName(),
        p
          .getTypeAtLocation(typeAlias)
          .getText(
            undefined,
            TypeFormatFlags.UseAliasDefinedOutsideCurrentScope
          ),
      ])
  )
}

Upon running this script, the expected output is [ [ 'name', 'string' ] ]. For more intricate types, it is possible to navigate deeper into the type hierarchy.

Answer №2

After being inspired by @sparkofreason's answer, I developed a command line interface tool called ts-simplify. This tool acts as a compiler to generate simplified primitive types from source code.

npx ts-simplify source-code.ts output-types.ts

By running the above command, you can create a file containing the desired output:

export type NameOnlyAliased = {
    name: 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

Triggering an event in Angular 2 after ngFor loop completes

I am currently attempting to utilize a jQuery plugin that replaces the default scrollbar within dynamic elements in Angular 2. These elements are generated using an ngFor loop, making it impossible to directly attach jQuery events to them. At some point, ...

Is there a way to automatically set all object properties to false if one property is set to true in React?

The Issue: My task at work involves creating 3 buttons with separate filters to display different tickets in a table. All the functionality is completed, and the filtered tickets are displayed correctly. However, I am facing an issue that is preventing m ...

Prevent users from clicking buttons until all mandatory fields are filled out using react-hook-form

I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...

Using TypeScript's Array Union Type in defining function parameters

My scenario involves a union type of an Array with specific lengths: [ number ] | [ number, number ] | [ number, number, number, number ] The requirements are for an array with either one element, two elements, or four elements. I am attempting to create ...

How to pass a single property as a prop in TypeScript when working with React

I have a main component with a parent-child relationship and I am looking for a way to pass only the product name property as props to my "Title" component. This way, I can avoid having to iterate through the information in my child component. To better i ...

Guide on including a in-browser utility module from single-spa into a TypeScript parcel project

There are 3 TypeScript projects listed below: root-config a parcel project named my-app an in-browser utility module called api All of these projects were created using the create-single-spa command. In the file api/src/lomse-api.ts, I am exporting the ...

Modifying the version target of TypeScript code results in the TypeScript Compiler being unable to locate the module

After installing signalr via npm in Visual Studio 2019, I encountered an issue. When the target in my compiler options is set to ES6, I receive the error TS2307 (TS) Cannot find module '@microsoft/signalr.'. However, when I change the target to E ...

Navigating through the complexities of managing asynchronous props and state in React-components

I'm really struggling to understand this concept. My current challenge involves passing asynchronously fetched data as props. The issue is that the props themselves are also asynchronous. Below is a simplified version of the component in question: i ...

Managing status in Angular applications

I am currently working on a project using Angular 7 and I have the following code snippet: public deleteId(pId){ return this.http.delete<any>(this.deleteUrl(pId), {observe: 'response'}) .pipe(catchError(this.handleError)); } I ...

Customizing the Material UI v5 theme with Typescript is impossible

I'm attempting to customize the color scheme of my theme, but I am encountering issues with accessing the colors from the palette using theme.palette. Here is a snippet of my theme section: import { createTheme } from "@mui/material/styles&qu ...

Receiving an eslint error while trying to integrate Stripe pricing table into a React web application

If you're looking to incorporate a Stripe documentation code snippet for adding a stripe-pricing-table element, here's what they suggest: import * as React from 'react'; // If you're using TypeScript, don't forget to include ...

Adjust the selected value in real-time using TypeScript

Hey there, I've got a piece of code that needs some tweaking: <div> <div *ngIf="!showInfo"> <div> <br> <table style="border: 0px; display: table; margin-right: auto; margin-left: auto; width: 155%;"& ...

Employing the filter or find technique to extract an element contained within a JSON data structure

Is it possible to retrieve one of these items using the filter or find method to search for a match within the fiberAgrupations array? I attempted the following: const landlineRate = this.monolineJsonRates[0].cambioCaudal.getAll() .filter(landlinedRat ...

Why are my class data types not aligning with JSON objects?

In my Node.js project using TypeScript, I have defined the Tariff and Tariffs classes. I also generated fake data in JSON format that should align with these Classes. However, I encountered an error in the resolve() method stating: Argument of type &apo ...

Can one inherit under specific conditions?

I have just started exploring the OOP paradigm and I am curious to know if it is possible to have conditional inheritance in TypeScript. This would help avoid repeating code. Here is what I have in mind. Any suggestions or recommendations are greatly appre ...

Develop a fresh Typescript-driven sql.js database

I'm in the process of converting my JavaScript code to TypeScript. One of the libraries I rely on is sql.js. I have successfully installed the corresponding typing for it, but I am facing a roadblock when it comes to creating the database. Here is ho ...

What steps do I need to take for Typescript to acknowledge my unique global filter function?

I recently developed a unique Vue.js filter to properly format markdown syntax. While the filter functions as intended, I've encountered an issue with TypeScript (specifically in PhpStorm) not recognizing the 'markdown' filter within my comp ...

What steps are needed to develop a TypeScript component within Angular framework?

I've been attempting to develop an Angular Component in TypeScript. I'm trying to utilize document.createElement to build a toolbar within my component, but it's not appearing. Below is my Component code: import {Directive, Component, boot ...

Ways to validate email input with pattern in Angular 2

I need help figuring out how to use the email pattern error for validation using the hasError function in Angular 2. My goal is to apply the invalid class to my input field. Below, you can see the code from registration.component.html: <div class="inpu ...

Error: Unable to attach the "identity" property as the object does not support extension

I encountered a simple TypeError while attempting to format my POST body. Below is the function I am using for handleSubmit : const handleSubmit = (values: any, formikHelpers: FormikHelpers<any>) => { const prepareBody = { ...values.customerC ...