TypeScript definition for datatables.net-buttons broken

ZeshueToral

I am trying to integrate datatables.net-buttons 3.1.2 into my typescript project, but I am getting a compiler error on line 88 of datatables.net-buttons/types/types.d.ts (it's in the interface definition for DataTablesStaticExtButtons). The error states "Property 'collection' does not exist on type 'Buttons'". Looking at the definition for the Buttons interface, it doesn't have a property named 'collection'. Not sure if this is something that was meant to be implemented in the Buttons interface and was overlooked, or if line 88 was supposed to be collection: CollectionButtons['collection']; instead of collection: Buttons['collection'];, since CollectionButtons does have a property called 'collection'. Either way, someone should check this out and fix the definition so it can be used.

allan

What version are you using? It looks like it is working okay with the latest version of DataTables and Buttons with this example.

That said, I did notice that the action function properties are un-typed to I need to look into that.

If you can link to a test case showing the issue you are seeing, that would be a huge help for me to be able to either fix the issue or help you resolve it.

Allan

ZeshueToral

I'm not sure I can actually recreate the example in the TypeScript playground as I feel like I probably have a less common use case where I'm not really using modules with the exception of a single global.d.ts file. I'm also using libman to manage the packages in my project instead of NPM (it's for an ASP.NET Core MVC app in Visual Studio, and I'm converting to TS from JS). With the configuration below, I get three errors for datatables.net related things (I realized after I posted this there were a couple more). Hopefully the information below is enough to go by. I've also made some temporary workarounds that seem to be working so far that I have also included.

Error 1: In wwwroot/lib/datatables.net-buttons/types/types.d.ts as I mentioned already. Also the one I'm most unsure about the fix for.

Error 2: In wwwroot/lib/datatables.net-select/types/types.d.ts saying on the import line, saying "TS2614 (TS) Module '"datatables.net"' has no exported member 'ObjectColumnRender'. Did you mean to use 'import ObjectColumnRender from "datatables.net"' instead?". This error is not present in version 2.0.5 but is in version 2.1.0, so I've been using 2.0.5.

Error3: In wwwroot/lib/datatables.net-fixedcolumns/types/types.d.ts. This error is just that the definitions aren't accessible in the same way they are for the other datatables.net extensions. For some reason the type definition is still showing version 3.2 even though I'm importing the 5.0.0 version (I reset the lib folder and re-imported the packages to confirm this). Updating the file to have the same import, export, and declaration as the other latest packages all have (at least the ones that I'm using), fixes the issue.

Error1:

Error1 Fix:

Error2:

Error2 Fix:

Error3:

Error3 Fix:

Relevant files:
tsconfig.json

{
  "compilerOptions": {
    "noImplicitAny": false,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noEmitOnError": true,
    "removeComments": true,
    "sourceMap": true,
    "target": "ES2022",
    "outDir": "wwwroot/js",
    "baseUrl": ".",
    "module": "None",
    "moduleResolution": "Node", //Required for resolving @popperjs/core
    "lib": [
      "DOM",
      "DOM.Iterable",
      "DOM.AsyncIterable",
      "ES2022"
    ],
    "typeRoots": [
      "wwwroot/lib/types",
      "wwwroot/lib", //Used for datatables.net references since they are outside of the types folder
    ],
    "types": [
      "jquery",
      "select2",
      "jquery-validation-unobtrusive",
      "bootstrap",
      "datatables.net",
      "datatables.net-buttons",
      "datatables.net-colreorder",
      "datatables.net-fixedcolumns",
      "datatables.net-select",
      "datatables.net-fixedheader"
    ]
  },
  "exclude": [
    "node_modules",
    "wwwroot/lib"
  ],
  "include": [ "wwwroot/src/**/*" ],
  "compileOnSave": true
}

libman.json

{
  "version": "1.0",
  "defaultProvider": "cdnjs",
  "libraries": [
    {
      "library": "jquery@3.7.1",
      "destination": "wwwroot/lib/jquery/"
    },
    {
      "library": "jquery-validate@1.21.0",
      "destination": "wwwroot/lib/jquery-validate/"
    },
    {
      "library": "jquery-validation-unobtrusive@4.0.0",
      "destination": "wwwroot/lib/jquery-validation-unobtrusive/"
    },
    {
      "library": "bootstrap@5.3.3",
      "destination": "wwwroot/lib/bootstrap/"
    },
    {
      "provider": "jsdelivr",
      "library": "bootstrap5-toggle@5.1.1",
      "destination": "wwwroot/lib/bootstrap5-toggle/"
    },
    {
      "library": "font-awesome@5.15.4",
      "destination": "wwwroot/lib/font-awesome/"
    },
    {
      "library": "select2@4.0.13",
      "destination": "wwwroot/lib/select2/"
    },
    {
      "library": "select2-bootstrap-theme@0.1.0-beta.10",
      "destination": "wwwroot/lib/select2-bootstrap-theme/"
    },
    {
      "provider": "unpkg", //Adds type definition
      "library": "datatables.net@2.1.6",
      "destination": "wwwroot/lib/datatables.net/"
    },
    {
      "library": "datatables.net-bs5@2.1.6",
      "destination": "wwwroot/lib/datatables.net-bs5/"
    },
    {
      "provider": "unpkg", //Adds type definition
      "library": "datatables.net-select@2.1.0", //2.1.0 imports ObjectColumnRender from datatables.net which does not export it
      "destination": "wwwroot/lib/datatables.net-select/"
    },
    {
      "library": "datatables.net-select-bs5@2.1.0",
      "destination": "wwwroot/lib/datatables.net-select-bs5/"
    },
    {
      "provider": "unpkg", //Adds type definition
      "library": "datatables.net-fixedcolumns@5.0.0",
      "destination": "wwwroot/lib/datatables.net-fixedcolumns/"
    },
    {
      "library": "datatables.net-buttons-bs5@3.1.2",
      "destination": "wwwroot/lib/datatables.net-buttons-bs5/"
    },
    {
      "provider": "unpkg", //Adds type definition (broken for 3.1.2)
      "library": "datatables.net-buttons@3.1.2",
      "destination": "wwwroot/lib/datatables.net-buttons/"
    },
    {
      "library": "datatables.net-colreorder-bs5@2.0.4",
      "destination": "wwwroot/lib/datatables.net-colreorder-bs5/"
    },
    {
      "provider": "unpkg", //Adds type definition
      "library": "datatables.net-colreorder@2.0.4",
      "destination": "wwwroot/lib/datatables.net-colreorder/"
    },
    {
      "provider": "unpkg", //Adds type definition
      "library": "datatables.net-fixedheader@4.0.1",
      "destination": "wwwroot/lib/datatables.net-fixedheader/"
    },
    {
      "library": "chart.js@4.4.1",
      "destination": "wwwroot/lib/Chart.js/"
    },
    {
      "library": "js-cookie@3.0.5",
      "destination": "wwwroot/lib/js-cookie"
    },
    {
      "provider": "unpkg",
      "library": "@types/jquery@3.5.30",
      "destination": "wwwroot/lib/types/jquery/"
    },
    {
      //jQuery dependency
      "provider": "unpkg",
      "library": "@types/sizzle@2.3.8",
      "destination": "wwwroot/lib/types/sizzle/"
    },
    {
      "provider": "unpkg",
      "library": "@types/jquery-validation-unobtrusive@3.2.35",
      "destination": "wwwroot/lib/types/jquery-validation-unobtrusive/"
    },
    {
      "provider": "unpkg",
      "library": "@types/jquery.validation@1.17.0",
      "destination": "wwwroot/lib/types/jquery.validation/"
    },
    {
      "provider": "unpkg",
      "library": "@types/bootstrap@5.2.10",
      "destination": "wwwroot/lib/types/bootstrap/"
    },
    {
      //Dependency for bootstrap
      "provider": "unpkg",
      "library": "@popperjs/core@2.11.8",
      "destination": "wwwroot/lib/types/@popperjs/core"
    },
    {
      "provider": "unpkg",
      "library": "@types/select2@4.0.63",
      "destination": "wwwroot/lib/types/select2/"
    },
    {
      "library": "limonte-sweetalert2@11.12.4",
      "destination": "wwwroot/lib/sweetalert2/"
    }
  ]
}

global.d.ts (used to make things globally available that aren't by default)

import { jQuery as _jquery } from '../lib/jquery/jquery.js';
import { Swal as _Swal } from '../lib/sweetalert2/sweetalert2.js';
import { Cookies as _Cookies } from '../lib/js-cookie/js.cookie.js';
import { Chart as _Chart } from '../lib/chart.js/chart.js';
import { nameof as _nameof } from './nameof.js';

import { InternalSettings as _InternalSettings, Config as _Config, Layout as _Layout, ConfigButtonsLanguage as _ConfigButtonsLanguage, Api as _Api, ApiRow as _ApiRow, ApiRows as _ApiRows, ApiCell as _ApiCell } from '../lib/datatables.net/js/datatables';
import { Settings as _Settings, FixedColumnsSettings as _FixedColumnsSettings } from '../lib/datatables.net-fixedcolumns/js/datatables.fixedcolumns.js' 


declare global {
    const Swal: typeof _Swal;
    const Cookies: typeof _Cookies;
    const Chart: typeof _Chart;
    const nameof: typeof _nameof;
}

//Required for FetchExportInternal to work properly
declare global {
    interface Navigator {
        msSaveBlob?: (blob: any, defaultName?: string) => boolean
    }

    interface String {
        CleanString(): string;
        NormalizeWhitespace(): string;
        MakeNullNull(): string;
        toNumber(): number;
        StringToBool(): boolean;
    }

    interface JQuery {
        onClassChange(callback: (event: _jquery.Event, oldClasses: string, newClasses: string) => void): JQuery;

        //Filling in missing extensions added by other frameworks
        bootstrapToggle(method?: 'destroy' | 'render' | 'on' | 'off' | 'toggle' | 'enable' | 'disable' | 'readonly' | 'indeterminate' | 'determinate'): void; //Bootstrap toggle does not have any type definitions
    }

    //Add type specific .val() functions
    interface JQuery<TElement = HTMLElement> {
        valN(): number;
        valS(): string;
        valA(): string[];

        valN(value: number): this;
        valS(value: string): this;
        valA(value: string[]): this;
    }

    namespace JQuery {
        interface Event {
            clipboardData?: any;
        }
    }

    type InternalSettings = _InternalSettings;
    type Layout = _Layout; 
    type ConfigButtonsLanguage = _ConfigButtonsLanguage; 
    type DtApi = _Api<any>; 
    type DtApiRow = _ApiRow; 
    type DtApiRows = _ApiRows; 
    type DtApiCell = _ApiCell; 

    type ChartJs = _Chart;
}

allan

Error 1: In wwwroot/lib/datatables.net-buttons/types/types.d.ts

Funny one this. I haven't been able to reproduce the error, however reading the code, I do agree that there is an error there. I've committed the proposed change.

Error 2: In wwwroot/lib/datatables.net-select/types/types.d.ts saying on the import line, saying "TS2614 (TS) Module '"datatables.net"' has no exported member 'ObjectColumnRender'

That one has been fixed and will be released next week.

Error3: In wwwroot/lib/datatables.net-fixedcolumns/types/types.d.ts. This error is just that the definitions aren't accessible in the same way they are for the other datatables.net extensions.

Thank you - I agree! I've just committed a fix.

Allan

ZeshueToral

Thank you for addressing these, @allan! I look forward to having these fixed Any idea on when they'll be shipped in a new version? Also, a note on the datatables.net-fixedcolumns one though, the interface called "settings" should be renamed to "Config" in order to merge properly with the main datatables.net definition correctly. As is, if you try to do $('#dataTable').DataTable({ fixedColumns: true }) TS will give you an error saying that "fixedColumns" does not exist in type 'Config'.

allan

Looks like the FixedColumns types have actually fallen behind the implementation. I've committed a fix.

Hopefully not too long until I release the updated packages. Had hoped it would be tomorrow, but other stuff has got in the way!

Allan