如何在Visual Studio 2017的ASP.NET Core项目中为DayPilot使用.d.ts文件

Hey there! Let's get this sorted out for you—since you're new to TypeScript, I'll break this down step by step so you can get IntelliSense working and your scheduler up and running smoothly. 😊

First, Let's Make Sure TypeScript Can Find the DayPilot Types #

The .d.ts file is TypeScript's "type definition" file—it tells TypeScript what methods, properties, and classes are available in the DayPilot library. For Visual Studio to pick this up properly:

1. If you don't already have a tsconfig.json file in your project root, create one. This file tells TypeScript how to compile your code and where to look for type definitions. Here's a basic config that works for ASP.NET Core:

{
  "compilerOptions": {
    "target": "ES6", // Compile to modern JS that works in most browsers
    "module": "ESNext",
    "outDir": "./wwwroot/js", // Output compiled JS files here (easy to reference in views)
    "strict": true, // Enforce type safety (great for beginners to catch errors early)
    "esModuleInterop": true // Fixes common import issues with libraries like DayPilot
  },
  "include": [
    "./**/*.ts", // Include all your TypeScript files
    "./wwwroot/lib/daypilot-pro/scripts/*.d.ts" // Make sure TypeScript finds DayPilot's type file
  ]
}

2. Double-check that your DayPilot .d.ts file has the same name as the JS file you're importing (e.g., daypilot-all.d.ts should pair with daypilot-all.js, not the minified .min.js version). Minified files often strip out the structure TypeScript needs for IntelliSense, so use the non-minified JS file for imports.

Fix Your TypeScript Code #

Your initial code is a great start—let's tweak it to work properly with the type definitions and add the necessary setup to render the scheduler:

// Import the DayPilot module (use the non-minified file for better type support)
import { DayPilot } from "../wwwroot/lib/daypilot-pro/scripts/daypilot-all";

// Initialize the scheduler with the DOM element ID ("dp" should match a div in your view)
const dp = new DayPilot.Scheduler("dp");

// Configure scheduler settings (IntelliSense should pop up as you type "dp.")
dp.scale = "Day";
dp.timeHeaders = [
  { groupBy: "Month", format: "MMMM yyyy" }, // Top header: full month + year
  { groupBy: "Day", format: "d" } // Bottom header: day number
];
dp.startDate = DayPilot.Date.today(); // Start at today's date
dp.days = 30; // Show 30 days
dp.heightSpec = "Max"; // Fill available height
dp.height = 600; // Set a default height fallback

// Add sample events to test
dp.events.list = [
  {
    id: "1",
    start: DayPilot.Date.today().addDays(2),
    end: DayPilot.Date.today().addDays(5),
    text: "Team Workshop"
  },
  {
    id: "2",
    start: DayPilot.Date.today().addDays(7),
    end: DayPilot.Date.today().addDays(8),
    text: "Client Meeting"
  }
];

// Finally, render the scheduler to the page
dp.init();

Get IntelliSense Working in VS2017 #

If you're not seeing auto-completion when you type dp.:

• Restart Visual Studio—sometimes it needs a refresh to pick up new type definitions.
• Right-click your project > TypeScript Tools > Refresh TypeScript References to force VS to rescan for type files.
• Ensure your tsconfig.json is saved and the include paths are pointing to the correct locations.

Compile and Reference Your JavaScript #

1. Enable auto-compile in VS2017: Right-click your project > Properties > TypeScript Build > Check "Compile on save". Now every time you save your .ts file, it will generate a .js file in the wwwroot/js folder.
2. In your Razor view (e.g., Index.cshtml), add a div for the scheduler and reference the compiled JS:

<!-- Div where the scheduler will render -->
<div id="dp"></div>

<!-- Reference DayPilot's JS first, then your compiled script -->
<script src="~/lib/daypilot-pro/scripts/daypilot-all.js"></script>
<script src="~/js/your-scheduler-file.js"></script>

Quick Tips for Beginners #

• Avoid importing minified JS files into TypeScript—stick to the full version for better type support.
• If you install DayPilot via npm instead of manually downloading, the type definitions will be automatically detected by TypeScript (no need to add paths to tsconfig.json).
• When you're stuck, hover over a property/method in VS—TypeScript will show you type hints and documentation from the .d.ts file.

内容的提问来源于stack exchange，提问作者mhep