React/Typescript restrictions on onRenderCell/onClick/... functions?

Question

I'm trying to run Fluent UI Basic List example on my own bench. The example is presented here: https://developer.microsoft.com/en-us/fluentui#/controls/web/list. I copied entire example's code to app and replaced example's data with my own array. However I'm getting following error:

Type '(item: IExampleItem, index: number | undefined) => JSX.Element' is not assignable to type 
'(item?: { key: number; name: string; } | undefined, index?: number | undefined, isScrolling?: 
boolean | undefined) => ReactNode'.`
Types of parameters 'item' and 'item' are incompatible.
Type '{ key: number; name: string; } | undefined' is not assignable to type 'IExampleItem'.
  Type 'undefined' is not assignable to type 'IExampleItem'.  TS2322

83 | 
84 | 
85 |       <List items={data} onRenderCell={onRenderCell} />
   |                          ^
86 | 
87 |   );
88 | };

Is it because this is a Typescript file? Should I disable something to change compilation and prevent such errors?

My code after changes looks as follows: https://codepen.io/vipperdev/pen/QWNdeJe

tanmay · Accepted Answer · 2020-08-27T08:05:28.937

2

So, from the documentation:

onRenderCell

(item?: T, index?: number, isScrolling?: boolean) => React.ReactNode

Method to call when trying to render an item.

Notice the question mark next to the item? It signifies item is optional, so it may or may not be there, right? You have to handle that in your function as well in terms of type of the parameter. For example,

const onRenderCell = (
  item: IExampleItem | undefined,
  index: number | undefined
): JSX.Element => {
  return (
    <div className={classNames.itemCell} data-is-focusable={true}>
      {item?.name}
    </div>
  );
};

I made two changes above:

item: IExampleItem is now item: IExampleItem | undefined.
{item?.name} instead of {item.name} to tackle the possibility of item being undefined.

Here's a working codesandbox without the typescript error.

Let me know if you have any questions!

edited Aug 27 '20 at 08:05

answered Aug 27 '20 at 05:01

tanmay

7,761
2
19
38

Hey, thanks. It started working. Does it mean each parameter which is optional needs to be treated as it can be undefined? Why library creators have done it that way? If I specify exact template for each item, I think it's not necessarily to cover undefined state since framework/typescript checks it on runtime, am I correct? – VIPPER Aug 31 '20 at 07:28
@VIPPER if the `?` is present in the param documentation, then yes, they need to be either treated as `X | undefined` or, you could do the same thing as they did i.e. `item?: IExampleItem` but that only works if it's the last param. It's not possible here cause you have a param after it as well i.e. `index`. – tanmay Aug 31 '20 at 13:23
@VIPPER "Why library creators have done it that way?" => my guess is: they are taking care of the scenarios where the data may be loading so the item isn't available yet. – tanmay Aug 31 '20 at 13:29
1

That sounds interesting. So yeah, if data is not loaded yet, the component gets dummy items and skips their processing. – VIPPER Aug 31 '20 at 21:05

React/Typescript restrictions on onRenderCell/onClick/... functions?

1 Answers1