How can TypeScript limit the number of properties allowed to be passed as a function parameter?

Question

How can TypeScript limit the number of properties allowed to be passed as a function parameter?

Here is what I currently have:

export interface RegionNode {
    nodeSelected: boolean;
    nodeEditable: boolean;
    zone: Partial<Zone>;
    parent: RegionNode | null;
    children: RegionNode[];
}

Now, I am looking for a sleek solution to create a generic function that accomplishes this:

function setNodeAndChildrenProperty(node: RegionNode, property: keyof RegionNode, state: boolean): void {
    // @ts-ignore
    node[property] = state;
    for (const child of node.children) {
        setNodeAndChildrenProperty(child, property, state);
    };
}

One issue I faced was having to resort to using @ts-ignore because I am unsure how to limit the list of permitted properties to only "nodeSelected" and "nodeEditable", as well as encountering other challenges.

What would be an elegant solution to address this dilemma?

typescript typescript-generics

Answer 1

Answer №1

To achieve this, create a mapped type that will extract properties assignable to a specific type (such as boolean):

type PropertiesOfType<ObjType, PropType> = {
    [Key in keyof ObjType as ObjType[Key] extends PropType ? Key : never]: ObjType[Key];
};

The code within the [Key in ____] with the as clause filters out keys using never for properties that do not match the target property type. For example,

PropertiesOfType<RegionNode, boolean>

results in this type:

{
    nodeSelected: boolean;
    nodeEditable: boolean;
}

This type can then be utilized in your function to ensure TypeScript's understanding of assignment compatibility between node[property] and state:

function setNodeAndChildrenProperty(
    node: RegionNode,
    property: keyof PropertiesOfType<RegionNode, boolean>, // <====
    state: boolean
): void {
    node[property] = state;
    node.children.forEach((child) => {
        setNodeAndChildrenProperty(child, property, state);
    });
}

Playground link

Answer 2

To achieve this, create a mapped type that will extract properties assignable to a specific type (such as boolean):

type PropertiesOfType<ObjType, PropType> = {
    [Key in keyof ObjType as ObjType[Key] extends PropType ? Key : never]: ObjType[Key];
};

The code within the [Key in ____] with the as clause filters out keys using never for properties that do not match the target property type. For example,

PropertiesOfType<RegionNode, boolean>

results in this type:

{
    nodeSelected: boolean;
    nodeEditable: boolean;
}

This type can then be utilized in your function to ensure TypeScript's understanding of assignment compatibility between node[property] and state:

function setNodeAndChildrenProperty(
    node: RegionNode,
    property: keyof PropertiesOfType<RegionNode, boolean>, // <====
    state: boolean
): void {
    node[property] = state;
    node.children.forEach((child) => {
        setNodeAndChildrenProperty(child, property, state);
    });
}

Playground link

How can TypeScript limit the number of properties allowed to be passed as a function parameter?

Answer №1

Similar questions

Issues arising post transitioning to 14.0.0 from 13.0.0 version of ngx-masonry library leading to failed tests

The error message "TypeError: router.back is not a function" indicates that

How come the Angular8 form status registers as VALID even if the input fields are empty?

ngOnInit unable to properly listen to event stream

Using Vue.js 3 and Bootstrap 5 to Create a Custom Reusable Modal Component for Programmatically Showing Content

Having difficulty transferring types to and from a custom module?

Why doesn't Typescript 5.0.3 throw an error for incompatible generic parameters in these types?

The art of crafting informative error log messages in Protractor using TypeScript

The element 'PROGRAM_ID' is not recognized within the 'import @metaplex-foundation/mpl-token-metadata' type

Is it possible for Angular's `HttpClient` to use complex property types in the `.get()` generics aside from just `string` or `number`?

What is the method in Angular 6 that allows Observable to retrieve data from an Array?

A guide to effectively utilizing a TypeScript cast in JSX/TSX components

Steps for aligning the upper rectangular text in the center of the larger rectangular border

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

To effectively manage the form, I must carefully monitor any modifications and update the SAVE button accordingly in an Angular application

Transform the object into an array of JSON with specified keys

What is the best way to include a Generic type into a functional component's props that also extends a different interface for its props?

Customize the format of data labels in horizontal bar charts in NGX Charts

No bugs appeared in Next.js

Enabling Event bus suggestions for Typescript: A step-by-step guide