0

I'm currently using Angular 13 and Typescript 4.5.2 in the project.

Also I'm using Syncfusion library for developing the application where I'm using datagrid component for dealing with table data.

Syncfusion data grid reference corresponding stackblitz

Where data present in the data.ts file. I'm getting the above error in data.ts file. Exactly in the 2nd line of the below code.

type cType = { CustomerID: string, ContactName: string, CustomerName: string };
export const data: Object[] = orderData.map((item: cType) => {
    let name: cType = (<cType[]>customerData).filter((cItem: cType) => {
        return cItem.CustomerID === item.CustomerID;
    })[0];
    item.CustomerName = (name || <cType>{}).ContactName;
    return item;
});

Not able to get exact idea to crack this. Need help to solve

R. Richards
  • 24,603
  • 10
  • 64
  • 64
NeonH
  • 65
  • 2
  • 11
  • I'm seeing way too much typing here. You should not have to do that, because if you have to, it means your typings are wrong from way above in your code. Please post a [mcve]. –  Jul 13 '22 at 12:09
  • And your particular error seems to stem from the fact that `orderData` is an array of object, and not an array of `cType`. This means the signature of the `map` function doesn't match, hence your error. –  Jul 13 '22 at 12:11
  • As @temp_user said, the vast majority of the time, you shouldn't need to write types on callbacks to `map` or `filter` or similar at all; they'll be correctly inferred from the type of the array you call them on. Separately, type assertions (like `(customerData)`) are a red flag, indicating that there's a problem with the type of `customerData`. It's much, much better to fix the type; type assertions (partially) bypass type checking, making using TS a bit pointless Finally, `{}` is flatly incorrect; `{}` isn't a `cType`, it's missing all three of `cType`'s required properties. – T.J. Crowder Jul 13 '22 at 12:15
  • @T.J.Crowder I think the `{}` casting is made to not be annoyed by the compiler, in a "I know what I'm doing, leave me alone" fashion. Although it's a very particular use case, I totally agree it should not happen in a code as simple as that. –  Jul 13 '22 at 12:16
  • @temp_user - Maybe. :-) I'd go with `item.CustomerName = name?.ContactName;` instead though. Same result, `item.CustomerName` will be `undefined` if `name` is `undefined` (I'm assuming `name` won't have *other* falsy values, just `undefined` from `filter` returning no elements). – T.J. Crowder Jul 13 '22 at 12:23
  • (Side note: Amy time you find yourself writing `someArray.filter(/*...*/)[0]`, consider using `someArray.find(/*...*/)` instead. It's more idiomatic, it stops going through `someArray` as soon as the predicate is satisfied, and it doesn't create an unnecessary array. The result is the same: either the element that satisfied the predicate, or `undefined` if none did. :-) ) – T.J. Crowder Jul 13 '22 at 12:37

1 Answers1

0

You can resolve this TS error by using the following code.

type cType = { CustomerID: string, ContactName: string, CustomerName: string };
export const data: Object[] = orderData.map((item: object) => {
    let name: cType = (<cType[]>customerData).filter((cItem: cType) => {
        return cItem.CustomerID === (item as cType).CustomerID;
    })[0];
    (item as cType).CustomerName = (name || <cType>{}).ContactName;
    return item;
});

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/my-app-516701544.zip

Dharman
  • 30,962
  • 25
  • 85
  • 135
Raja pandi
  • 101
  • 1