如何在Visual Studio 2017中为DayPilot使用.d.ts文件

Question

在Visual Studio 2017的ASP.Net Core项目中尝试DayPilot Scheduler ，我发现了.d.ts文件，并认为这就是获取IntelliSense的方式，使用TypeScript针对库生成我的JavaScript。

我没有TypeScript的经验，所以我正在做的事情可能不正确，到目前为止，根据Visual Studio的建议，我有一个.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 Studio在项目根目录中创建的默认tsconfig.json

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

这将产生下面的JavaScript，该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为CommonJS编译，Node所支持，但浏览器不支持。 为了使您的代码正常工作，可以采取以下几种方法：

1. 设置"module": "none" ，通过<script>标记加载daypilot脚本，并在ts文件中全局访问DayPilot ，而不是将其导入。 一个简单而直接的解决方案，但是这里的缺点是您失去了模块带来的好处，并且也有可能没有编写类型定义来适应这种用法。

2. 在tsconfig.json中设置"module": "es6" ，并使用浏览器模块 。 不利的一面是，ES模块仅在较新的浏览器中受支持，如果需要支持，则在较旧的浏览器中将不起作用。

3. 使用模块捆绑器。 Webpack是一种流行且灵活的选项，但是涉及大量的学习和工具开销。 Parcel是一个很好的选择，它提供了TypeScript支持。 如果您只想启动并运行，我会选择Parcel。