React+TS项目GanttStatic不存在form_blocks属性报错如何解决

在React + TypeScript技术栈项目中为dhtmlxGantt实现自定义多选输入表单块时，TypeScript抛出类型校验错误：

Property 'form_blocks' does not exist on type 'GanttStatic'.

报错截图参考：

当前编写的自定义multiselect表单块代码如下：

gantt.form_blocks['multiselect'] = {
  render: function(sns) {
    var height = (sns.height || '23') + 'px';
    var html =
      "<div class='gantt_cal_ltext gantt_cal_chosen gantt_cal_multiselect' style='height:" +
      height +
      ";'><select data-placeholder='...' class='chosen-select' multiple>";
    if (sns.options) {
      for (var i = 0; i < sns.options.length; i++) {
        if (sns.unassigned_value !== undefined && sns.options[i].key == sns.unassigned_value) {
          continue;
        }
        html += "<option value='" + sns.options[i].key + "'>" + sns.options[i].label + '</option>';
      }
    }
    html += '</select></div>';
    return html;
  }
}

dhtmlxGantt官方提供的TypeScript类型定义默认未覆盖form_blocks这个自定义扩展属性，TS静态类型检查时无法识别Gantt实例上的该属性，因此抛出属性不存在的错误。

根据项目规范二选一即可：

• 方案1：扩展模块类型声明（正式项目推荐，保留类型校验能力）
  在项目src目录下的全局类型声明文件（通常命名为typings.d.ts或global.d.ts，不存在可自行新建）中添加如下类型扩展代码：

declare module 'dhtmlx-gantt' {
  interface GanttStatic {
    form_blocks: Record<string, {
      render: (config: {
        height?: string | number;
        options?: Array<{key: string | number, label: string}>;
        unassigned_value?: string | number;
        [key: string]: any;
      }) => string;
      set_value?: (node: HTMLElement, value: any, task: any) => void;
      get_value?: (node: HTMLElement, task: any) => any;
      focus?: (node: HTMLElement) => void;
      [key: string]: any;
    }>;
  }
}
export {};

添加完成后TS即可正确识别gantt.form_blocks属性，后续编写自定义表单块逻辑时还能获得基础的类型提示，拼写错误也能被TS正常捕获。

• 方案2：类型断言临时绕过校验（适合快速调试场景）
  如果只是临时验证功能不想补充类型声明，可直接将gantt实例断言为any类型跳过检查，修改后代码如下：

(gantt as any).form_blocks['multiselect'] = {
  render: function(sns) {
    var height = (sns.height || '23') + 'px';
    var html =
      "<div class='gantt_cal_ltext gantt_cal_chosen gantt_cal_multiselect' style='height:" +
      height +
      ";'><select data-placeholder='...' class='chosen-select' multiple>";
    if (sns.options) {
      for (var i = 0; i < sns.options.length; i++) {
        if (sns.unassigned_value !== undefined && sns.options[i].key == sns.unassigned_value) {
          continue;
        }
        html += "<option value='" + sns.options[i].key + "'>" + sns.options[i].label + '</option>';
      }
    }
    html += '</select></div>';
    return html;
  }
}

注意：该方案会丢失对应代码段的类型校验能力，后续编写逻辑出现拼写错误时TS不会给出提示，正式环境不推荐使用。

内容的提问来源于stack exchange，提问作者Septe Shetia