Using Typescript to access keys of an interface that extends another interface

Question

Using Typescript to access keys of an interface that extends another interface

One of the interfaces I have is the Basic interface:

interface Basic {
  [key: string]: {
    data: string;
  };
}

There is another interface that extends the Basic interface:

interface Another extends Basic {
  'onekey': OneKeyData;
  'secondkey': SeconKeyData;
}

An issue arises when using the generic T extends keyof Another because it allows any string keys due to the Basic interface. Both OneKeyData and SecondKeyData contain a data property, just like Basic. If it wasn't used in scenarios like this:

interface Options<TKey extends keyof Another> {
  field: Another[TKey]['data'];
}

What would be the best solution in this scenario? Is there a way to only get the keyof the Another interface?

typescript generics

Answer 1

Answer №1

One approach, as outlined in the feedback, involves accessing the keyof property while bypassing the index signature by utilizing a technique with conditional type inference.

type IdentifiedProperties<T> = {
    [K in keyof T]: string extends K ? never : number extends K ? never : K
} extends { [_ in keyof T]: infer U } ? U : never;

type IdentifiedPropertiesOfDifferent = IdentifiedProperties<Different> // "firstProperty" | "secondProperty";

Does this align with what you're seeking?

Answer 2

One approach, as outlined in the feedback, involves accessing the keyof property while bypassing the index signature by utilizing a technique with conditional type inference.

type IdentifiedProperties<T> = {
    [K in keyof T]: string extends K ? never : number extends K ? never : K
} extends { [_ in keyof T]: infer U } ? U : never;

type IdentifiedPropertiesOfDifferent = IdentifiedProperties<Different> // "firstProperty" | "secondProperty";

Does this align with what you're seeking?

Using Typescript to access keys of an interface that extends another interface

Answer №1

Similar questions

I encountered an unexpected obstacle while reloading my Next.js application with animejs. The error message reads: "SyntaxError: Unexpected token 'export'." This unwelcome occurrence took place during the

Stop the MatSort feature from activating when the space key is pressed in Angular Material

Utilizing UI-GRID to showcase JSON information

Aggregate and consolidate data based on multiple criteria while ensuring data integrity and maintaining type compliance

Type verification not functioning properly in a standalone TypeScript function

Factory function in Angular for translating using arrow syntax

The TypeScript class for Date has a property that outputs a string

Deliver a modification of the injected variable

Conceal the header on signup and login pages using Material UI

Data exchange between components via an API

What is the best way to incorporate dynamic infographics into an ionic app?

How can a .NET Core Rest API emit a stream to be consumed in Angular as an observable?

Some code paths fail to return a value in Google Cloud Function callable functions

In TypeScript, the function is failing to retrieve the complete array value

Start incrementing from the value of x

What is the proper way to arrange dates within strings in Angular?

Retrieving information from Next.js and Typescript with the help of getStaticProps

Ensuring external library object properties are limited in Typescript

What is the best practice for making a gRPC call within a Typescript Vue.Js component?

The TypeScript autocomplete feature is displaying two cars when I only need one