Using TypeScript and RowGroup extension, interface extensions aren't working
Using TypeScript and RowGroup extension, interface extensions aren't working
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!
Answers
(ignore)
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
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 tonew DataTable(...)
in another module.Setting aside table initialization, for now I just want to import the
Config
andApi
types into the module that exportstableConfig
so that I can annotate the return value oftableConfig
and also annotate the first argument to therowGroup.startRender
property: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 thatObject 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?
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
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:That appears to work nicely on the Typescript playground.
Regarding the inline questions:
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
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.
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
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
tofo
and back tofoo
).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