如何使用不是模块的 TypeScript 文件中的模块 @types？

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 文件又是一个模块，啊！

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

问题：

那么 - 我怎样才能使用来自 @types/sortablejs 的类型而不导致我的 PageScripts.js 文件成为一个模块？

Answer 1

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