背景：
我正在将网页中的大型~3,000个内联<script>转换为TypeScript文件(PageScripts.ts(，然后页面将使用该文件作为<script src="PageScripts.js" defer></script>。
该脚本使用 SortableJS，它有一个可用的@types包。*.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抱怨它"找不到命名空间'可排序'"。
IDE 代码修复菜单说修复是添加一个import Sortable = require("sortablejs")行 - 但这意味着我的PageScripts.js文件又是一个模块，啊！
我也无法在tsconfig.json中设置module: 'none'，因为我的项目中还有其他 TypeScript 文件，这些文件是模块，我不想通过更改全局设置来影响它们。是否有每个文件的模块设置或其他内容？
问题：
那么 - 如何在不导致我的PageScripts.js文件成为模块的情况下使用@types/sortablejs中的类型？
尝试将sortablejsd.ts 文件添加到tsconfig.json文件中includes数组中，这将使此库在全球范围内可用。