The property 'enabled' is not a standard feature of the 'Node' type

Question

The property 'enabled' is not a standard feature of the 'Node' type

Within the code snippet below, we have a definition for a type called Node:

export type Node<T> = T extends ITreeNode ? T : never;

export interface ITreeNode extends TreeNodeBase<ITreeNode> {
   enabled: boolean;
}
  
export abstract class Tree<Node> {
  nodeEnableToggle(node: Node): void {
    node.enabled = !node.enabled;
  }
}

But why am I encountering this error message:

The property 'enabled' does not exist on type 'Node'

Even when T is expected to extend from ITreeNode?

I attempted another approach as well:

type Node<T> = T & ITreeNode;

 initialize(source: Node): void {
    this.dataSource.data = source.children;
  }

Unfortunately, I faced the same issue:

The property 'children' does not exist on type 'Node'

javascript typescript

Answer 1

Answer №1

Creating a reproducible example can be challenging, but I have attempted to do so in this link. In my understanding, when using conditional types, you may need to provide two parameters to the generic - both implementing the ITreeNode interface. It seems like there might be a more efficient way to achieve this without redundancy.

However, I'm curious about the specific advantages of utilizing conditional types over a simpler approach like using extend, as demonstrated in the Tree1 class below.

You can explore the code further in the TS Playground Link.

interface TreeNodeBase<T> {
  obj: T;
}

export interface ITreeNode extends TreeNodeBase<ITreeNode> {
  enabled: boolean;
}
export type Node<T> = T extends ITreeNode ? T : never;

interface TreeActions<T> {
  action: (t: T) => void;
}

// Abstract keyword removed for demonstration
export class Tree<U, T extends Node<U>> implements TreeActions<Node<U>> {
  nodeEnableToggle(node: T): void {
    node.enabled = !node.enabled;
  }

  action() {}
}

// Abstract keyword removed for demonstration
export class Tree1<T extends ITreeNode> implements TreeActions<T> {
  nodeEnableToggle(node: T): void {
    node.enabled = !node.enabled;
  }

  action() {}
}

// Examples
interface ATreeNode extends ITreeNode {
    extra: number;
}
new Tree<ATreeNode, ATreeNode>();
new Tree1<ATreeNode>();

Answer 2

Creating a reproducible example can be challenging, but I have attempted to do so in this link. In my understanding, when using conditional types, you may need to provide two parameters to the generic - both implementing the ITreeNode interface. It seems like there might be a more efficient way to achieve this without redundancy.

However, I'm curious about the specific advantages of utilizing conditional types over a simpler approach like using extend, as demonstrated in the Tree1 class below.

You can explore the code further in the TS Playground Link.

interface TreeNodeBase<T> {
  obj: T;
}

export interface ITreeNode extends TreeNodeBase<ITreeNode> {
  enabled: boolean;
}
export type Node<T> = T extends ITreeNode ? T : never;

interface TreeActions<T> {
  action: (t: T) => void;
}

// Abstract keyword removed for demonstration
export class Tree<U, T extends Node<U>> implements TreeActions<Node<U>> {
  nodeEnableToggle(node: T): void {
    node.enabled = !node.enabled;
  }

  action() {}
}

// Abstract keyword removed for demonstration
export class Tree1<T extends ITreeNode> implements TreeActions<T> {
  nodeEnableToggle(node: T): void {
    node.enabled = !node.enabled;
  }

  action() {}
}

// Examples
interface ATreeNode extends ITreeNode {
    extra: number;
}
new Tree<ATreeNode, ATreeNode>();
new Tree1<ATreeNode>();

The property 'enabled' is not a standard feature of the 'Node' type

Answer №1

Similar questions

How is it possible to leverage the CDN URL mechanism for package management when working with Typescript?

Encountering issues with scope: Unable to retrieve value and receiving an error message stating 'Cannot assign value to undefined property'

Step-by-step guide to accessing the detail view upon selecting a table row in react.js

Employing getters in the toObject() method

The output from the second request using RxJS

Is Vue js converting nested objects into strings before returning them?

Issues with jQuery Ajax sending Post data to PHP script

Tips for customizing the cursor to avoid it reverting to the conventional scroll cursor when using the middle click

The reason behind my struggle with mapping API responses to an Interface in Angular

Displaying Various Items Based on the Language Selected in the Google Translate Widget

Sending a parameter to the load method of the Selectize jQuery extension

Vue.js navigation guards, restrict access to all unauthorized routes, grant entry to specific routes upon successful authentication

The Observable.subscribe method does not get triggered upon calling the BehaviorSubject.next

Submitting incomplete values from a Jquery form to a MySQL database

Error in Express Session: Property 'signin' is not found in type 'Session & Partial<SessionData>'. Code: 2339

Tips on retrieving specific information from PHP through jQuery AJAX

I need help with creating an AJAX JSON call using Angular. Let me share the JavaScript function that I currently have

`Is it possible to integrate npm libraries with typescript and ES6?`

When attempting to use the POST method with a JSON body in Postgresql, I encounter an error

What is the reason this switch statement functions only with one case?