如何为返回类实例的模块编写typescript声明文件

Question

我遇到了webpacking模块不返回值的问题，我已经无计可施了。因此，我的方法是现在修改这些模块，使其对typescript和webpack更友好。

下面是一个示例：knockout-sortable

它将模块定义为UMD样式的模块，但工厂函数不返回任何值。因此，当我导入它时，我必须使用：

import "knockout-sortable";

typescript发出了导入，但webpack正在“优化”掉导入，这样模块就永远不会加载。

在内部，knockout-sortable创建了三个类，并将它们分配给ko.bindingHandlers。从用户的角度来看，每个绑定处理程序都有一个options属性，我们可以在该属性上设置各种选项。因此，我认为模块返回一个包含三个实例的结构会更好。我将这段代码放在工厂函数的末尾：

return { 
   sortable: ko.bindingHandlers.sortable,
   draggable: ko.bindingHandlers.draggable,
   droppable: ko.bindingHandlers.droppable
};

我的期望是，我将能够在调用代码中执行此操作：

import * as sortable from "knockout-sortable";
sortable.sortable.options = { ... };

这样，编译器和webpack优化器就可以清楚地知道，我正在使用这个模块，所以它应该包含在捆绑包中。

我的问题是，如何为模块的这个返回值创建类型声明文件？

这就是我开始的地方，但是，虽然声明文件中没有错误，但是我的import语句说明没有模块的声明文件。(如果我删除了除顶部的declare之外的所有内容，那么import语句在查找声明时就不会有问题)。

我的tsconfig.json文件如下：

   {
        "compilerOptions": {
        "noImplicitAny": true,
        "noEmitOnError": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5",
        "module": "esnext",
        "moduleResolution": "node",
        "skipLibCheck": true,
        "typeRoots": [
          "../node_modules/@types",
          "typings"
        ],
        "baseUrl": "Scripts/",
        "importHelpers": true,
        "lib": [
          "dom",
          "es5",
          "scripthost",
          "es2015.promise"
        ]
      },
      "compileOnSave": true,
    }

下面是javascript模块的一个非常简化的版本：

(function(factory) {
    if (typeof define === "function" && define.amd) {
        // AMD anonymous module
        define(["knockout", "jquery"], factory);
    } else if (typeof require === "function" && typeof exports === "object" && typeof module === "object") {
        // CommonJS module
        var ko = require("knockout"),
            jQuery = require("jquery");
        factory(ko, jQuery);
    } else {
        // No module loader (plain <script> tag) - put directly in global namespace
        factory(window.ko, window.jQuery);
    }
})(function(ko, $) {
    var sortable = 1;
    var draggable =  [];
    var  droppable = {};

    return {
        sortable: sortable,
        draggable: draggable,
        droppable: droppable
    };
});

请注意，从模块的工厂方法返回的不是构造函数，而是一个实际的实例化对象。如果它是一个构造函数，那么我应该知道如何创建类型声明，但是对象在导入时已经创建并返回了。(本质上这个返回的对象是一个全局对象)

Answer 1

如果这对我有任何帮助，请评论我。如果没有的话，很抱歉浪费了您的时间。这是返回公共类型的常用方法。

  return {
    // Getter Methods
    getDraggable() {
      return ko.bindingHandlers.draggable;
    },
    getSortable() {
      return ko.bindingHandlers.sortable;
    },
    getDroppable() {
      return ko.bindingHandlers.droppable;
    }
  }

如果"ko“是我们的全局实例，那么工厂只返回方法(不是新的obj实例)。该方法返回'ko.bindingHandlers.droppable‘。