Typescript - החזרת סוג מותנה

[ש.ב.ח.]

שלום וברכה
אני מנסה להכיר את הטייפפפפסקררריפטטטט.
כמו שזה עוזר למי שבפנים (מאמונה בלבד)
זה נורא מעט את קצב העבודה ומטריד למי שרק עכשיו מנסה להתחיל...

דוגמא להטרדה...
יצרתי רכיב עוטף לreact-select
הרכיב מקבל את הprops המקורי של react select מלבד הonChange והvalue
שהערך אצלי ברכיב מגיע כמחרוזת או מערך של מחרוזות(במקרה של בחירה מרובה)
כך גם הפונקציה מקבלת ארגומנט זהה ולא סוג האפשרות.

וכך נראה הדריסה שלי:

type SelectProps = Omit<ReactSelectProps<OptionType>,
    'value' | 'onChange'
> & {
    value?: | string | string[] | undefined;
    options: (OptionType | GroupType)[];
    onChange: (value: string | string[] | null) => void;
}

<ReactSelect <OptionType, boolean>
    {...props}
    onChange={handleChange}
</ReactSelect>

הנקודה היא שבשימוש באותו רכיב אני רוצה שהפונקציה onChange תדע עם הערך שחוזר הוא מערך או מחרוזת בודדת לפי ההגדרה של isMulti.

כרגע היא מחזרה כאמור כך:

onChange: (value: string | string[] | null) => void;

מאמין ששייך להתנות, אבל איך?

[dovid]

@ש-ב-ח כתב בTypescript - החזרת סוג מותנה:

זה נורא מעט את קצב העבודה ומטריד למי שרק עכשיו מנסה להתחיל...

זה ברור כשמש.

@ש-ב-ח כתב בTypescript - החזרת סוג מותנה:

כמו שזה עוזר למי שבפנים (מאמונה בלבד)

אתה בטוח תהנה אם תשרוד את ההתחלה.
התועלת עולה לפי מספר שורות הקוד שלך, במאות שורות התועלת גדולה בהרבה מאשר בעשרות, ובאלפים אתה כבר תהיה מכור לזה.

וסליחה שלא התייחסתי לשאלה, אני לא מכיר את TypeScript.
מקוה שיהיה מי שיענה לך, שים לב לא רק לבדוק איך לתרגם בדיוק איך שעשית עד היום אלא גם תהיה פתוח לחשיבות חדשות שמטבע הדברים באות יחד עם שפה עם טיפוסיות.

[yossiz]

@ש-ב-ח לכאורה אתה יכול לגנוב מהטייפים שמגיעים עם הספרייה (ועל הדרך ללמוד איך עושים דברים כאלו בטייפסקריפט)

העתקתי את החלק שנראה לי רלוונטי

type SingleValue<Option> = Option | null;
type MultiValue<Option> = readonly Option[];

type OnChangeValue<Option, IsMulti extends boolean> = IsMulti extends true ? MultiValue<Option> : SingleValue<Option>;

interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
  // ...
  onChange: (newValue: OnChangeValue<Option, IsMulti>, actionMeta: ActionMeta<Option>) => void;
  // ...
}

[ש.ב.ח.]

@yossiz אכן, תודה רבה.
אמנם חשבתי שאפשר ליצור את התנאי על בסיס אחד מprops של הקומפוננטה.
אפשרות זו מחייבת אותי להוסיף פרופס isMulti ואת הארגומנט הטייפסקריפטי IsMulti

[yossiz]

@ש-ב-ח כתב בTypescript - החזרת סוג מותנה:

אמנם חשבתי שאפשר ליצור את התנאי על בסיס אחד מprops של הקומפוננטה.

טייפסקריט הוא שפה סטטית, אי אפשר לעשות שום דבר על סמך משהו שמתברר רק בזמן ריצה

אפשרות זו מחייבת אותי להוסיף פרופס isMulti ואת הארגומנט הטייפסקריפטי IsMulti

לכאורה אתה לא צריך להוסיף פרופס isMulti, אפשר להוציא אוטומטית מהטייפ של Option אם זה multi או לא
משהו כזה:

type OnChangeValue<Options> = Options extends Array<Option> ? MultiValue<Option> : SingleValue<Option>;

[ש.ב.ח.]

@yossiz כתב בTypescript - החזרת סוג מותנה:

טייפסקריט הוא שפה סטטית, אי אפשר לעשות שום דבר על סמך משהו שמתברר רק בזמן ריצה

קיבלתי, אבל אפשרות ליצור איזה סט נפרד עבור כל אפשרות, עשיתי את זה כבר וביטלתי, כבר אבדוק ואצרף כאן.

@yossiz כתב בTypescript - החזרת סוג מותנה:

לכאורה אתה לא צריך להוסיף פרופס isMulti, אפשר להוציא אוטומטית מהטייפ של Option אם זה multi או לא
משהו כזה:

לא מכוון לאמת...
האפשריות הם תמיד מרובות, השאלה אם המשתמש יכול לבחור אחת מהם או כמה מהם.

[yossiz]

@ש-ב-ח כתב בTypescript - החזרת סוג מותנה:

לא מכוון לאמת...

צודק, לא הפעלתי מחשבה
לכאורה עדיין נשאר עוד אפשרות בלי להוסיף עוד type parameter לקומפוננט. משהו כזה:

type OnChangeValue<Option, SelectProps> = SelectProps extends { isMulti: true } ? MultiValue<Option> : SingleValue<Option>;