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

How can I transfer the data from a file to upload it in Angular 9 without manually typing it out?

Place an image at the top of the canvas at a specific location

Nested arrays in an Angular interface

TypeScript creates a .d.ts file that contains declaration statements rather than export declarations

Using PrimeNG checkboxes to bind objects in a datatable

Utilizando Typescript com Ionic 2 e AngularJS para autenticar através de um método de post na requisição HTTP e

Clarifying the concept of invoking generic methods in TypeScript

What is the best way to send {...rest} properties to a text field in react material?

Angular has surpassed the maximum call stack size, resulting in a Range Error

Unrestricted Angular Audio Playback without CORS Restrictions

Encountering issues with accessing the clientWidth and clientHeight references of the DOM in Vue

Developing React components with Typescript requires careful consideration when defining component props, especially when the component may be

Creating a library that relies on Cypress without the need to actually install Cypress

Unable to resolve the Typescript module within a different file

Jest: A guide on mocking esModule methods

How to replace/redirect the import statement in TypeScript from { X } to 'Y'

An exploration of effortlessly moving elements using webdriver.io - the power of

Having trouble retrieving the value of an HTML input field using form.value in Angular 5?

What is the process of using observables in Angular to retrieve a number or variable?

Resolving search box setup problem in PrimeNG dataView