Completed
Last Updated: 20 Nov 2014 18:44 by ADMIN
Frank
Created on: 03 Oct 2012 06:05
Category: Kendo UI for jQuery
Type: Feature Request
261
TypeScript definitions
With the release of TypeScript by Microsoft it would be great if there would be a definition file for the different Kendo Libraries.

I actually played around with it myself, implementing some basic functionality from the core and the Calendar widget. This is by no means complete or error-free, but it gives an idea of the possibilities. I was able to get all the nice features TypeScript has to offer (e.g. type checking, auto completion).
20 comments
Roman
Posted on: 21 Mar 2013 09:20
Great news!
ADMIN
Brandon
Posted on: 21 Mar 2013 02:32
Delivered with the Kendo UI Spring 2013 release.
ADMIN
Brandon
Posted on: 11 Mar 2013 15:31
HI Jochen,

TypeScript definitions were included in the recent Q1 Beta, and you can download them from your account or from KendoUI.com. The official release of these will be on March 20th.

Thanks,

Brandon
Imported User
Posted on: 11 Mar 2013 09:17
What is the exact release date of the definition file?

Will it also include support for the DataViz library?
murat
Posted on: 01 Mar 2013 23:21
I'm happy that you're about to realease TypeScript d.ts file.
Very good....
ADMIN
Brandon
Posted on: 22 Feb 2013 19:53
Our Q1 Beta is next Tuesday, February 26th. The Q1 release will be in mid-March.
Sörnt Poppe
Posted on: 22 Feb 2013 19:36
Any dates for Q1? The other telerik controls packages are Q1.
Roman
Posted on: 17 Feb 2013 15:47
Started is very good news! any estimation when we can get it?
Mike
Posted on: 14 Feb 2013 13:31
Under Review --> Started: bravo !!! :)
Imported User
Posted on: 06 Feb 2013 18:23
I second Tim Cutting's comment to put the kendowebui.d.ts source at DefinitelyTyped. It has quickly become the home for TS definition files for so many projects...
Imported User
Posted on: 01 Feb 2013 13:23
I think this would be a good investment for Telerik - I think you'll see a lot of adoption for typescript in the .Net world, especially with increasing support from codebases like jQuery, google maps and infragistics.

Wouldn't it be great to see Kendo in https://github.com/borisyankov/DefinitelyTyped?
igor dvorkin
Posted on: 08 Dec 2012 22:16
Has anyone made more progress, please share your code in github/codeplex so I don't have to troll the comments :) 
James
Posted on: 03 Dec 2012 01:22
Me too please!
Imported User
Posted on: 17 Nov 2012 18:18
Would get me started on kendoui..
Jaap
Posted on: 30 Oct 2012 14:55
I have also managed to extend a Kendo class with TypeScript:

/// <reference path="jquery.d.ts" />
/// <reference path="jquery.plugins.d.ts" />
/// <reference path="kendo.d.ts" />

module xxxxx {

    export class CustomValidator extends kendo.ui.Validator {
        public static fn: any = CustomValidator.prototype;

        constructor (element: JQuery, options: Object) {
            super(element, options);
        }
    }
    //Add the default options, merged with the options from the baseclass
    CustomValidator.prototype.options = $.extend(true, {}, kendo.ui.Validator.prototype.options,
    {
        name: "CustomValidator",
    });

    kendo.ui.plugin(CustomValidator);
}

There are 2 hacks needed, because of the fact that the Class.extend function is not used (if I have examined correctly):
1: you need to define a public static fn property.
2: you need to define the default members of type Object (usually only the "options") outside the class, because kendo.ui.plugin expects them to be there. TypeScript class properties are only created at construction time of the class, so to late for the plugin function.
Jaap
Posted on: 30 Oct 2012 14:46
Interfaces is nice, but isn't enough if you want to be able to inherit your own classes from Kendo class. The following is a better approach: (note: this is far from complete, only the things I actually use)

/// <reference path="jquery.d.ts" />

declare module kendo {
    export class Class {
    }
    export class Observable extends Class {
        public bind(eventName: string, handlers: any, one: bool): Observable;
        public bind(eventName: string[], handlers: any, one: bool): Observable;
        public one(eventNames: string, handlers: any): Observable;
        public one(eventNames: string[], handlers: any): Observable;
        public first(eventName: string, handlers: any): Observable;
        public first(eventName: string[], handlers: any): Observable;
        public trigger(eventName: string, e?: any): bool;
        public unbind(eventName: string, handler?: any): Observable;
    };

    export module data {
        export class ObservableObject extends kendo.Observable {
            public get(field: string): any;
        }
        export class Model extends ObservableObject {
            public static define(base: any, options?: any): any;
            public fields: any;
        }
        export class DataSource extends kendo.Observable {
            constructor (options);
            public transport: any;
            public options: any;
            public reader: any;
            public read(data?: Object): void;
            public remove(model: Model): Model;
            public sync(): void;
            public total(): number;
            public view();
        }
        export var transports: any;
    }
    export module ui {
        export var plugin: any;
        export var progress: any;
        export class Widget extends Observable {
            constructor (element: JQuery, options);
            public element: JQuery;
            public options: any;
        }
        export class Validator extends Widget {
            constructor (element: JQuery, options);
            public _errors: Object;
            public validateInput(input): bool;
            public _findMessageContainer(fieldName: string): JQuery;
        }
        export class ListView extends Widget {
            public template: any;
            public altTemplate: any;
            public dataSource: any;
            public select(items?: any): any;
        }
        export class Grid extends Widget {
        }
    }

    export function attr(value: string): string;
    export function stringify(value: any): string;
    export function observable(object: any): any;
    export function template(template: string): any;
    export function culture(cultureName?: string): any;
    export function parseDate(value: string, formats?: string, culture?: string): Date; 
    export function parseInt(value: any, culture?: string): number;
    export function toString(value: any, format: string): string;

    export function bind(element: JQuery, viewModel?: Object): void; 
}

//extend the JQuery interface
interface JQuery {
    //kendo
    kendoWindow(options?: any): any;
    kendoCustomValidator(options?: any): any;
    kendoTabStrip(options?: any): any;
    kendoStop(clearQueue?: bool, gotoEnd?: bool): any;
    kendoAnimate(options, duration? , reverse? , complete? ): any;
    getKendoListView(): kendo.ui.ListView;
    getKendoGrid(): kendo.ui.Grid;
}

Timothy
Posted on: 28 Oct 2012 21:47
I played around with Typescript too and coming from a C# and Webforms background it gave me a better understanding of how to write javascript. I also tried to implement a kendo.d.ts interface but time pressures etc. etc didn't allow for completion.

As a bridge from the C# webforms world , to javascript based Kendo this would be a god-send.
Daniel
Posted on: 26 Oct 2012 18:07
Great suggestion.
Frank
Posted on: 03 Oct 2012 06:07
Which gave me nice auto completion in the following test code:

/// <reference path="kendo.d.ts" />

var $calendar = $("#test").kendoCalendar(),
    calendar = <KendoCalendar>$calendar.data("kendoCalendar");

calendar.bind("change", function (e) {
    alert("changed");
});
Frank
Posted on: 03 Oct 2012 06:05
The code i wrote so far:

/// <reference path="jquery.d.ts" />

interface KendoWidget {
    bind(event: string, handler: (e: KendoEvent) => void): any;
}

interface KendoEvent extends JQueryEventObject {
}

interface KendoCalendarMonthOptions {
    content?: string;
    empty?: string;
}

interface KendoCalendarOptions {
    culture?: string;
    dates?: Date[];
    depth?: string;
    footer?: string;
    format?: string;
    max?: Date;
    min?: Date;
    month?: KendoCalendarMonthOptions;
    start?: string;
    value?: Date;

    change?: (e: KendoEvent) => any;
    navigate?: (e: KendoEvent) => any;
}

interface KendoCalendar extends KendoWidget {
    destroy(): void;
    max(): Date;
    max(value: Date): Date;
    max(value: string): Date;
    min(): Date;
    min(value: Date): Date;
    min(value: string): Date;
    navigate(value: Date, view: string): void;
    navigateDown(value: Date): void;
    navigateToFuture(): void;
    navigateUp(): void;
    value(): Date;
    value(value: Date): Date;
    value(value: string): Date;
}

interface KendoTemplateOptions {
    paramName: string;
    useWithBlock: bool;
}

interface KendoSupportTransforms {
    css: string;
    prefix: string;
}

interface KendoSupport {
    touch: bool;
    pointers: bool;
    scrollbar: number;
    hasHW3D: bool;
    hasNativeScrolling: bool;
    devicePixelRatio: number;
    placeHolder: bool;
    zoomLevel: number;

    transforms: KendoSupportTransforms;
}

interface KendoDataObservableObject {
     // TODO
}

interface KendoStatic {
    // Methods
    bind(element: string): void;
    bind(element: string, viewModel?: Object, namespace?: Object): void;
    bind(element: string, viewModel?: KendoDataObservableObject, namespace?: Object): void;
    bind(element: JQuery): void;
    bind(element: JQuery, viewModel?: Object, namespace?: Object): void;
    bind(element: JQuery, viewModel?: KendoDataObservableObject, namespace?: Object): void;
    bind(element: Node): void;
    bind(element: Node, viewModel?: Object, namespace?: Object): void;
    bind(element: Node, viewModel?: KendoDataObservableObject, namespace?: Object): void;

    unbind(element: string): void;
    unbind(element: JQuery): void;
    unbind(element: Node): void;

    destroy(selector: string): void;
    destroy(element: JQuery): void;
    destroy(element: Object): void;

    format(item: string, ...values: any[]): string;
    htmlEncode(html: string): string;

    parseDate(value: string, formats?: string, culture?: string) : Date;
    parseDate(value: string, formats?: any[], culture?: string) : Date;

    parseFloat(value: string, culture?: string): number;
    parseInt(value: string, culture?: string): number;

    template(template: string, options?: KendoTemplateOptions): () => string;
    render(tmpl: (template: string, options?: KendoTemplateOptions) => string, data: any[]): void;

    touchScroller(element: string): void;

    toString(value: Date, format: string): string;
    toString(value: number, format: string): string;

    // Properties
    support: KendoSupport;
    // etc.
}

interface JQuery {
    kendoCalendar(options?: KendoCalendarOptions): JQuery;
}

declare var kendo: KendoStatic;