How to use .d.ts file in Visual Studio 2017 for DayPilot

Question

Trying DayPilot Scheduler in an ASP.Net Core project in Visual Studio 2017 I discovered .d.ts files and thought this is how I would get IntelliSense, producing my JavaScript against the library using TypeScript.

I have no experience of TypeScript so what I'm doing is likely incorrect, so far with suggestions from Visual Studio I have a .ts file like so:

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" }
];

The default tsconfig.json created by Visual Studio in the root of my project

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

This produces the JavaScript below which doesn't work in the browser:

Uncaught ReferenceError: exports is not defined at 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

I've tried referencing the .d.ts file using the syntax below but then I get an error in my script Cannot find name DayPilot which suggest the import as a potential fix.

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

What am I doing wrong and how should I be using the provided .d.ts?

Answer 1

By default, TypeScript compiles for CommonJS, which is supported by Node, but not browsers. In order to get your code working properly, there are a few routes to take:

1. Set "module": "none", load the daypilot script through a <script> tag and access the DayPilot globally in your ts file instead of importing it. A simple and straight-forward solution, but the downside here is that you lose the benefits that modules bring, and it's also possible that the type definitions aren't written to accomodate this kind of usage.

2. Set "module": "es6" in your tsconfig.json, and use browser modules. The downside to this is that ES modules are only supported in newer browsers, and won't work in older ones if you need to support them.

3. Use a module bundler. Webpack is a popular and flexible option, but with a lot of learning and tooling overhead involved. Parcel is a good alternative, which comes with TypeScript support out of the box. I'd go with Parcel if you just want to get things up and running.