Here is a public TypeScript type declaration that showcases the use of a third-party library and callback functions:
export class Generator {
public generate(settings: GeneratorSettings): void {
$('#' + settings.Id+ "").dataTable({
dom: 'RC<"clear">rti<"bottom"pl>',
sAjaxSource: settings.sourceUrl,
bServerSide: true,
pageLength: 15,
lengthMenu: [15, 25, 50, 100],
fnDrawCallback: (oSettings) => { this.internalCallback(oSettings); settings.publicCallback(); }
});
}
private internalCallback(oSettings: any) {
// Do some work
}
In order to allow users of this type to hook into events, a publicCallback property is included in the settings object. Users can set this property to their own function like so:
For example, you can assign the publicCallback in an HTML script block as follows:
settings.publicCallback = externalModule.initialise;
Where externalModule is an instance of another TypeScript type defined below:
export class ExternalModule {
public initialise() {
// Various tasks are performed here
$("#button").on("click", (event) => {
this.buildIdList(event);
});
}
private process(event: any){
// More processing happens here
}
The issue arises in the ExternalModule.initialise function when it is called from the other TypeScript module. The this keyword inside that function refers to the settings parameter where the publicCallback property is located.
Efforts have been made to address this by using .bind() method on settings.publicCallback, but it hasn't resolved the problem.