Determining TypeScript types for event handler arguments

GoJS
1

Hello there! I have downloaded go.d.ts and we’re working to be strict in our Type definitions around all GoJs codebase.

My struggle is that I have a hard time knowing what Types to use… this is just one example. What is the best way to know with certainty the Param Types or any other instance where I need to set the expected Type?
Thank you

{
			mouseDrop: (ev: go.InputEvent, node: any) => {
				nodeDropped(ev, node, go);
			},
			mouseDragEnter: (ev: go.InputEvent, node: any) => {
				node.elt(0).stroke = '#ffc74c';
			},
			mouseDragLeave: (ev: go.InputEvent, node: any) => {
				node.elt(0).stroke = '#1776D2';
			},
			selectionChanged,
		}
2

As you can read in the documentation for the mouseDrop property: GraphObject | GoJS API
the second parameter is declared to be a GraphObject.

Now it turns out that the type of the actual argument passed to that function will be of whatever type that the mouseDrop property was set. You don’t include it in your quote, but I suspect it was declared on a Node. So in the event handler you can cast it to be a Node. But you might not be able to change the type of the second parameter because that would be a narrowing of the actual type of the mouseDrop property.

{
  mouseDrop: (e: go.InputEvent, obj: go.GraphObject) => {
    const node = obj as go.Node;
    . . .
  },
  . . .
}

But really there’s no reason to write the types for the parameters, since those are determined by type propagation:

new go.Node(. . .,
    {
      mouseDrop: (e, obj) => {
        const node = obj as go.Node;
        . . .
      },
      . . .
    })
  .add(
    . . .
  )
3

I get it, but then I don’t… so I guess I don’t…

looking at this code example and following the docs GraphObject.html#mouseDragEnter, the event prop mouseDragEnter for a go.Node, when I set the 2nd param to Type go.GraphObject the method elt() doesn’t exist, if I set the Type to go.Node then the stroke prop doesn’t exist…

const docletTypeNodes = $(
		go.Node,
		'Auto',
		new go.Binding(
			'copyable',
			'',
			(event: go.ObjectData) => event.state !== GoJsNodeState.Copied
		),
		{
			mouseDrop: nodeDropped,
			mouseDragEnter: (ev: go.InputEvent, node: go.GraphObject) => {
				node.elt(0).stroke = '#ffc74c';
			},
			mouseDragLeave: (ev: go.InputEvent, node: any) => {
				node.elt(0).stroke = '#1776D2';
			},
			selectionChanged,
		},
		$(
			go.Shape,
			new go.Binding('fill', '', (event: any) => {
				if (event.state === GoJsNodeState.Copied) return '#ccc';

				if (
					event.state === GoJsNodeState.Palette ||
					event.state === GoJsNodeState.Diagram
				)
					return 'white';
			}),
			new go.Binding('stroke', '', (event: any) => {
				if (event.state === GoJsNodeState.Copied) return '#ccc';

				if (
					event.state === GoJsNodeState.Palette ||
					event.state === GoJsNodeState.Diagram
				)
					return '#1776D2';
			}),
			{
				strokeWidth: 1,
				figure: 'RoundedRectangle',
				alignment: go.Spot.Center,
			}
		),
		$(
			go.Panel,
			{
				stretch: go.GraphObject.Horizontal,
				alignment: go.Spot.Center,
			},
			'Horizontal',
			$(
				go.TextBlock,
				{
					margin: new go.Margin(2, 10, 0, 5),
					font: 'bold 10pt Barlow, sans-serif',
				},
				new go.Binding('text', 'title')
			),
			$(
				'Button',
				new go.Binding(
					'visible',
					'',
					(event: any) => event.part.data.state === GoJsNodeState.Diagram
				).ofObject(),
				{
					width: 22,
					height: 22,
					'ButtonBorder.stroke': null,
					_buttonStrokeOver: null,
					'ButtonBorder.fill': null,
					_buttonFillOver: null,
					click: deleteFromTemplate,
				},
				$(go.Picture, {
					desiredSize: new go.Size(17, 17),
					source: '/icons/circle-xmark-regular-black.png',
				})
			)
		)
	);
4

I thought maybe my issue is the existing code using elt() method so I tried these but stroke doesn’t exist.

Code source: https://gojs.net/latest/samples/orgChartEditor.html

mouseDragEnter: (ev: go.InputEvent, node: go.GraphObject) => {
				const selnode = node?.diagram?.selection.first();
				if (selnode) selnode.stroke = '#ffc74c';
			}

Then I tried this one but findObject() method doesn’t exist…

mouseDragEnter: (ev: go.InputEvent, node: go.GraphObject) => {
				const shape = node.findObject('SHAPE');
				if (shape) {
					shape.stroke = '#ffc74c';
				}
			},
5

You might want to read about how Nodes (or Links) are composed of different kinds of GraphObjects: GoJS Building GraphObjects -- Northwoods Software

Panel.elt returns a GraphObject, so you need to make sure it’s of a particular class before you can use any properties or methods on it that don’t belong to the general GraphObject class. So for example, the only classes that have a “stroke” property are Shape and TextBlock.

For your mouseDragEnter example, notice what I wrote in my previous reply, above. The second parameter is always declared to be a GraphObject, but you can cast it to be whatever the type is that has that mouseDragEnter property setting.

6

Interesting… this code seems to be working just fine… does it seem right? it surely is Typed LOL!

mouseDragEnter: (ev: go.InputEvent, node: go.Node) => {
    const shape = node.elt(0) as go.Shape;
    shape.stroke = '#ffc74c';
}
7

Sure, but I wouldn’t name the const “node” when it’s a Shape, not a Node.

8

Great! thank you :-)