带有Typescript的ReactJS不接受带有属性的对象

Question

I am trying to apply TypeScript in my ReactJS project. I am starting apply it to one of my components but somehow I am having hard time applying typescript when a components accepts object with properties as its props.

Here is my code

interface iValue {
 results: string[] | number[];
}

interface DropDownInputInt {
 name: string;
 value: iValue | string;
 multiple: boolean;
}

const DropDownInput = ({
 name,
 value,
 multiple
}: DropDownInputInt) => {

 return (
  <> 
   <Dropdown
     name={name}
     value={multiple && value
           ? value.hasOwnProperty('results')
              ? value.results
              : value
           : value
          }

    />
  </>
 )
})

For my props named "value" I am accepting 2 possible inputs, string or an object(with 'results' key and can have both an array string or number)

See image below for a sample of props.value that has a string value.

Not sure why but currently my VSCode is showing errors when I tried to use value.results. See image below for the error.

UPDATE

I tried to incopmperate some answers from

interface iValue {
 results: (string | number | boolean)[];
}

interface DropDownInputInt {
 name: string;
 value: iValue | boolean | number | string;
 multiple: boolean;
}

const DropDownInput = ({
 name,
 value,
 multiple
}: DropDownInputInt) => {

return (
 <> 
   <Dropdown
     name={name}
      value={
      multiple && value
        ? typeof value === 'string' ||
          typeof value === 'number' ||
          typeof value === 'boolean'
          ? value
          : value.results
        : typeof value === 'object' && value
    }
    />
   </>
   )
 })

But I am still getting errors, now its pointing to value property in my Dropdown

But when I check the property that being accepted by the "Dropdown" component

Thanks in advance

Answer 1

value can be string or object, when it is a string it still has hasOwnProperty because of boxing. Potentially it might have results field and fit iValue type, in practice you cannot assign a property to primitive string but TS does not take it into account.

More predictable check is needed, for example

value={multiple && value
  ? typeof value === "object" && value.hasOwnProperty('results')
    ? value.results
    : value
  : value

or it could be reversed

value={multiple && value
  ? typeof value === "string"
    ? value
    : value.results
  : value

Answer 2

I think I solve it using. Thank you @Shlang for point out the problem

interface iValue {
 results: (string | number | boolean)[];
}

interface DropDownInputInt {
 name: string;
 value: iValue | boolean | number | string;
 multiple: boolean;
}

const DropDownInput = ({
 name,
 value,
 multiple
}: DropDownInputInt) => {

return (
 <> 
   <Dropdown
     name={name}
      value={
      multiple && value
        ? typeof value === 'string' ||
          typeof value === 'number' ||
          typeof value === 'boolean'
          ? value
          : value.results
        : typeof value === 'object' && value
    }
    />
   </>
   )
 })

Answer 3

TS is not smart enough to figure this out on its own (ie to figure out that it's not a string, but an iValue) so you need to help it out using a type guard , eg

    function isIValue(value: string | iValue): value is iValue {
      return typeof value !== "string"
    }

The value is iValue annotation essentially tells the Typescript type system that if the function returns true, the argument is of type iValue .

Hence you can then do:

   <Dropdown
     name={name}
     value={(multiple && isIValue(value) && value.results) || value}
    />