Working with KendoUI, TypeScript and DefinitelyTyped

Question

I'm working with an old version of KendoUI (v2013.2.716) and TypeScript (v 0.9.5). I would update, but everything breaks and I'm on a tight deadline. Will do that later.

Anyway, I'm using the DefinitelyTyped kendo.d.ts and everything was fine until I tried this:

var grid = $('.k-grid').data('kendoGrid');
grid.dataSource.transport.options.read.url = newDataSource;
grid.dataSource.read();

This works fine, but Visual Studio doesn't like it. I get:

The property 'transport' does not exist on value of type 'kendo.data.DataSource'

I've had issues like this before and pretty sure I can make a custom.d.ts file to work around this error, but not sure how. Does anyone know how I can create a workaround?

"I would update, but everything breaks" haha yeah, that is the story of TypeScript. I was on a project using TS for 8 months, and every single update was a nightmare. At some point I just started casting everything to `` and forgot about strong types. — CodingWithSpike, Apr 12 '14 at 00:53

thomaux · Answer 1 · 2014-04-11T15:37:48.097

1

You can 'extend' existing type interfaces by simply declaring them twice, they will be merged.

So, this:

interface A {
    propB: string;
}
interface A {
    propC: number;
}

Will be treated by the compiler as:

interface A {
    propB: string;
    propC: number;
}

In your case you can add a custom declaration file, and add the following:

module kendo {
    interface data {
        interface DataSource {
            transport: any;
        }
    }
}

Of course, you can add typings for transport as well.

edited Apr 11 '14 at 15:37

answered Apr 11 '14 at 06:27

thomaux

19,133
10
76
103

Thanks. With `interface kendo.data.DataSource {...}` I get errors on the first `.` ... "could not find symbol 'data'. – dmathisen Apr 11 '14 at 13:21
Ah my bad, you'll need to specify it in the structure as they have in the definition file. I've updated what I guess should be the structure, but you'll need to confirm – thomaux Apr 11 '14 at 15:37
Thanks a lot for trying but still no luck :( I created a Gist to explain what I've tried. https://gist.github.com/dmathisen/10481517 – dmathisen Apr 11 '14 at 16:19

score 0 · Answer 2 · answered Apr 10 '14 at 22:59

0

I have run into similar issues. Most of the times, I fixed it by casting it to any.

Try this -

 (<any>grid.dataSource.transport).options.read.url = newDataSource;

Or, you can try this too -

(<kendo.data.DataSource>.grid.dataSource).transport.options.read.url = newDataSource;

But, fist option should work for sure!

Hope, this helps

answered Apr 10 '14 at 22:59

Cute_Ninja

4,742
4
39
63

Thanks. The first doesn't work. The only thing that sort of worked was `(grid.dataSource.transport).options.read.url = newDataSource;`. But then I get `The property 'read' does not exist on value of type 'kendo.data.DataSourceOptions'` :( Tried a combination of different things too. – dmathisen Apr 10 '14 at 23:12
try this --> (grid.dataSource.transport.options.read.url) = newDataSource; – Cute_Ninja Apr 10 '14 at 23:36
try this --> (grid.dataSource.transport.options.read.url) = newDataSource; OR this -> ((grid.dataSource.transport).options.read).url = newDataSource; – Cute_Ninja Apr 10 '14 at 23:42
Eh. I appreciate the help, but I've tried your suggestions and a ton of related formats, but still no luck :( I'm losing hope. – dmathisen Apr 11 '14 at 13:37
It is `transport` this isn't set up in the definition file, so you can't include that in the parenthesis. The correct format would be `(grid.dataSource).transport.options.read.url` or even less strong typing by casting `grid` directly to an `any` : `(grid).dataSource.transport.options.read.url` – CodingWithSpike Apr 12 '14 at 00:55

score 0 · Answer 3 · answered Apr 14 '14 at 22:09

This is not a particularly elegant answer, but here's what I do on a tight deadline:

grid.dataSource['transport'].options.read.url = newDataSource;

To me this is generally not advised as the whole reason you're using typescript is to maintain type safety, however in the case of 3rd party libraries I do make exceptions here and there by casting to any or using indexer syntax as above.

Working with KendoUI, TypeScript and DefinitelyTyped

3 Answers3