Definitelytyped: رد فعل تحديد: حدد. عند تغيير الكتابة بشكل خاطئ (؟)

لقد وجدت هذا محيرا تماما.

value في المقبض هو مجموعة من الخيارات المحددة (عند استخدام isMuli prop).

_onTagChange(
  value: ReactSelectTypes.ValueType<{value: number; label: string}>,
  action: ReactSelectTypes.ActionMeta
) {
  console.log('l68:', value, ' action:', action);
  switch(action.action) {
    case 'pop-value':
    case 'remove-value':
  }
  if (value && value.length > 0) {
   e let firstOption = value[0]; // Errors here with: Element implicitly has an 'any' type because type '{ value: number; label: string; } | { value: number; label: string; }[]' has no index signature.

  }
  // this.setState({ categoryTags: tags });
}

لا يمكن أن تكون الوسيطة الأولى للمعالج onChange من النوع OptionType ، حيث يمكن أن تكون إما قيمة واحدة أو متعددة أو لا قيمة لها OptionType .

راجع https://github.com/JedWatson/react-select/issues/2902 لمزيد من المناقشة المتعمقة حول معالج onChange مع TypeScript.

rvanlaarhoven - تم تحديث OP لقبول مفرد أو مجموعة. يجب أن يتم تمرير مصفوفة IMO إلى المعالج بغض النظر عما إذا كان تحديد isMulti . يجب أن نتوقع مصفوفة فقط وليس علينا التحقق مما إذا كانت المعلمة مصفوفة. ولكن يا جيدا...

أتفق معJoshMcCullough
سيكون الأمر أسهل إذا كان علينا فقط التعامل مع نوع بيانات واحد ، في هذه الحالة ، المصفوفات.
إذا كنا نستخدم تحديدًا واحدًا ، فنحن فقط نأخذ العنصر الفردي من المصفوفة ، وإلا فإننا نعمل مع المصفوفة - لا يلزم إجراء فحوصات إضافية. في الوقت نفسه ، أفهم أن هذا ليس تغييرًا بسيطًا عند التعامل مع مكتبة مثل هذه.

أكبر مصدر إزعاج بالنسبة لي هو إرجاع مصفوفة أو قيمة واحدة بناءً على قيمة isMulti . هذا يعني أن نظام النوع يجب أن يعرف بالفعل نوع onChange .

هل يمكننا القيام بنوع من النقابة أو الكتابة المشروطة لحل هذا؟ (تحذير: أفكار غير مختبرة)

interface BaseProps<OptionType extends OptionTypeBase = { label: string; value: string }> extends SelectComponentsProps {
  ... /* all existing fields except isMulti and onChange */
}

interface SingleValueProps<...> extends BaseProps<...> {
  isMulti: false;
  onChange: (value: OptionType | null | undefined, action: ActionMeta) => void;
}

interface MultiValueProps<...> extends BaseProps<...> {
  isMulti: true;
  onChange: (value: OptionsType<OptionType> | null | undefined, action: ActionMeta) => void;
}

/* where the props are defined */
selectProps: SingleValueProps<...> | MultiValueProps<...>

او ربما

interface Props<IsMulti extends boolean, OptionType extends OptionTypeBase = { label: string; value: string }> extends SelectComponentsProps {
  ...
  isMulti: IsMulti,
  onChange: (value: ValueType<IsMulti, OptionType>, action: ActionMeta) => void;
  ...
}

export type ValueType<IsMulti extends boolean, OptionType extends OptionTypeBase> =
  (IsMulti extends false ? OptionType : OptionsType<OptionType>) | null | undefined;

تحرير: بعد التفكير في هذا الأمر أكثر من ذلك ، يكون النوع مستحيلًا إذا قمت بكتابة الكود الثابت isMulti (على سبيل المثال <Select isMulti={false} /> ولكن ليس إذا قدمت بيانًا مثل <Select isMulti={getValue()} /> ، لذلك هذه الإستراتيجية ربما لن يعمل.

كيف يمكنني استخدام التعريف الحالي بدون أخطاء المترجم؟

يبدو أن فحص isArray لم يعد كافيًا نظرًا لأن النوع ليس OptionType | OptionType[] ولا يمكن للكتابة المطبوعة أن تستنتج ذلك.

لقد استخدمت تأكيد النوع كحل بديل هنا:

props.onChange((v as YourOptionTypeHere).value);

هل الواجهة (Typescript) متاحة للقيمة المتعددة undefined, Array<Option>, Option ؟

hoetmaaiers يمكنك عمل مساعد:

type Nullable<T> = T | null | undefined;

كحل بديل ، قمت بتعريف الواجهة:
interface iOption { label: string; value: string; };

ثم يلقي المعلمة:
onChange={(option) => myMethod((option as iOption).value) }

استخدام as يلغي الغرض الكامل من استخدام الكتابة المطبوعة. من المفترض أن أحصل على قيمة من

option: ValueType<{value :string, label: string}>

بدون استخدام as ؟ الحل الحالي ليس حلاً وقد (من المحتمل) يؤدي إلى أخطاء في المستقبل.

ما زلت أواجه هذه المشكلة ومن المزعج حقًا القيام به في كل تغيير (لأنني لا أستخدم أي تحديد متعدد) يلقي إلى نوع الخيار الفردي ...

في كل مرة يجب أن أستخدم item => (item as OptionTypeBase) .value. حقا سيء.