What steps can be taken to fix the error message "Type circularly references itself"?

Here's an example of an issue with a predictable outcome:

const actionTypes = {
  name: {
    set: "name/set",
  },
} as const;

type ActionTypes = { [key: string]: (string | ActionTypes) }; //record value is string or ActionTypes

// "GetActionType" circularly references itself
type GetActionType<A extends ActionTypes> = A extends Record<
  string,
  infer Value
>
  ? Value extends string
    ? Value
    : GetActionType<Value> // "GetActionType" is not generic
  : unknown;

type SiteAction = GetActionType<typeof actionTypes>; // "GetActionType" is not generic
// expected to be 'name/set'

Is it possible to avoid errors in this scenario?

Edit

Adds as const to declaration of actionTypes and correctly references the constant below

TypeScript version 4.0.2

Playground link.

typescriptcircular-reference

Answer №1

Here is a modified approach that should work:

There are two main differences from your initial method:

  • I changed Value extends string to Value extends ActionTypes for recursion purposes
  • I added as const to the declaration of siteActionTypes to infer specific types accurately
const siteActionTypes = {
  name: {
    set: 'name/set'
  }
} as const

type ActionTypes = { [key: string]: string | ActionTypes }

type GetActionType<A extends ActionTypes> = A extends Record<string, infer Value>
  ? Value extends ActionTypes
    ? GetActionType<Value>
    : Value
  : unknown

type SiteAction = GetActionType<typeof siteActionTypes>
// SiteAction now has the type 'name/set'

Check it out on Typescript Playground

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

Retrieve the final data-filled cell in a specified column

In Excel Office Scripts, I'm trying to find a way to dynamically select a range starting from cell B2 all the way down to the last cell in column 2 that contains data without any gaps. Basically, I want to achieve the same result as manually selectin ...

typescriptoffice-scripts

The declaration file for the module 'react-tilt' was not located

After following the installation and import steps for react-tilt as outlined in this guide, I encountered the following error message and am unable to utilize it. I'm uncertain about what the message implies. Is there anyone who can help me resolve th ...

javascriptreactjstypescriptimporttypescript-typings

Easy Steps to Simplify Your Code for Variable Management

I currently have 6 tabs, each with their own object. Data is being received from the server and filtered based on the tab name. var a = {} // First Tab Object var b = {} // Second Tab Object var c = {} // Third Tab Object var d = {}// Fou ...

javascriptjsonangulartypescript

Invoke an ActionCreator within a different ActionCreator

Calling an ActionCreator from another file is proving to be a challenge... The products.ts file contains the ActionCreators and Reducers for Products... import { setStock } from './Store.ts'; //.... export const addProduct = (product: IProduct) ...

reactjstypescriptredux

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Within my Angular 6 application, I am facing an issue with a variable named "permittedPefs" that is assigned a value after an asynchronous HTTP call. @Injectable() export class FeaturesLoadPermissionsService { permittedPefs = []; constructor() { ...

javascriptangulartypescriptasynchronousecmascript-6

Allow only specified tags in the react-html-parser white list

Recently, I've been working on adding a comments feature to my projects and have come across an interesting challenge with mentioning users. When creating a link to the user's profile and parsing it using React HTML parser, I realized that there ...

javascripthtmlreactjstypescript

Dealing with conflicting tsconfig.json files: Utilizing CommonJS for Node.js and ES6 for React.js

Here is the current folder setup for my TypeScript files: ts_dev --client *components.tsx *tsconfig.json --server *server.ts *tsconfig.json --share *utility.ts The Node.js server needs to use commonjs modules, while the client side compone ...

node.jsreactjstypescripttypescript2.0tsconfig

What is the best way to change the name of an imported variable currently named `await` to avoid conflicting with other variables?

Here is the given code snippet: import * as fs from 'fs'; import {promises as fsPromises} from 'fs'; // ... // Reading the file without encoding to access raw buffer. const { bytesRead, buffer as fileBuffer } = await fsPromises.read( ...

node.jstypescriptasync-awaitlint

Looping through an array of objects with Angular 4's ngFor directive to dynamically display content

I am working with Angular 4 and I am attempting to iterate through an array of objects to present the data in Angular Material grid tiles. The code snippet from my HTML file (app.component.html) is as follows: <div class="list" *ngIf="listContacts == t ...

arraysangulartypescriptfor-loopngfor

There was an error parsing the data from the specified URL (http://localhost:8000/src/client/assets/data.json

Hey there, I'm a newcomer to Angular and I'm having trouble reading a JSON array from a file. Every time I try, it gives me a "failed to parse" error. Can someone please provide some guidance? Here is my folder structure: src --assets ---a ...

javascriptjsonangulartypescriptangular-httpclient

JavaScript Equivalent of Declaration in TypeScript

In my Next JS application, I encountered a situation where a line of code relies on a variable from a script src in the app.tsx page. Here's how it looks: app.tsx: <script src="https://js.stripe.com/v3/"></script> config.ts: de ...

javascripttypescriptnext.js

Utilizing a Link element in conjunction with ListItem and Typescript for enhanced functionality

I am currently using material-ui version 3.5.1 My goal is to have ListItem utilize the Link component in the following manner: <ListItem component={Link} to="/some/path"> <ListItemText primary="Text" /> </ListItem> However, when I tr ...

reactjstypescriptmaterial-ui

Consolidate all REST service requests and match the server's response to my specific object model

My goal was to develop a versatile REST service that could be utilized across all my services. For instance, for handling POST requests, the following code snippet demonstrates how I implemented it: post<T>(relativeUrl: string, body?: any, params?: ...

angulartypescript

The invocation of `prisma.profile.findUnique()` is invalid due to inconsistent column data. An invalid character 'u' was found at index 0, resulting in a malformed ObjectID

The project I'm working on is built using Next.js with Prisma and MongoDB integration. Below is the content of my Prisma schema file: generator client { provider = "prisma-client-js" } datasource db { provider = "mongodb" url = env("DATABA ...

javascripttypescriptmongodbnext.jsprisma

Achieving seamless integration among react-templates, TypeScript, and webpack

I am attempting to integrate TypeScript, react-templates, and webpack for a seamless workflow. My starting point was the sample code provided at https://www.typescriptlang.org/docs/handbook/react-&-webpack.html. The configuration in the webpack.config ...

typescriptwebpackreact-templates

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

javascriptcssangulartypescriptbootstrap-4

The letter 'X' is not suitable for use as a JSX component because its return type 'Element[]' does not qualify as a valid JSX element

Currently, I am working on rendering two simple joke cards in TypeScript. The cards are displaying correctly in my browser, but I've encountered an error message that says: 'Jokes' cannot be used as a JSX component. Its return type 'Ele ...

reactjstypescriptreact-nativejsxtsx

Keeping the user logged in even after closing the app in an Ionic/Angular project: Best practices to retain user sessions

As a newcomer to angular/ionic, I have been given a project where the user needs to remain logged in even after closing the application unless they explicitly log out. Can anyone provide suggestions on how to modify the code below? login.page.ts import { ...

androidangulartypescriptionic-framework

Reacting to Appwrite events in a React Native environment

My React Native application encounters an error when subscribing to realtime events. The error message reads as follows: ERROR Error: URLSearchParams.set is not implemented, js engine: hermes. appwriteClient .subscribe( `databases.${APPWRITE_DATAB ...

typescriptreact-nativeappwrite

creating an implementation of a function within a parent abstract class

Can the implementation of a function be written inside an abstract class? I am planning to create an abstract class for my components to extend in order to share some behaviors. Is it acceptable to include something like this (as shown in the simple examp ...

angulartypescript