Definitelytyped: प्रतिक्रिया-चयन: Select.onचेंज टाइपिंग गलत (?)

मुझे यह पूरी तरह से भ्रमित करने वाला लगा।

हैंडल में value चयनित विकल्पों की सरणी है ( isMuli प्रोप का उपयोग करते समय)।

_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 देखें।

@rvanlaarhoven - एकल या सरणी स्वीकार करने के लिए अद्यतन ओपी। आईएमओ एक सरणी को हैंडलर को पास किया जाना चाहिए चाहे isMulti का चयन करें या नहीं। हमें केवल एक सरणी की अपेक्षा करनी चाहिए और यह जांचना नहीं चाहिए कि पैरामीटर एक सरणी है या नहीं। लेकिन ओह हां...

मैं @JoshMcCullough से सहमत हूँ
यह आसान होगा अगर हमें केवल एक ही डेटा प्रकार से निपटना पड़े, इस मामले में, Arrays.
यदि हम सिंगल सेलेक्ट का उपयोग कर रहे हैं, तो हम केवल एरे से सिंगल आइटम लेते हैं, अन्यथा हम एरे के साथ काम करते हैं - कोई अतिरिक्त चेक की आवश्यकता नहीं है। साथ ही, मैं समझता हूं कि इस तरह के पुस्तकालय के साथ काम करते समय यह एक साधारण बदलाव नहीं है।

मेरे लिए सबसे बड़ी झुंझलाहट यह है कि 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);

क्या एक इंटरफ़ेस (टाइपस्क्रिप्ट) बहु मूल्य 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 का उपयोग किए बिना? वर्तमान समाधान कोई समाधान नहीं है और भविष्य में बग का कारण बन सकता है (शायद होगा)।

मुझे अभी भी यह समस्या आ रही है और प्रत्येक ऑन चेंज (क्योंकि मैं किसी भी बहु चयन का उपयोग नहीं कर रहा हूं) पर एकल विकल्प प्रकार में कास्ट करना वाकई परेशान है ....

हर बार मुझे आइटम => (आइटम को OptionTypeBase के रूप में) का उपयोग करना चाहिए। मान। सच में ख़राब।