Crafting a recursive Typescript Immutable.js Record through typing

Question

Crafting a recursive Typescript Immutable.js Record through typing

I am currently working on representing a tree-like data structure using immutable js and typescript. At the moment, I am utilizing regular vanilla js objects to depict the nodes within the tree. Below is the type signature.

type NodeType = {
    value: string
    children: List<NodeType>
}

My goal is to convert this into a Record, but I am unsure of the process to achieve this. If I simply do the following:

const defaultValues: NodeType= {
    value: "foo",
    children: List()
}
const NodeRecord = Record(defaultValues)

...it will work fine at the top level, but it will anticipate the children to be of type NodeType rather than RecordOf(NodeType).

If anyone has insight on how to accomplish this, please share. Thank you

typescript types typescript-generics immutable.js

Answer 1

Answer №1

If you take a look at the documentation example, it could provide some assistance. The way your NodeType is currently defined only covers default values, not an actual Record.

import type { RecordFactory, RecordOf } from 'immutable';

// Define new Record factory functions using RecordFactory<TProps>.
type NodeTypeProps = { 
  value: string
  children: List<RecordOf<NodeTypeProps>>
};
const defaultValues: NodeTypeProps = { value: "meh" };
const makeNodeType: RecordFactory<NodeTypeProps> = Record(defaultValues);

type NodeType = RecordOf<NodeTypeProps>;
const someNodeType: NodeType = makeNodeType({ value: "some" });

Note: I haven't personally worked with Immutable and Typescript before, but from what I understand, dealing with recursive types like this might require some additional steps to satisfy the TS compiler.

Answer 2

If you take a look at the documentation example, it could provide some assistance. The way your NodeType is currently defined only covers default values, not an actual Record.

import type { RecordFactory, RecordOf } from 'immutable';

// Define new Record factory functions using RecordFactory<TProps>.
type NodeTypeProps = { 
  value: string
  children: List<RecordOf<NodeTypeProps>>
};
const defaultValues: NodeTypeProps = { value: "meh" };
const makeNodeType: RecordFactory<NodeTypeProps> = Record(defaultValues);

type NodeType = RecordOf<NodeTypeProps>;
const someNodeType: NodeType = makeNodeType({ value: "some" });

Note: I haven't personally worked with Immutable and Typescript before, but from what I understand, dealing with recursive types like this might require some additional steps to satisfy the TS compiler.

Crafting a recursive Typescript Immutable.js Record through typing

Answer №1

Similar questions

Learn how to implement React Redux using React Hooks and correctly use the useDispatch function while ensuring type-checking

An effective approach to automatically close an Expansion Panel in an Angular Mat when another one is opened

Tips for eliminating a single occurrence with Array.prototype.filter()

Encountered an issue with locating the module 'webpack-cli/bin/config-yargs' while attempting to run webpack-dev

The attribute 'name' cannot be found within the class 'MyComponent'

What could be causing ESLint to run on its own configuration file while working with Typescript?

Are you searching for ways to convert an object into an array?

Rows in angular ag grid are vanishing when data is filtered

Exploring the power of flow.js within an Angular 2 Typescript project

Error: Element type is invalid: a string was anticipated, but not found

Error message while attempting to update devextreme-datagrid: "Received HTTP failure response for an unknown URL: 0 Unknown Error"

Instructions for opening a URL in a new tab using Angular

Issue with Angular ngFor binding. What could be causing this error to occur?

Create Functions to Encapsulate Type Guards

What is the process for combining two interface declarations into a single interface?

Receiving feedback from an http.post request and transferring it to the component.ts file in an Angular

Guide to inheriting functions from a parent component in Angular 2

Is there a way for Ionic to remember the last page for a few seconds before session expiry?

The design of Next.js takes the spotlight away from the actual content on the

Unable to locate the "fcm-node" module in Node.js with TypeScript