Expanding a recursively structured interface attribute

Question

Expanding a recursively structured interface attribute

I am working with a type called TreeItem from a library and I need to add an optional onClick function to this type (TreeItem2).

Is there a way to extend the type without duplicating the entire declaration?

This is the code I have written so far:

// Type defined in library
interface TreeItem {
    text?: string;
    items?: TreeItem[];
    // ...
};

// Extended type
type TreeItem2 = TreeItem & { items?: TreeItem2[], onClick?: () => void };

// Type usage
let item: TreeItem2 = {
    text: "a",
    onClick: () => {},
    items: [{
        text: "b",
        onClick: () => {}, // Error
    }]
};

Error message:

Type '{ text: string; onClick: () => void; }[]' is not assignable to type 'TreeItem[] & TreeItem2[]'.
  Type '{ text: string; onClick: () => void; }[]' is not assignable to type 'TreeItem[]'.
    Type '{ text: string; onClick: () => void; }' is not assignable to type 'TreeItem'.
      Object literal may only specify known properties, and 'onClick' does not exist in type 'TreeItem'.

Playground

typescript types

Answer 1

Answer №1

To simplify achieving the desired outcome, using polymorphic this would have been the easiest method. However, this approach involves modifying the base type, which is not feasible as it resides within a library. Nonetheless, for the sake of completeness, here is how it could be implemented:

interface TreeItem {
    text?: string;
    items?: this[];
};

interface TreeItem2 extends TreeItem {
    onClick: ()=> void
}

let item: TreeItem2 = {
    text: "a",
    onClick: () => {},
    items: [{
        text: "b",
        onClick: () => {}, // ok 
    }]
};

Given that altering the library type is not an option, an alternative solution is to exclude items from the original interface and introduce a custom interface with an updated items property:

// type defined in library
interface TreeItem {
    text?: string;
    items?: TreeItem[];
};

interface TreeItem2 extends Omit<TreeItem, 'items'> {
    onClick: ()=> void
    items?: TreeItem2[]
}

let item: TreeItem2 = {
    text: "a",
    onClick: () => {},
    items: [{
        text: "b",
        onClick: () => {}, // ok 
    }]
};

Answer 2

To simplify achieving the desired outcome, using polymorphic this would have been the easiest method. However, this approach involves modifying the base type, which is not feasible as it resides within a library. Nonetheless, for the sake of completeness, here is how it could be implemented:

interface TreeItem {
    text?: string;
    items?: this[];
};

interface TreeItem2 extends TreeItem {
    onClick: ()=> void
}

let item: TreeItem2 = {
    text: "a",
    onClick: () => {},
    items: [{
        text: "b",
        onClick: () => {}, // ok 
    }]
};

Given that altering the library type is not an option, an alternative solution is to exclude items from the original interface and introduce a custom interface with an updated items property:

// type defined in library
interface TreeItem {
    text?: string;
    items?: TreeItem[];
};

interface TreeItem2 extends Omit<TreeItem, 'items'> {
    onClick: ()=> void
    items?: TreeItem2[]
}

let item: TreeItem2 = {
    text: "a",
    onClick: () => {},
    items: [{
        text: "b",
        onClick: () => {}, // ok 
    }]
};

Expanding a recursively structured interface attribute

Answer №1

Similar questions

Require a property to be mandatory depending on the value of another property within a generic interface

What is the best approach to breaking down attributes upon import according to the theme?

Is the return type determined by the parameter type?

Shifting an item between various components to modify its properties

storing information in localStorage using react-big-calendar

Utilizing props in styled-components: A beginner's guide

Is it feasible to select which modules to be loaded into the application?

Python's yield functionality facilitates the creation of lightweight generators, allowing

Develop a new entity utilizing Array in Javascript

Challenges with date formatting arise for Spanish speakers when the date returns as NaN or an Invalid

Angular error: The function redirectToLogin in src_app_app_routing_module__WEBPACK_IMPORTED_MODULE_0__.AppRoutingModule is not defined

Having trouble retrieving multiple parameter values with ng bootstrap modal in Angular 4

Is it possible to modify the content of an element with a click event in Angular/HTML?

Having issues with Fullcalendar's custom view called "vertical resource view" functioning improperly

Empty initial value for first item in array using React hooks

Having trouble with the Typescript validator in my Angular IDE Eclipse Plugin - it doesn't seem

Tips for incorporating Extract<T, U> with a nested variant?

Attempting to create a login feature using phpMyAdmin in Ionic framework

Retrieving information using React Query in TypeScript

Can you please provide guidance on setting the return type to React.StatelessComponent?