在TypeScript项目中使用无.d.ts的DevExpress Dashboard Viewer

Absolutely feasible! TypeScript has several workarounds for handling JavaScript libraries that don’t come with official type definitions. Here are the most practical approaches to resolve the API recognition issue you’re facing:

1. Type Assertions (Quick Fix) #

You can use type assertions to tell TypeScript to treat DevExpress as an untyped value (like any), bypassing type checks for these specific calls. This is perfect for quick testing or small-scale projects:

// Assert window as any to access the global DevExpress object
(window as any).DevExpress.Dashboard.ResourceManager.embedBundledResources();

// Initialize DashboardControl with type assertion
const dashboardControl = new (window as any).DevExpress.Dashboard.DashboardControl(
  document.getElementById("container"),
  {
    endpoint: "https://demos.devexpress.com/services/dashboard/api",
    workingMode: "Viewer",
    extensions: {
      "dashboard-panel": (control) => 
        new (window as any).DevExpress.Dashboard.DashboardPanelExtension(control)
    }
  }
);

Note: This method skips type checking entirely, so you won’t get auto-completion or type safety for these APIs. Use it for short-term fixes only.

2. Custom Type Declaration File (Long-Term Solution) #

For a robust, maintainable setup, create your own .d.ts file to define the types you need. This gives you type safety and IntelliSense support.

1. Create a new file named dev-dashboard.d.ts in your project root or types folder:

declare namespace DevExpress.Dashboard {
  // Define static methods for ResourceManager
  export class ResourceManager {
    static embedBundledResources(): void;
  }

  // Define DashboardControl class and its constructor
  export class DashboardControl {
    constructor(element: HTMLElement, options: DashboardControlOptions);
  }

  // Define the options interface for DashboardControl
  export interface DashboardControlOptions {
    endpoint: string;
    workingMode: "Viewer" | "Designer" | string; // Add specific modes if needed
    extensions: {
      [key: string]: (control: DashboardControl) => any;
    };
  }

  // Define DashboardPanelExtension class
  export class DashboardPanelExtension {
    constructor(control: DashboardControl);
  }
}

// Make DevExpress available on the global window object
declare global {
  interface Window {
    DevExpress: {
      Dashboard: typeof DevExpress.Dashboard;
    };
  }
}

export {};

2. Ensure your tsconfig.json includes this file (most configurations auto-pick up .d.ts files, but if not, add it to the include array):

{
  "include": ["src/**/*", "dev-dashboard.d.ts"]
}

Now TypeScript will recognize the DevExpress.Dashboard APIs and provide type hints. You can expand the definitions as you use more features of the library.

3. // @ts-ignore Comment (Temporary Bypass) #

If you just need to skip type checking for a single line, use the // @ts-ignore comment:

// @ts-ignore: DevExpress has no official type definitions
DevExpress.Dashboard.ResourceManager.embedBundledResources();

Warning: Overusing this can hide actual type errors in your code, so reserve it for one-off cases.

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