Using TypeScript and RowGroup extension, interface extensions aren't working

rycwilson

I have been using datatables for a while, but I'm relatively new to TypeScript and am struggling to make use of some interface definitions/extensions.

I have installed packages datatables.net-bs and datatables.net-rowgroup-bs (yes, it's an old project using bootstrap3).

I am importing like so:

import DataTable from 'datatables.net-bs';
import type { Config, Api } from 'datatables.net-bs';

This works fine for annotating the return value of new DataTable(...) and a function that returns some configuration options. For example (all this resides in a Stimulus controller class):

// class member:
declare dt: Api<any>
...
// method asynchronously initializes the table:
readyValueChanged(dataIsReady: boolean) {
  if (dataIsReady) this.dt = new DataTable(this.element, this.baseOptions)
}
...
get baseOptions(): Config {
  return { ... }
}

Now I want to work with the RowGroup extension. Along with the above imports, I add:
import 'datatables.net-rowgroup-bs';

However, TypeScript flags this.dt.rowGroup() and says "rowGroup does not exist on type Api<any>". It similarly complains when I add a rowGroup property to the options object.

I see that node_modules/datatables.net-rowgroup-bs/types/types.d.ts is an empty file, however node_modules/datatables.net-rowgroup/types/types.d.ts has the necessary declaration merge (or extension). Whether I import datatables.net-rowgroup or datatables.net-rowgroup-bs, the declaration merge just doesn't seem to happen. Do I need to declare a module, or ... something?

I should also mention... I'm not bothering with @types definitions, as my assumption is that the official type definitions are sufficient and I'm trying to keep things as simple as possible.

Like I said, I'm a TypeScript newb, so hopefully I'm just doing something dumb. I'd be grateful for any tips.

Thanks!

rycwilson

(ignore)

allan

Apologies! It looks like I totally missed RowGroup when I was doing that work. I've corrected that now and just released RowGroup 1.4.1 with that fix. Let me know how you get on with it.

Allan

rycwilson

Hi Allan. Thanks for the quick response.

I have upgraded the package but am still struggling. Let me start with a simple use case: I have a module that exports a tableConfig function that returns an object that will be used as the options argument in a call to new DataTable(...) in another module.

Setting aside table initialization, for now I just want to import the Config and Api types into the module that exports tableConfig so that I can annotate the return value of tableConfig and also annotate the first argument to the rowGroup.startRender property:

import type { Config, Api } from 'datatables.net-bs';  // with or without -bs?
import 'datatables.net-rowgroup-bs';  // with or without -bs?

export function tableConfig: Config {
  ...
  return {
    ...
    startRender(rows: Api<any>, group: string) { ... }
  }
}

The interface to those types is clearly extended in datatables.net-rowgroup/types/types.d.ts, but it seems no matter what combination or order of imports I try, typescript always complains that Object literal may only specify known properties, and 'rowGroup' does not exist in type 'Config'.

The fact that I'm using the -bs variation adds an extra wrinkle in that it's not clear to me when I need to import things from the -bs packages and when I don't, e.g. I'm guessing type definitions are not bootstrap-specific, but maybe I'm wrong about that.

Again, I'm a typescript newb and hope I'm not taking advantage of your great support for what boils down to basic understanding of working with imported type definitions. With that said... Any idea?

allan

I'll try setting up an example on the TypeScript playground tomorrow. It is quite possible that I've still got something wrong somewhere!

Allan

allan

The one thing I notice with your code is on line 4, tableConfig is missing the parenthesis to make it a function. I think it should look like this:

import type { Config, Api } from 'datatables.net-bs';
import 'datatables.net-rowgroup-bs';

export function tableConfig(): Config {
    return {
        rowGroup: {
            startRender(rows, group) {
                return group;
            }
        }
    };
}

That appears to work nicely on the Typescript playground.

Regarding the inline questions:

// with or without -bs?

Use the -bs packages if you want Bootstrap 3 styling. It will configure the class names (and any other alterations needed) for the component to work nicely with Bootstrap 3. Use -bs5 for Bootstrap 5, -bm for Bulma etc.

The download page can show you want packages to import. Select what you need and it will show the packages to import in NPM section at the bottom of the page.

Allan

rycwilson

Thanks Allan. The method syntax is just a local typo and not something happening in my code, so no relevance to the issue.

After going off and working on a few unrelated project files, and now returning to this, I am no longer seeing the typescript warnings. My import statements remain just as I outlined in my comment and just as you have illustrated in the playground. So I'm perplexed, but so it goes. Insert the "How is it working?" meme, lol.

If I can pinpoint whatever it was that led me astray, I'll try to capture it here for posterity. Thanks again for your assistance.

allan

Maybe the IDE / code editor you were using just needed a refresh of its state. I sometimes need to "Reload" VSCode for example.

Good to hear it is working now though.

Allan

rycwilson

Yes, I also suspect the tooling. I have noticed other instances of bogus warnings that go away either on their own or with a simple kick in the pants (i.e. change foo to fo and back to foo).

Alas, I'm on to the next challenge. Something quite fundamental, it seems: https://datatables.net/forums/discussion/77333/fn-datatable-is-undefined/p1?new=1