1

I'm trying to build a graphical programming editor, similar to Max, Grasshopper, or Antimony using TypeScript.

The basic idea is that a block represents a function with inputs on the left and outputs on the right and you can connect inputs and outputs together with edges.

The challenge I'm facing right now is that I want to have a type-safe static definition of a block along with some runtime type introspection to prevent the user from connecting inputs and outputs with types that don't match.

The simplest place to start is just defining a block as a function. For example:

function AdditionBlock(x: number, y: number): number {
    return x + y
}

However, there are some problems with this approach.

  1. How do I generate the labels for each input/output on the block?
  2. How can I validate at runtime that the user is attaching the proper type to one of the inputs of this block?

I've tried refined this approach a little bit, but I haven't quite been able to pull it off:

I created my own aliases to the intrinsic type system so that I can use instanceof at runtime.

class IntrinsicType<ActualType> {}
const NumberType = new IntrinsicType<number>()
const StringType = new IntrinsicType<string>()

Then I created a class with static properties defining the inputs, outputs, and evaluate function:

class AdditionBlock {
    static inputs: [
        { name: "x"; type: NumberType },
        { name: "y"; type: NumberType }
    ]
    static outputs: [{ name: "sum"; type: NumberType }]
    static evaluate(x: number, y: number): number {
        return x + y
    }
}

But already, I'm not terribly happy how I haven't been able connect the input and output types with the evaluate definition.

I think what would pretty much solve my problem is if there was some way to introspect the type definition of a function at runtime even if it were as simple as checking for the instanceof a class.

I hope that all makes sense -- please let me know if I should clarify anything.

Chet
  • 18,421
  • 15
  • 69
  • 113
  • You might want to check [the AST explorer](https://astexplorer.net/). Use the settings up top to change it to TypeScript mode and play around a bit. This allows you to read TypeScript code and generate workable objects, also, take objects in a specific format, and generate valid TypeScript code. – Madara's Ghost Jul 09 '17 at 20:31
  • Interesting... can you recommend any other tools for working with this? For example, when I define a type and use it elsewhere, it only tells me the name of the type, but that type could be imported from another file and aliased, etc. This would be an interesting approach though. Thanks! – Chet Jul 11 '17 at 04:55
  • For that exact reason, I don't use default exports (makes it that much harder to search). But for that specific question, TypeScript actually has services like these that editors normally plug into. Check the [Language Service API](https://github.com/Microsoft/TypeScript/wiki/Using-the-Language-Service-API) section of their wiki. – Madara's Ghost Jul 11 '17 at 06:48

0 Answers0