Focusing on the specific properties of a type that serve as index signatures

Currently, I am in the process of developing a type definition set that functions on a user-provided type representing the model of their "state".

One crucial task I must accomplish is narrowing down the types of their model as I generate new types that will be utilized and exposed to them.

I have encountered difficulties in narrowing down properties on an object that are index signatures.

For instance:

/**
 * Selects only the keys of a specific type
 * Extracted from typelevel-ts
 */
type KeysOfType<A extends object, B> = {
  [K in keyof A]-?: A[K] extends B ? K : never;
}[keyof A];

interface Address {
  street: string;
  postCode: string;
}

interface Person {
  // My goal is to narrow down to this property
  favouriteNumbers: {
    [id: string]: number;
  };
  name: string;
  address: Address;
}

type PersonIndexSignatures = Pick<
  Person, 
  KeysOfType<Person, { [key: string]:  any; }>
>;

type PersonIndexSignaturesKeys = keyof PersonIndexSignatures;
// "favouriteNumbers" | "address"

As illustrated above, my attempt to narrow down Person based on { [key: string]: any; } results in both the favouriteNumbers and address keys.

Are there any techniques I can utilize to narrow the type down to just favouriteNumbers?

Answer №1

Looking at differentiating between Person["favouriteNumbers"] and Person["address"]:

Here is a possible approach:

type A = keyof Person["favouriteNumbers"];
// string | number

type B = keyof Person["address"];
// "street" | "postcode"

string is within A but not within B:

type A = string extends keyof Person["favouriteNumbers"] ? true : false;
// true

type B = string extends keyof Person["address"] ? true : false;
// false

You can incorporate this check into your KeysOfType (it may need some cleaning up):

type KeysOfType<A extends object, B extends { [key: string]: any }> = {
  [K in keyof A]: A[K] extends B ? string extends keyof A[K] ? K : never : never;
}[keyof A];

Then, you can do:

type PersonIndexSignaturesKeys = keyof PersonIndexSignatures;
// "favouriteNumbers"

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

Using TypeScript to transform a tuple type into an object

When dealing with a tuple type like: [session: SessionAgent, streamID: string, isScreenShare: boolean, connectionID: string, videoProducerOptions: ProducerOptions | null, connection: AbstractConnectionAgent, appData: string] there is a need to convert it ...

What is the reason that the protected keyword is not retained for abstract properties in TypeScript?

I'm uncertain whether this issue in TypeScript is a bug or intended functionality. In my Angular project, I have 3 classes - an abstract service, a service that implements the abstract service, and a component that utilizes the implementing service. ...

Incompatible parameter type for the Angular keyvalue pipe: the argument does not match the assigned parameter type

I need to display the keys and values of a map in my HTML file by iterating over it. To achieve this, I utilized Angular's *ngfor with the keyvalue pipe. However, I encountered an error when using ngFor: The argument type Map<string, BarcodeInfo ...

Is there a faster way to create a typescript constructor that uses named parameters?

import { Model } from "../../../lib/db/Model"; export enum EUserRole { admin, teacher, user, } export class UserModel extends Model { name: string; phoneNo: number; role: EUserRole; createdAt: Date; constructor({ name, p ...

Angular time-based polling with conditions

My current situation involves polling a rest API every 1 second to get a result: interval(1000) .pipe( startWith(0), switchMap(() => this.itemService.getItems(shopId)) ) .subscribe(response => { console.log(r ...

A guide on implementing directives in Angular 2

I am trying to load my navbar.html in my app.component.html by using directives and following the method below: Here is my navbar html: <p>Hi, I am a pen</p> This is my navbar.ts: import {Component, Directive, OnInit} from '@angular/c ...

Controlling the upper and lower limits in an input field for numerical values while manually typing in the text

Trying to implement an Angular component input with number type that allows setting a maximum and minimum value. Here is the code snippet used for calling the component in HTML: <app-input-number [(value)]="inputMinMaxValueNumber" [min]="min" [max]="m ...

utilizing $inject method along with supplementary constructor parameters

After referencing the answer found here: Upon implementing the $inject syntax, my controller code appears as follows: class MyCtrl { public static $inject: string[] = ['$scope']; constructor($scope){ // implementation } } // register ...

Ways to fix a "define is not defined" issue when utilizing jasmine karma with compiled typescript for component testing

I'm faced with an issue in my typescript app where the compiled code is stored in a single file named myjs.js within the js folder. Additionally, I have karma jasmine configured on my workspace. Inside myjs.js, there's a segment of code like thi ...

Typescript Tooltip for eCharts

I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...

Obtain the type parameter in Typescript

In my code, I have created a simple IFactory<OUT> interface along with two classes that implement it. export interface IFactory<OUT = any> { create(): OUT; } // number implementation export class NumberFactory implements IFactory<number ...

I'm having trouble linking MikroORM migration to Postgresql - the npx command keeps failing. Can anyone offer some guidance on what

I am encountering a situation similar to the one described in this post. I'm following Ben Awad's YouTube tutorial: you can see where I am in the tutorial here. Objective: My goal is to execute npx mikro-orm migration:create in order to generate ...

Vuex - Managing dependencies within nested modules

I am facing a challenge in expressing a dependency between properties within my app's state using Vuex. Upon logging in, the user must select one of several workspaces to connect to. It is essential for the workspace to depend on the login status; ho ...

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

Make sure to always keep all stars contained within a div element

How can I keep five stars inside a div even when the screen size is small? I have created a div with an image and I want to place five stars within that div. However, as I reduce the size of the screen, the stars come out of the box. Is there a way to en ...

Mysterious attributes of angular 6's <table mat-table> tag

This particular question regarding the angular material table has not been duplicated in any other discussions. Other similar questions pertain to angular versions 2-5, not version 6 The issue I am encountering is as follows: Can't bind to 'dat ...

What is the method for specifying a null value in Typescript?

I'm curious if this code snippet is accurate, or if there's a better way to define it. Is there an alternative to using error!? I'm unsure of its meaning and would appreciate clarification. ...

How can TypeScript rules be incorporated into a Next.js project without compromising next/core-web-vitals?

In my current NextJS project which is in typescript, I have the following configuration in my .eslintrc.json: { "extends": "next/core-web-vitals" } Now, I want to include additional typescript rules, such as enforcing the rule of n ...

Encountering a problem with Vue StripeCheckout while navigating to a different component

I'm looking to integrate the StripeCheckout component into my Vue application. After copying and updating their example code using the composition API from here, everything works fine when I route to the subscribe component. However, if I try to navig ...

How can I extract an array of objects from a response in Angular?

Arrange array of objects from the received data. Here is the data that I received. [ {name:someName, value:20}, {name:"", value:21} {name:someName, value:25} {name:someName , value:27} {name:"", value:21} {name:someName, value:20} ] I am looki ...