Interfaces

Interfaces define a contract specifying what functionality a type must provide. A type or class implements an interface when it provides all the functionality defined in that interface. Types can implement multiple interfaces simultaneously, but can extend at most one class. This behavior is similar to interfaces in languages like Java, C#, and TypeScript.

Unlike TypeScript interfaces, yFiles for HTML interfaces exist as values at runtime, not just as types during compilation. This has several important implications:

You can use the instanceof operator to check if an object implements an interface.
Interfaces can have static properties and methods.
Interfaces can provide default implementations that are automatically available to implementing classes. This feature, known as “mixins” or “trait inheritance”, is similar to Java’s default interface methods or C#'s extension methods. When implementing an interface, a class only needs to provide implementations for methods and properties marked as abstract in the interface. For non-abstract members, the default implementation from the interface is automatically available. This means that classes implementing an interface can access more functionality than what they explicitly implement themselves.

Implementing Interfaces

To implement a yFiles for HTML interface, use the BaseClass function:

Implementing a yFiles interface with the BaseClass function

import { BaseClass, IVisualCreator } from '@yfiles/yfiles'

class CustomVisualCreator extends BaseClass(IVisualCreator) {
  createVisual(context: IRenderContext): Visual | null {
    return null
  }
  updateVisual(
    context: IRenderContext,
    oldVisual: Visual | null
  ): Visual | null {
    return oldVisual
  }
}

The BaseClass function accepts one or more types as arguments. When both extending a class and implementing interfaces, list the class first, followed by the interfaces. You can implement multiple interfaces, but can extend only one class. In TypeScript, adding an explicit implements clause is optional.

For quick, one-off implementations, many interfaces provide a static create method that enables concise anonymous implementation:

Anonymously implementing a yFiles interface with the static create method

const customVisualCreator = IVisualCreator.create({
  createVisual(context: IRenderContext): Visual | null {
    return null
  },
  updateVisual(
    context: IRenderContext,
    oldVisual: Visual | null
  ): Visual | null {
    return oldVisual
  }
})

TypeScript Option Overloads