Avoiding TypeScript error

yFiles interfaces are more than just a contract on the members that need to be present on a type. They can come with default implementations, support the native instanceof operator and reflection, and thus are visible at runtime. TypeScript on the other hand uses structural typing, meaning that a type "implements" another type or is assignment compatible whenever it has the same publicly declared members. These two ways of typing are incompatible. In order to properly implement an interface in yFiles, the BaseClass<> operator/utility function needs to be used, instead.

Please see the developer's guide on that topic for details and examples. Also search the demos for usages of BaseClass with type arguments in .ts files.

The basic idiom for implementing an interface in TypeScript is thus:

import { BaseClass } from 'yfiles/lang';
import { IVisualCreator, IRenderContext, Visual, SvgVisual } from 'yfiles.js';

class CustomVisualCreator extends BaseClass<IVisualCreator>(IVisualCreator) {

  createVisual(context: IRenderContext): Visual {
    return new SvgVisual(document.createElementNS('http://www.w3.org/2000/svg', 'g'))
  }

  updateVisual(context: IRenderContext, oldVisual: Visual): Visual {
    return oldVisual
  }
}

The problem will only surface at the usage of the class:

const myCreator: IVisualCreator = new CustomVisualCreator()

If the class is not properly defined as above (when the type parameters are omitted), the following error will be shown:

error TS2741: Property '$_IVisualCreator' is missing in type 'CustomVisualCreator' but required in type 'IVisualCreator'

This is because the yFiles TypeScript definition files contain private member declarations for all yFiles interfaces, named like $_IInterfaceName. This will prevent accidental false assignments or wrong interface implementation declarations.

This is a compile time error only and the code will work at runtime, if TypeScript emits the code anyway. In order to fix the compiler error, locally, either //@ts-ignore can be used or the assignment can be rewritten as follows:

const myCreator: IVisualCreator = new CustomVisualCreator() as unknown as IVisualCreator

We recommend adjusting the class definition, instead.