typescriptgantt-chartdhtmlx

How i can solve the Property 'ganttContainer' does not exist on type 'Gantt' problem


I wanted to use the Gantt chart with the Dhtmlx library using typescript, I found a mistake in the initiation of gantt. so how can i solve this ? this is the code

import React from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import VayuModule, { VayuModuleState } from '../../../VayuModule';
import './Gantt.scss';

export interface GanttState extends VayuModuleState {}

class Gantt extends VayuModule<any, GanttState> {
  Gantt: any;
  public render(): JSX.Element {
    return <div className="Gantt-container"></div>;
  }

  protected getDefaultState(): GanttState {
    return {};
  }

  componentDidMount() {
    const { tasks } = this.props;
    gantt.init(this.ganttContainer);
    gantt.parse(tasks);
  }

this is the error :

Property 'ganttContainer' does not exist on type 'Gantt'.  TS2339

    19 |   componentDidMount() {
    20 |     const { tasks } = this.props;
  > 21 |     gantt.init(this.ganttContainer);
       |                     ^
    22 |     gantt.parse(tasks);


Solution

  • The easiest way would be to add the following line before this.ganttContainer is used:

    // @ts-expect-error
    

    Here is the demo:

    https://files.dhtmlx.com/30d/9e7b693971f68966ca9b658e86bf7eda/react+tsx.zip