Antd Tree right click, unable to retrieve custom node information

Question

just starting with antd and Typescript. I have a data structure for my tree with some extra information, this is the interface for it:

export interface TreeStructure {
title: string;
key: string;
idPadre?: string | undefined;
assetType: string;
assetTypePadre?: string | undefined;
children?: TreeStructure[]}

I can see the tree structure without problem, but I am trying to implent a function for the right click and acces to that extra information:

      const onRightClick:TreeProps['onRightClick']= ({event,node} ) => {
console.log(node)
console.log(node.assetType)  
  }

console.log(node) is showing all the information:

But I can´t acces to that information destructuring node:

I suppose it is due the typing TreeProps... How could I acces to that information?? Thanks in advance

Answer 1

If your functions are not inline then you can approach 1 otherwise use second one to infer custom node types.

Type 1 Type 2

import { Tree, TreeDataNode, TreeProps } from 'antd';

export interface TreeStructure extends TreeDataNode {
    title: string;
    key: string;
    idPadre?: string | undefined;
    assetType: string;
    assetTypePadre?: string | undefined;
    children?: TreeStructure[];
}

type CustomTreeNode = TreeProps<TreeStructure>;

const App = () => {
    const onRightClick: CustomTreeNode['onRightClick'] = (e) => {};

    return (
        <>
            {/* Approach 1 */}
            <Tree onRightClick={onRightClick} />
            {/* ================= */}
            {/* Approach 2 */}
            <Tree<TreeStructure> onRightClick={(e) => {}} />;
        </>
    );
};

export default App;