如何在 TypeScript 中分配多种可能的类型

Question

我有一个简单的反应组件，我有输入应该能够成为类型之一。 如果可能的话，我不知道该怎么做。 如果不是，那么存档相同效果的良好做法是什么？

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>
  )
}

` 当我尝试联合类型时，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 compatible with each other.ts(2349)

亲切的问候

Answer 1

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

使用联合类型。

例子

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