I've got a simple react ponent where I have input which should be able to bee one of to types. I don't know how to do this, if it's possible. If not what would be a good practices of archiving the same effect?

import * as React from 'react'

interface Checkboxes {
  label?: string
  items: any //should be either string[] or CheckboxItem[]
}

interface CheckboxItem {
  text: string
  checked?: boolean
}

export default function Checkboxes(props: Checkboxes) {
  const {
    label,
    items,
  } = props

  return (
    <fieldset className="checkboxes">
      {label && <legend>{label}</legend>}
      {items.map((item, index) => <label key={index}><input type="checkbox" defaultChecked={item.checked} />{item.text}</label>)}
    </fieldset>
  )
}

` As i tried union types the following error appears on the map function:

(property) Array<T>.map: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: CheckboxItem, index: number, array: CheckboxItem[]) => U, thisArg?: any) => U[])
Calls a defined callback function on each element of an array, and returns an array that contains the results.

@param callbackfn — A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

@param thisArg — An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.

This expression is not callable.
  Each member of the union type '(<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: CheckboxItem, index: number, array: CheckboxItem[]) => U, thisArg?: any) => U[])' has signatures, but none of those signatures are patible with each other.ts(2349)

Kind regards

I've got a simple react ponent where I have input which should be able to bee one of to types. I don't know how to do this, if it's possible. If not what would be a good practices of archiving the same effect?

import * as React from 'react'

interface Checkboxes {
  label?: string
  items: any //should be either string[] or CheckboxItem[]
}

interface CheckboxItem {
  text: string
  checked?: boolean
}

export default function Checkboxes(props: Checkboxes) {
  const {
    label,
    items,
  } = props

  return (
    <fieldset className="checkboxes">
      {label && <legend>{label}</legend>}
      {items.map((item, index) => <label key={index}><input type="checkbox" defaultChecked={item.checked} />{item.text}</label>)}
    </fieldset>
  )
}

` As i tried union types the following error appears on the map function:

(property) Array<T>.map: (<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: CheckboxItem, index: number, array: CheckboxItem[]) => U, thisArg?: any) => U[])
Calls a defined callback function on each element of an array, and returns an array that contains the results.

@param callbackfn — A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.

@param thisArg — An object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.

This expression is not callable.
  Each member of the union type '(<U>(callbackfn: (value: string, index: number, array: string[]) => U, thisArg?: any) => U[]) | (<U>(callbackfn: (value: CheckboxItem, index: number, array: CheckboxItem[]) => U, thisArg?: any) => U[])' has signatures, but none of those signatures are patible with each other.ts(2349)

Kind regards

• javascript
• reactjs
• typescript

1 Answer 1

items: any //should be either string[] or CheckboxItem[]

Using a union type.

Example

interface Checkboxes {
  label?: string
  items: string[] | CheckboxItem[]
}