Как использовать файл.d.ts в Visual Studio 2017 для DayPilot

Question

Попытка Планировщика DayPilot в проекте ASP.Net Core в Visual Studio 2017 я обнаружил .d.ts файлы и думал, что так я получу IntelliSense, создавая свой JavaScript для библиотеки с использованием TypeScript.

У меня нет опыта работы с 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" }
];

По умолчанию tsconfig.json созданный Visual Studio в корне моего проекта

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

Это создает JavaScript ниже, который не работает в браузере:

Uncaught 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 вместо его импорта. Простое и прямолинейное решение, но недостатком здесь является то, что вы теряете преимущества, которые дают модули, и также возможно, что определения типов не написаны, чтобы приспособить этот вид использования.

2. Задавать "module": "es6" в вашем tsconfig.json и используйте модули браузера. Недостатком этого является то, что модули ES поддерживаются только в новых браузерах и не будут работать в старых, если вам потребуется их поддержка.

3. Используйте модуль связывания. Webpack - это популярный и гибкий вариант, но с огромными затратами на обучение и инструменты. Parcel - хорошая альтернатива, которая поставляется с поддержкой TypeScript из коробки. Я бы пошел с Parcel, если вы просто хотите, чтобы все было готово.