如何在 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，它在浏览器中不起作用：

未捕获的 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"，并使用 browser modules。这样做的缺点是 ES 模块仅在较新的浏览器中受支持，如果您需要支持它们，将无法在较旧的浏览器中工作。

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