如何在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。