javascript - Modificatori Popper.js

În aplicația noastră React & Typescript, folosim biblioteca react-datepicker, care la rândul său folosește popper.js. Încerc să atribui PopperModifiers, exact așa cum este arătat aici: https://reactdatepicker.com/#example-configure-popper-properties

Dar chiar dacă folosim exact ceea ce este în exemplu, obținem următoarea eroare TypeScript:

Overload 1 of 2, '(props: ReactDatePickerProps |
Readonly<ReactDatePickerProps>): ReactDatePicker', gave the following
error.
     Type '({ name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false; altAxis: true;
 }; })[]' is not assignable to type 'Modifiers'.
       Types of property 'shift' are incompatible.
         Type '() => { name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false;
 altAxis: true; }; } | undefined' has no properties in common with type
 'BaseModifier'.   Overload 2 of 2, '(props: ReactDatePickerProps,
 context: any): ReactDatePicker', gave the following error.
     Type '({ name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false; altAxis: true;
 }; })[]' is not assignable to type 'Modifiers'.
       Types of property 'shift' are incompatible.
         Type '() => { name: string; options: { offset: number[]; }; } | { name: string; options: { rootBoundary: string; tether: false;
 altAxis: true; }; } | undefined' has no properties in common with type
 'BaseModifier'.ts(2769)

De ce nu putem atribui array-ul Modifiers așa cum este în exemplu? Are cineva un exemplu despre cum se folosesc modificatorii popper cu TypeScript?

EDITARE: Ceea ce mă confusează cu adevărat este această proprietate a tipului Popper.Modifiers:

[name: string]: (BaseModifier & Record<string, any>) | undefined;

Poate cineva să explice aici, vă rog?

EDI2: Aceasta este implementarea noastră curentă a react-datepicker, problema este atributul popperModifier:

 <DatePicker
                selected={this.value ? new Date(this.value) : null}
                onChange={this.onChange}
                peekNextMonth
                showMonthDropdown={this.props.showMonthDropdown}
                showYearDropdown={this.props.showYearDropdown}
                dropdownMode={this.props.dropdownMode}
                dateFormat={i18next.t("common.dateformat")}
                popperPlacement="bottom-end"
                popperClassName="da-datepicker-popup"
                popperModifiers={[
                    {
                      name: "offset",
                      options: {
                        offset: [5, 10],
                      },
                    },
                    {
                      name: "preventOverflow",
                      options: {
                        rootBoundary: "viewport",
                        tether: false,
                        altAxis: true,
                      },
                    },
                  ]}
                includeDates={this.props.availableDates}
                adjustDateOnChange={false}
                yearDropdownItemNumber={this.props.yearDropdownItemNumber}
                maxDate={this.props.maxDate}
                minDate={this.props.minDate}
                strictParsing
                portalId="root-portal" />

Răspuns #1

Trebuie să instalezi definițiile de tip.

Vezi: https://www.npmjs.com/package/@types/react-datepicker

Răspunsul #2

Ar trebui să folosești documentația react-popper.

https://popper.js.org/docs/v2/modifiers/