CODEWITHSUNDEEP
angularjscompiler-errorstypescriptangular-ui-grid
Varun
Varun

Reputation: 597

can we edit the definitely typed file in typescript to change some parameter types?

  1. Can we edit definitely typed file in Typescript?
  2. When using ui-grid with typescript I came across a scenario where I edited the ui-grid.d.ts file to make the date filter work. I need to filter the date based on the displayed result in the ui-grid and not on the raw data (the data which I am getting from the Web API).

Here is the code snippet:

ui-grid.d.ts file code:(under interface IFilterOptions)

condition?:  number;

Corresponding typescript code:

column.filter = {
                condition: (searchTerm, cellValue, row, column) => {
                    var date = this.$filter("date")(row.entity.Date, this.masks.date.angular)
                    return (date + '').toLowerCase().indexOf(searchTerm.toLowerCase().replace(/\\/g, "")) !== -1;
                }
            }

The error I faced is as follows:

Type '(searchTerm:any, cellValue:any, row:any, coloumn:any) => boolean' is not assignable to type 'number'

enter image description here

After that I made the changes to the filter object to return a number as follows:

column.filter = {
                condition: (searchTerm, cellValue, row, column) => {
                    var date = this.$filter("date")(row.entity.Date, this.masks.date.angular)
                    var res: number = (date + '').toLowerCase().indexOf(searchTerm.toLowerCase().replace(/\\/g, "")) !== -1 ? 1 : 0;
                    return res;
                }
            }

But after this I got error saying that:

Type '(searchTerm:any, cellValue:any, row:any, coloumn:any) => number' is not assignable to type 'number'

After this I made the change in the definitely typed file i.e. in the ui-grid.d.ts file as follows:

under interface IFilterOptions

I changed 

condition?:  number;

to

condition?: (searchTerm: any, cellValue: any, row: any, column: any) => boolean | number;

so the corresponding filter function which worked for me is as follows:

column.filter = {
                condition: (searchTerm, cellValue, row, column) => {
                    var date = this.$filter("date")(row.entity.Date, this.masks.date.angular)
                    return (date + '').toLowerCase().indexOf(searchTerm.toLowerCase().replace(/\\/g, "")) !== -1;
                }
            }

Is this the right way to solve this problem? Can anyone guide me to the right solution if the above solution is not good or it is not a good practice to edit the definitely typed file?

And also used 

column.filterCellFiltered = true;

instead of filter function but it didn't work. This is also a concern as why it didn't work because I need to filter the date based on the displayed result in the ui-grid and not on the raw data. Can anyone explain why it didn't work?

Please help me understand the right approach. Let me know if anyone require any other details. Thanks in advance.

Angular JS version: AngularJS v1.4.7
Angular JS definitely typed version : Angular JS 1.4+
ui-grid Version: * ui-grid - v3.0.5
ui-grid definitely typed version: ui-grid v3.0.3
typescript version: 1.0.3.0

Upvotes: 0

Views: 422

Answers (3)

alexandradeas
alexandradeas

Reputation: 130

You can, but the changes will be overwritten the next time you install/upgrade that dependency, and won't be reflected in git (assuming you're not checking generated files into source control). You're better off overriding the type definitions in your project. The common way to do this is within an @types directory but anywhere within your TS project will work.

You'll want to create a file with the extension .d.ts under TS's project files. The modules within this file will be merged with other declaration files, to determine the final type definition. So in your case you'd want:

// ui-grid.override.d.ts
declare module 'ui-grid' {
  // overriden types go here
}

The benefit of this method is that you only need to add the types you want, and the rest will be merged with the definitely typed declarations.

This is a very useful tool if you need to do things like type globals, or to provide additional type information for libraries. It's used extensively in the definitely typed declarations for library plugins which alter an api in some way.

I'd recommend reading the TS docs on declaration files as they're an incredibly useful tool if used correctly.

Although if you do find the types in definitely typed are incorrect/incomplete then please create a PR for the benefit of everyone

Upvotes: 0

Wahap
Wahap

Reputation: 141

i had also same problem , adding "< any >" beginning of the function should solve the problem.

like this :

          condition: <any>((searchTerm, cellValue, row, column) => 
          {
           return cellValue.indexOf(searchTerm) > -1
          })

and don't forget to parenthesis ().

Upvotes: 0

Amid
Amid

Reputation: 22382

I do not recommend to modify definitions and sources of the libraries you do not actively develop. What will happen when you will decide to upgrade to the newer version and it will override your changes? You will be forced to merge them each time you upgrade. And the larger your project will get the more complicated this will become.

I would recommend to either submit a request to the angular-ui team, or find a way to go with existing functionality.

Hope this helps.

Upvotes: -1

Related Questions