How can TypeScript allow an argument to only accept keys that match another argument?

Question

How can TypeScript allow an argument to only accept keys that match another argument?

I'm currently developing a library that deals with linked lists. The current implementation is hardcoded to work with a list node type containing a "next" field that points to the next node of the same type. However, I am looking to make it more flexible and agnostic to the specific field names used for links. This means it should work whether the list nodes are connected by "prev" references, "next" references, "previous" references, "pointer" references, or even numerical indices (like when using two-element arrays to simulate cons cells). In this case, the user would pass in a string indicating the name of the list link field.

One approach is to allow the library to accept objects conforming to an interface with an index signature of type any (e.g.,

interface ListNode { [key: string]: any }

), trusting that the user will provide an object with the specified link key. However, I would prefer to validate that the list nodes being passed to the library actually contain the fields with the specified names. This aligns with the purpose of utilizing TypeScript.

My current attempt goes like this:

function doListStuff(head: { [ptr]: ??? }, ptr: string) { ... }

However, I'm struggling to determine what to replace ??? with. Is there a way to define recursive anonymous types?

I also experimented with the following:

interface ListNode<Ptr extends string> {
   [Ptr]: ListNode<Ptr> | null;
}

But this resulted in a series of errors:

[ts] A computed property name in an interface must refer to an expression whose type is a literal type or a 'unique symbol' type. [ts] Cannot find name 'Ptr'. [ts] A computed property name cannot reference a type parameter from its containing type.

So, my question is: is there a way to define an interface with computed property names, or any other method to achieve what I'm aiming for?

typescript recursive-datastructures

Answer 1

Answer №1

If you want to create an object in TypeScript with keys that are of a generic key-like type, you can use a mapped type. The structure will look similar to this:

type ListNode<P extends string> = { [K in P]: ListNode<P> | null };

Although the above definition may seem to lack data, you can easily include additional structure through intersection types or other similar techniques.

For example, you can implement a function like doListStuff() as shown below:

function doListStuff<P extends string>(head: ListNode<P>, ptr: P) {
    const next: ListNode<P> | null = head[ptr];
    console.log(JSON.stringify(next));
    if (next) doListStuff(next, ptr);
}

You can test its functionality with the following code snippet:

doListStuff({ foo: { foo: { foo: { foo: null } } } }, "foo");
//{"foo":{"foo":{"foo":null}}}
//{"foo":{"foo":null}}
//{"foo":null}
//null;

Hope this explanation helps! Feel free to explore the code further using this code playground.

Answer 2

If you want to create an object in TypeScript with keys that are of a generic key-like type, you can use a mapped type. The structure will look similar to this:

type ListNode<P extends string> = { [K in P]: ListNode<P> | null };

Although the above definition may seem to lack data, you can easily include additional structure through intersection types or other similar techniques.

For example, you can implement a function like doListStuff() as shown below:

function doListStuff<P extends string>(head: ListNode<P>, ptr: P) {
    const next: ListNode<P> | null = head[ptr];
    console.log(JSON.stringify(next));
    if (next) doListStuff(next, ptr);
}

You can test its functionality with the following code snippet:

doListStuff({ foo: { foo: { foo: { foo: null } } } }, "foo");
//{"foo":{"foo":{"foo":null}}}
//{"foo":{"foo":null}}
//{"foo":null}
//null;

Hope this explanation helps! Feel free to explore the code further using this code playground.

How can TypeScript allow an argument to only accept keys that match another argument?

Answer №1

Similar questions

Tips on creating a hierarchical ul list from a one-dimensional array of objects

Running Typescript compilation in Azure DevOps

Implementing a dependent <select> within an HTML table is a useful feature to enhance user experience and organization of

Querying Cloud Firestore with User ID

Angular keeps FormArray elements' validity up-to-date as new elements are added to the array

encountering difficulties calling setAttribute within a function

Is Angular Template Polymorphism Failing?

What types should be used when passing a NgRx Action as a parameter to a function?

I am unable to transmit information using the `http.post` function

Creating JPEG images with specified dimensions. How can you add W x H sizing to an image?

Function Type Mapping

Issue encountered with dynamic ngStyle variable: ERROR Error: Unable to locate a supporting object 'ngStyleSmall'

Tips for creating a redirect to a specific page after clicking a link in an email using Angular

Unlock the power of Env variables on both server and client components with Next.js! Learn how to seamlessly integrate these

tsconfig.json: No input files were detected in the configuration file

Creating a OneToMany relationship in NestJS entity model

Encountered a higher number of hooks rendered compared to the previous render error on a component without any conditional hook usage

ngx-capture : Issue with capturing the entire page

There has been an unhandled runtime error: [object ProgressEvent] occurring with Next.js/Typescript

Error Encountered While Building AWS Amplify with Ionic 5 and Angular 10