Question

背景：

我正在将一个大〜3,000个内联<script>从一个网页转换为TypeScript文件（PageScripts.ts），然后该页面将其用作<script src="PageScripts.js" defer></script>。

该脚本使用具有a @types package available的SortableJS。 *.d.ts文件可在GitHub上找到：https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/sortablejs

原始脚本：

这是HTML页面中原始JavaScript中引起问题的部分：

<script type="text/javascript">

window.addEventListener( 'DOMContentLoaded', function() {

    var sortableOptions = {
        dataIdAttr: 'my-id',
        onEnd: function( ev ) {

            // do stuff
        }
    };

} );

</script>

我通过运行npm install --save @types/sortablejs添加了@types。

我的tsconfig.json如下：

  {
        "compileOnSave": true,
        "compilerOptions": {
            "noImplicitAny": true,
            "strict": true,
            "noEmitOnError": true,
            "removeComments": true,
            "sourceMap": true,
            "target": "es5" /* es5 for IE11 support. */,
            "typeRoots": [
                "node_modules/@types",
                "JSFiles/System.Web.dll/Types"
            ],
            "lib": [
                "es5",
                "dom",
                "dom.iterable",
                "es2015.core",
                "es2015.collection",
                "es2015.symbol",
                "es2015.iterable",
                "es2015.promise"
            ]
        },
        "exclude": [
            "node_modules"
        ]
    }

打字稿：

我将上述脚本片段转换为PageScripts.ts中的TypeScript：

import Sortable = require("sortablejs");

// ...

window.addEventListener( 'DOMContentLoaded', function() {

    var sortableOptions = {
        dataIdAttr: 'my-id',
        onEnd: function( ev: Sortable.SortableEvent ) {

            // do stuff
        }
    };

} );

此编译没有任何错误，但是，因为TypeScript文件具有单个import语句，这导致TypeScript将文件编译为自己的JavaScript模块，这意味着它不能直接被网页使用，因为TypeScript添加了到输出PageScripts.js文件的开头：

Object.defineProperty(exports, "__esModule", { value: true });

...由于未定义exports，因此会导致浏览器脚本错误。

所以我将其更改为使用/// <reference types=/>：

/// <reference types="sortablejs" />

// ...

window.addEventListener( 'DOMContentLoaded', function() {

    var sortableOptions = {
        dataIdAttr: 'my-id',
        onEnd: function( ev: Sortable.SortableEvent ) {        <--- "Cannot find namespace 'Sortable'."

            // do stuff
        }
    };

} );

但是现在PageScripts.ts无法编译，因为tsc抱怨它“找不到命名空间'Sortable'。”

IDE代码修复程序菜单显示修复程序是添加一个import Sortable = require("sortablejs")行-但这意味着我的PageScripts.js文件又是一个模块，哎呀！

我也无法在module: 'none'中设置tsconfig.json，因为我的项目中还有其他模块的TypeScript文件，并且我不想通过更改全局变量来影响它们设置。是否有每个文件模块的设置？

问题：

那么-如何在不使我的@types/sortablejs文件成为模块的情况下使用PageScripts.js中的类型？

Answer 1

尝试将sortablejs文件中的includes d.ts文件添加到tsconfig.json数组中，这将使该库在全局范围内可用。

如何使用来自TypeScript文件而不是Module的@types是Module？

背景：

原始脚本：

打字稿：

问题：

1 个答案: