Devextreme-reactive: Feature Request: Typescript definitions

[DanHarman]

Could you consider offering typescript support as this is a pretty key feature for many large projects.

[kvet]

Hi,
 
Thank you for your suggestion. We'll consider adding TypeScript definitions.

[quantuminformation]

Any news for this?

[kvet]

Hi,
 
We haven't added TypeScript definitions yet. But to be honest, we have no plans to implement it soon. We are currently working on a stable release of React Grid. We will update this ticket once we have any news.

[quantuminformation]

thx 4 the update, note if you write the lib in TS, you get the definitions for free.

[quantuminformation]

Adding ts defs, will likely make this lib usable for 50%+ more of developers these days

[DanHarman]

The other point is that its actually quite hard to pull in libraries without typings if you use the default spa app templates that Microsoft ship with. I think its a great idea, especially as the info seems to already be in the docs - I created a bunch of the typings myself for components I was configuring from them.

Dan Harman

---

From: Nikos [e-mail]
Sent: Monday, November 27, 2017 3:46:05 PM
To: DevExpress/devextreme-reactive
Cc: Dan Harman; Author
Subject: Re: [DevExpress/devextreme-reactive] Feature Request: Typescript definitions (#386)

Adding ts defs, will likely make this lib usable for 50%+ more of developers these days

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/DevExpress/devextreme-reactive/issues/386#issuecomment-347222917, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABGjbF3PpzbLwd5W0pidh_aEhyNbf7LZks5s6tk9gaJpZM4PzrLw.

[DanHarman]

This is really patchy in coverage, but if anyone else wants to add to it then this is a decent starting point for the typings. The Filtering State is the only one I've done properly at the moment by declaring it as a react component.

/**
 * Typings for @devexpress/dx-react-grid since not currently available from vendor.
 */

declare module '@devexpress/dx-react-grid' {
    import * as React from 'react';

    export const DataTypeProvider: any;
    export const EditingState: any;
    export const GroupingState: any;
    export const LocalFiltering: any;
    export const LocalGrouping: any;
    export const LocalSorting: any;
    export const SelectionState: any;
    export const SortingState: any;
    export const TableColumnResizing: any;
    export const FilterCellArgs: any;

    export interface Column {
        name: string;
        getCellValue: string;
    }

    export interface Filter {
        columnName: string;
        value?: string;
    }

    export interface FilteringStateProps {
        filters?: Filter[];
        defaultFilters: Filter[];
        onFiltersChange?: (filters: Filter[]) => void;
    }

    export class FilteringState extends React.Component<FilteringStateProps> { }

    export interface FilterCellArgs {
        filter: Filter;
        setFilter: (filter: Filter) => void;
        column: Column;
        style: any;
        tableColumn: TableColumn;
    }

    export interface TableColumn {
        /** A table column’s unique identifier. */
        key: string;
        /** Specifies the table column type. The specified value affects which cell template is used to render the column. */
        type: string;
        /** Specifies the associated user column. */
        column?: Column;
        /** Specifies the table column width. */
        width?: number;
    }

    export interface TableRow {
        /** A table row’s unique identifier. */
        key: string;
        /** Specifies the table row type. The specified value affects which cell template is used to render the row. */
        type: string;
        /** Specifies the associated row’s ID. */
        rowId?: number | string;
        /** Specifies the associated row. */
        row?: any;
        /** Specifies the table row height. */
        height?: number;
    }

    export interface TableRowArgs {
        /** A table row. */
        tableRow: TableRow;
        /** A React element used to render a table row. */
        children: any;
        /** Styles that should be applied to the root row element. */
        style?: any;
    }
}

[Jack-Works]

@DanHarman Not quite accurate... Too many any in it.
Like style?: any should be style?: React.CSSProperties

[DanHarman]

Yeah it was a quick hack for the bits I needed. Feel free to enhance and share - it is just a starting point. To be honest I was hoping devexpress would finish it, as really not a huge amount of work and they now have an example of what it would look like...

Dan Harman

---

From: Jack Works [e-mail]
Sent: Tuesday, December 12, 2017 11:28:03 AM
To: DevExpress/devextreme-reactive
Cc: Dan Harman; Mention
Subject: Re: [DevExpress/devextreme-reactive] Feature Request: Typescript definitions (#386)

@DanHarmanhttps://github.com/danharman Not quite accurate... Too many any in it.
Like style?: any should be style?: React.CSSProperties

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/DevExpress/devextreme-reactive/issues/386#issuecomment-351024324, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABGjbL7OvYwJ_CJjzffAvBLRjbmQK_v0ks5s_mNCgaJpZM4PzrLw.

[Jack-Works]

Here's currently I'm using

declare module '@devexpress/dx-react-grid' {
    import React from 'react'
    /** Column of grid */
    export interface Column<Data> {
        name?: keyof Data,
        title: any,
        getCellValue?: (row: Data) => any,
        dataType?: string
    }
    //#region DataTypeProvider
    export interface DataTypeProviderProps<Col, Row = any> {
        type: string,
        formatterTemplate: (data: { column: Column<Col>, row: Row, value: any }) => React.ReactNode
    }
    class DataTypeProvider<Data = any> extends React.Component<DataTypeProviderProps<Data>> { }
    //#endregion

    class FilteringState extends React.Component<{}> { }
    class RowDetailState extends React.Component<{}> { }

    //#region PagingState
    export interface PagingStateProps {
        currentPage: number
        onCurrentPageChange: (newPage: number) => void
        pageSize: number
        totalCount: number
    }
    class PagingState extends React.Component<PagingStateProps> { }
    //#endregion

    export {
        DataTypeProvider,
        FilteringState,
        RowDetailState,
        PagingState
    }
}

What about find a time to merge with @DanHarman then publish it on DefinitelyTyped?

[DanHarman]

I think it would need to be a lot better than my effort to go on definitely typed! Also since this is a commercial component, which we are happy to pay for, I’m somewhat reluctant to take on a support borden around it!

It can’t be more than 0.5-1d work to sort this, so come on devexpress!

Dan Harman

---

From: Jack Works [e-mail]
Sent: Thursday, December 14, 2017 4:23:45 AM
To: DevExpress/devextreme-reactive
Cc: Dan Harman; Mention
Subject: Re: [DevExpress/devextreme-reactive] Feature Request: Typescript definitions (#386)

Here's currently I'm using

declare module '@devexpress/dx-react-grid' {
import React from 'react'
/** Column of grid */
export interface Column {
name?: keyof Data,
title: any,
getCellValue?: (row: Data) => any,
dataType?: string
}
//#region DataTypeProvider
export interface DataTypeProviderProps {
type: string,
formatterTemplate: (data: { column: Column, row: Row, value: any }) => React.ReactNode
}
class DataTypeProvider extends React.Component> { }
//#endregion

class FilteringState extends React.Component<{}> { }
class RowDetailState extends React.Component<{}> { }

//#region PagingState
export interface PagingStateProps {
    currentPage: number
    onCurrentPageChange: (newPage: number) => void
    pageSize: number
    totalCount: number
}
class PagingState extends React.Component<PagingStateProps> { }
//#endregion

export {
    DataTypeProvider,
    FilteringState,
    RowDetailState,
    PagingState
}

}

What about find a time to merge with @DanHarmanhttps://github.com/danharman then publish it on DefinitelyTyped?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/DevExpress/devextreme-reactive/issues/386#issuecomment-351605040, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ABGjbO3XQpQn5AwNJuGtozhQeCUEhK21ks5tAKLRgaJpZM4PzrLw.

[quantuminformation]

Has anyone had success with these definitions yet? I'm tempted to look at this project again.

[franklixuefei]

I'm also waiting for the type definitions to roll out. This is very important as this feature may onboard so many other typescript developers. Please consider adding the index.d.ts soon :-)

[franklixuefei]

@kvet since the typescript feature has been merged, is this issue resolved?

[kvet]

Hi @franklixuefei,

We will close the issue with the feature release.

[franklixuefei]

@kvet Thanks! Any ETA on when the next release will be?

[kvet]

We plan to publish the first pre-release version next week.

[franklixuefei]

It seems like with 1.0.1 release, the typescript feature is not included. Is this feature supposed to be released in the next version?

[kvet]

I am afraid that the 1.1 branch was not ready for the pre-release last week. We will publish it soon.

[kvet]

We released initial TypeScript support in 1.1.0-beta.1. Your feedback is greatly appreciated.

You can install it with the next tag:

npm i --save @devexpress/dx-react-core@next @devexpress/dx-react-grid@next
npm i --save @devexpress/dx-react-grid-bootstrap3@next
npm i --save @devexpress/dx-react-grid-material-ui@next

[franklixuefei]

@kvet Thanks a lot for you and the team's effort in making this happen! I've upgraded the packages, but noticed a small glitch -

npm i --save @devexpress/dx-react-core@next @devexpress/dx-react-grid@next @devexpress/dx-react-grid-material-ui@next
npm WARN @devexpress/[email protected] requires a peer of @devexpress/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @devexpress/[email protected] requires a peer of @devexpress/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @devexpress/[email protected] requires a peer of @devexpress/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @devexpress/[email protected] requires a peer of @devexpress/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @devexpress/[email protected] requires a peer of @devexpress/[email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @devexpress/[email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.
npm WARN @devexpress/[email protected] requires a peer of @devexpress/[email protected] but none is installed. You must
install peer dependencies yourself.

I wonder if the dependencies should also be updated as well?

[franklixuefei]

bump

[kvet]

@franklixuefei, thank you for reporting the issue. We've recently released the 1.1.0-beta.2 version, which contains the fix.

[SergeyAlexeev]

TypeScript definitions for React Grid are available starting with v1.1.0 that is officially released.

[lock[bot]]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests.