Question

我遇到了web打包不返回值的js模块的问题，而我已经不知所措了。因此，我的方法是现在修改这些模块，使其对打字稿和Webpack更加友好。

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

import "knockout-sortable";

typescript正在发出导入，但是webpack正在“优化”导入，因此模块永远不会加载。

在内部，敲除排序可创建三个类并将它们分配给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语句却说该模块没有声明文件。（如果除去顶部的声明，则删除所有内容，那么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
    };
});

请注意，模块的factory方法返回的不是构造函数，而是实际的实例化对象。如果它是构造函数，那么我会知道如何创建类型声明，但是该对象已经创建并在导入时返回。（实际上，此返回的对象是全局对象）

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”。

如何为返回类实例的模块编写一个打字稿声明文件

1 个答案: