클래스 인스턴스를 반환하는 모듈의 형식 스크립트 선언 파일을 작성하는 방법

값을 반환하지 않는 웹 패키지 js 모듈 문제가 발생하여 재치가 끝났습니다. 그래서 내 접근 방식은 이제 해당 모듈을 타이프 스크립트 및 웹 팩에보다 친숙하게 수정하는 것입니다.

예 : 녹아웃 정렬 가능

모듈을 UMD 스타일 모듈로 정의하지만 팩토리 함수는 어떤 값도 반환하지 않습니다. 따라서 가져올 때 다음을 사용해야합니다.

import "knockout-sortable";

typescript가 가져 오기를 내보내고 있지만 웹팩이 가져 오기를 "최적화"하여 모듈이로드되지 않습니다.

내부적으로 knockout-sortable은 3 개의 클래스를 만들어 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 = { ... };

이 방법으로, 모듈을 사용하고 있음을 컴파일러와 웹팩 최적화 프로그램에 분명히 알 수 있으므로 번들에 포함되어야합니다.

내 질문은 모듈 의이 반환 값에 대한 형식 선언 파일을 어떻게 만듭니 까?

이것은 내가 시작한 것이지만 선언 파일에는 오류가 없지만 내 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,
    }

다음은 매우 간단한 자바 스크립트 모듈 버전입니다 :

(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
    };
});

모듈의 팩토리 메소드로부터의 리턴은 생성자가 아니라 실제 인스턴스화 된 객체라는 점에 유의하십시오. 생성자 인 경우 형식 선언을 만드는 방법을 알고 있지만 객체는 이미 가져 오기 시점에 생성되어 반환됩니다. (실제로이 반환 객체는 전역입니다)