TypeScript Union Types usage with Conditional (ternary) Operator

Question

I receive a cryptic error message when using two custom Typecsipt types 'OptionsPostData3 | OptionsPostData4' (temporary name sorry) and a ternary operator when using only OptionsPostData3 or only OptionsPostData4 one half or the other half of my code is not getting an error message ...

My code look like this

const postData: OptionsPostData3 | OptionsPostData4 =
      !!optionIds && optionIds.length > 0
        ? {
            optionIds,
          }
        : {
            filters: [
              {
                underlyingId,
                expiryDate,
                optionType: optionType || void 0,
                minstrikePrice: minstrikePrice || 0,
                maxstrikePrice: maxstrikePrice || 0,
              },
            ],
          };

I have not been lucky trying to find a solution online and probably it is obvious (or maybe not) to find a solution in the cryptic error message but I don't know what I should do ...

The types are defined like this

export type OptionsPostData3 = {
  filters: Filters[];
};
export type OptionsPostData4 = { optionIds: number[] };

export interface OptionsIdArray {
  optionIds: number[];
}

export interface FiltersArray {
  filters: Filters[];
}

export interface Filters {
  underlyingId: number;
  expiryDate: string;
  optionType: string;
  minstrikePrice: number;
  maxstrikePrice: number;
}

I think that the error message may provide enough information to solve my problem but I did not find how... And I want to avoid using the any type keyword :

The Error message looks like this

Type '{ optionIds: number[]; } | { filters: { underlyingId: number | undefined; expiryDate: string | undefined; optionType: string | undefined; minstrikePrice: number; maxstrikePrice: number; }[]; }' is not assignable to type 'OptionsPostData4 | OptionsPostData3'.
  Type '{ filters: { underlyingId: number | undefined; expiryDate: string | undefined; optionType: string | undefined; minstrikePrice: number; maxstrikePrice: number; }[]; }' is not assignable to type 'OptionsPostData4 | OptionsPostData3'.
    Type '{ filters: { underlyingId: number | undefined; expiryDate: string | undefined; optionType: string | undefined; minstrikePrice: number; maxstrikePrice: number; }[]; }' is not assignable to type 'OptionsPostData3'.
      Types of property 'filters' are incompatible.
        Type '{ underlyingId: number | undefined; expiryDate: string | undefined; optionType: string | undefined; minstrikePrice: number; maxstrikePrice: number; }[]' is not assignable to type 'Filters[]'.
          Type '{ underlyingId: number | undefined; expiryDate: string | undefined; optionType: string | undefined; minstrikePrice: number; maxstrikePrice: number; }' is not assignable to type 'Filters'.
            Types of property 'underlyingId' are incompatible.
              Type 'number | undefined' is not assignable to type 'number'.
                Type 'undefined' is not assignable to type 'number'.ts(2322)

if you need the full project as a reference this is the GitHub link, it starts on line 20

Can you share the full code? What are values like underlyingId and optionIds set to? — skovy
– skovy, Commented Sep 30, 2019 at 1:46
Full code is provided as the last line of my post: If you need the full project as a reference this is the GitHub link, it starts on line 20 — Benjamin Vincent
– Benjamin Vincent, Commented Sep 30, 2019 at 1:51
I get the error on that very page without having to set or assign any values to underlyingId as number or to optionIds as number[ ] — Benjamin Vincent
– Benjamin Vincent, Commented Sep 30, 2019 at 1:53
Check the call signature, most of the values do not match what's defined in OptionsPostData3 . github.com/Luxcium/questrade-ts/blob/… For example, saying underlyingId: number; but the signature says it can be undefined. Try assigning defaults or loosening the types in Filters to allow undefined, null, etc — skovy
– skovy, Commented Sep 30, 2019 at 1:54
@skovy what is odd to me is that If I say const postData: OptionsPostData4 = !!optionIds && optionIds.length > 0` ... the first part (first half) pass or if I say ` const postData: OptionsPostData3 = !!optionIds && optionIds.length > 0 ` ... the last part (second-half) pass — Benjamin Vincent
– Benjamin Vincent, Commented Sep 30, 2019 at 1:56

skovy · Accepted Answer · 2019-09-30 02:23:45Z

1

The arguments in your function signature that are used to construct the object do not match the defined interfaces. The two options are to loosen the types in your Filters interface, or narrow the argument types to match those in Filters (eg: add defaults / remove the possibility of undefined.

interface Filters {
  underlyingId?: number;
  expiryDate?: string;
  optionType?: string | null;
  minstrikePrice?: number | null;
  maxstrikePrice?: number | null;
}

answered Sep 30, 2019 at 2:23

skovy

5,6502 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

TypeScript Union Types usage with Conditional (ternary) Operator

My code look like this

The types are defined like this

The Error message looks like this

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My code look like this

The types are defined like this

The Error message looks like this

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related