如何在VisualStudio2017中为.d.ts使用DayPilot文件

Question

在VisualStudio2017的一个ASP.Net核心项目中尝试ASP.Net，我发现了.d.ts文件，并认为这就是我将如何获得IntelliSense，使用TypeScript生成针对库的JavaScript。

我没有使用TypeScript的经验，所以我所做的可能是不正确的，到目前为止，通过Visual的建议，我有一个如下所示的.ts文件：

import { DayPilot } from "../wwwroot/lib/daypilot-pro/scripts/daypilot-all.min";
var dp = new DayPilot.Scheduler("dp");
dp.scale = "Day";
dp.timeHeaders = [
    { groupBy: "Month", format: "MMM yy" },
    { groupBy: "Day" }
];

Visual在我的项目根目录中创建的默认tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "exclude": [
    "node_modules",
    "wwwroot"
  ]
}

这将产生下面的JavaScript，它在浏览器中无法工作：

未定义的ReferenceError:导出未在dp.js:2中定义

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var daypilot_all_min_1 = require("../wwwroot/lib/daypilot-pro/scripts/daypilot-all.min");
var dp = new daypilot_all_min_1.DayPilot.Scheduler("dp");
dp.scale = "Day";
dp.timeHeaders = [
    { groupBy: "Month", format: "MMM yy" },
    { groupBy: "Day" }
];
dp.allowMultiMove = true;
//# sourceMappingURL=dp.js.map

我尝试使用下面的语法引用.d.ts文件，但是在我的脚本Cannot find name DayPilot中出现了一个错误，这表明导入是一个潜在的修复。

///<reference path="../wwwroot/lib/daypilot-pro/scripts/daypilot-all.min.d.ts"/>

我做错了什么?我应该如何使用提供的.d.ts

Answer 1

默认情况下，TypeScript为Node支持的CommonJS编译，但不支持浏览器。为了使代码正常工作，有几条路线可供选择：

1. 设置"module": "none"，通过<script>标记加载daypilot脚本，并在ts文件中全局访问DayPilot，而不是导入它。一个简单而直接的解决方案，但这里的缺点是您失去了模块带来的好处，而且类型定义也有可能不是为了适应这种使用而编写的。
2. 在"module": "es6"中设置tsconfig.json，并使用浏览器模块。这样做的缺点是，ES模块只支持在较新的浏览器中，如果需要支持旧浏览器，则不能在旧浏览器中工作。
3. 使用模块绑定器。Webpack是一种流行且灵活的选择，但涉及到大量的学习和工具开销。包裹是一个很好的选择，它附带了对TypeScript的支持。如果你只想让事情进展顺利的话，我会和包裹一起去。