Is there a way to retrieve the keys from an object that is combined as shared union?

As an illustration

When the Type is placed in keyof, it results in never.

type T = {
        items?: string[] | undefined;
        'items.0.kind'?: string[] | undefined;
        'items.0.institution'?: string[] | undefined;
        'items.0.started_at'?: string[] | undefined;
        'items.0.finished_at'?: string[] | undefined;
        'items.0.specialization'?: string[] | undefined;
        'items.0.qualification'?: string[] | undefined;
    } | {
        user_is_blocked?: string[] | undefined;
        jwt_token_is_invalid?: string[] | undefined;
        jwt_token_is_expired?: string[] | undefined;
    }
type Keys = keyof T // === never

Answer №1

If you want to apply a conditional distributive type for manipulating different parts of a union, you can do so by:

interface UnionType {
        items?: string[] | undefined;
        'items.0.kind'?: string[] | undefined;
        'items.0.institution'?: string[] | undefined;
        'items.0.started_at'?: string[] | undefined;
        'items.0.finished_at'?: string[] | undefined;
        'items.0.specialization'?: string[] | undefined;
        'items.0.qualification'?: string[] | undefined;
    } | {
        user_is_blocked?: string[] | undefined;
        jwt_token_is_invalid?: string[] | undefined;
        jwt_token_is_expired?: string[] | undefined;
    }

type Distributive<T> = T extends any ? keyof T : never
type ManipulatedKeys = Distributive<UnionType> 

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

The defaultRowRenderer is causing issues with my Jest unit test. It seems to be related to an object with an anonymous import of createMulti

Encountering a failure in jest unit-tests when using the defaultRowRenderer method in react-virtualized for a Table component, with the error message: ...node_modules\react-virtualized\dist\es\Table\index.js:1 ({"Object.<anonym ...

When using Visual Studio Code debugger on a React project with TypeScript, breakpoints are not being triggered

I've been utilizing the Debugger tool in VS Code and my launch.json settings are set up as shown below: https://i.sstatic.net/dj3Qs.png However, despite adding breakpoints to my code, it doesn't halt there. Is there a specific configuration need ...

Tips for concealing title when window is resized?

I'm working on a webpage that has a title at the top, but I want to hide it on smaller devices and make it responsive when the window is resized. Currently, I only show the title when the window width (w) is greater than 450 pixels. However, I'm ...

Utilizing Typescript to extract type information from both keys and values of an object

I have a unique challenge of mapping two sets of string values from one constant object to another. The goal is to generate two distinct types: one for keys and one for values. const KeyToVal = { MyKey1: 'myValue1', MyKey2: 'myValue ...

Implementing useState in Typescript to manage state in a Child component with an input argument

Is there a way to hand down the setState function to a child component and utilize the c argument without encountering a typescript error? Parent Component: Sending down the setState function export interface State { value1: string; value2: string ...

What could be causing the error message "Unable to access 'http' property of undefined" to appear in this validator?

Can someone help me with creating an asynchronous validator for a reactive form control that checks if a username already exists? Below is the code for the async validator: userdata.service.ts import { HttpClient } from '@angular/common/http'; i ...

What is the method for obtaining the dynamic key of an object?

Is there a way for me to access the value of record.year dynamically? It seems like using record["year"] should give me the same result. I am trying to make my chart adaptable to different x-y axis configurations, which is why I am using fields[0] to retr ...

What is the issue with this asynchronous function?

async getListOfFiles(){ if(this.service.wd == '') { await getBasic((this.service.wd)); } else { await getBasic(('/'+this.service.wd)); } this.files = await JSON.parse(localStorage.getItem('FILENAMES')); var ...

Exploring the Usage of Jasmine Testing for Subscribing to Observable Service in Angular's OnInit

Currently, I am facing challenges testing a component that contains a subscription within the ngOnInit method. While everything runs smoothly in the actual application environment, testing fails because the subscription object is not accessible. I have att ...

Retrieving the length of a Pipe in the parent component using Angular 2

In Angular2, I have created a custom pipe to filter an array based on type ID and year arrays. Here is how it is defined: @Pipe({name: 'highlightedWorksFilter', pure: false}) export class HighlightedWorksFilterPipe implements PipeTransform { tra ...

Is it a bug if recursive generic types are extending types in a peculiar manner?

Consider the following scenario: interface Test { inner: { value: boolean, } } We also have a class defined as: class ContextualData<T> { constructor(public data: T) {} } The objective is to wrap the 'value' property in &apos ...

Can a constant value be dynamically defined in Typescript?

Trying to dynamically define a constant in Typescript has proven to be more challenging than I anticipated. Here's what I attempted: define(name: string, value: any): boolean { var undef; const name = value; return name == undef; } ...

Using amcharts ammaps in angular 2: A step-by-step guide

I am attempting to integrate ammaps into an Angular 2 application. After reviewing the code, it appears that my component is not recognizing the library. Here is a glimpse at my files: map.component.html <script src="http://www.ammap.com/lib/amma ...

Guidelines for simulating ActivatedRouteSnapshot in observable testing situations

I am currently testing an observable feature from a service in Angular. This particular observable will output a boolean value based on the queryParam provided. For effective testing of this observable, it is essential to mock the queryParam value. Howev ...

Guide on directing Ionic app to TabsPage after successful login

Currently, I have integrated a login system using Firebase and Ionic 2. My app is based on a Tabs template and I am facing an issue where upon successful login, the user is not redirected to the TabsPage as intended. Whenever I attempt to navigate using t ...

The ngx-datatable encountered a resolution issue with its dependency tree and was unable to resolve it

I've been trying to incorporate ngx-datatables into an Angular 12 project by running the command npm install @swimlane/ngx-datatable. However, after installation, I encountered the following Errors: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to r ...

What is the process for configuring ng e2e to run on a specific port?

Ever since moving to Angular 6, I've noticed that ng e2e is no longer able to run on an available port like it used to. In the past, when we were using Angular 4, the app service would be on port 4200 and running ng e2e would automatically select a fr ...

What is the quickest way to send a message with just one press of the Enter key

Whenever I press "Enter Keyword," the message should be sent instead of going to the next line. ...

Is there a way to navigate to a specific component selector within an ngFor loop?

I have a scenario where I have multiple components running inside *ngFor on the same page. My goal is to create button links at the top of the page that, when clicked, will scroll to the corresponding component on the page. Below are the code snippets tha ...

Step-by-Step Tutorial: Displaying Loading Text in Child Components with Angular 4

Within my "event.component" file, I have a nested component (app-grouplist) <div class="group-list"> <app-grouplist [hasStarted]="started" [hasEnded]="ended" Displaying Loading Groups... </app-grouplist> </div> Upon the initial page ...