typescript - typescript 中不一致类型的数组

Question

给定不一致类型的数组。例如，这可用于动态呈现 html 元素。

interface IElement {
  type: 'button' | 'input'
  content: Button & Input
}

interface Button {
  text?: string;
  backgroundColor?: string;
}

interface Input {
  value?: string;
  placeholder?: string;
}

const elements: IElement[] = [
  {
    type: 'button',
    content: {
      text: 'Start',
      backgroundColor: 'salmon'
    }
  },
  {
    type: 'input',
    content: {
      value: 'phone',
      placeholder: 'Phone'
    }
  }
]

const newElement = elements.map(element => element.content.backgroundColor)

有没有其他方法可以根据 type 属性正确地进行类型转换而不需要联合？

Answer 1

在 Typescript 中，标准模式是使用所谓的“可区分联合”。基本上，在其他语言中，您将使用 IElement 值，而在 Typescript 中，您尝试使用联合。这允许 Typescript 在您检查类型保护中的 type 字段的值时确定正确的类型。

它可能看起来像这样:

interface Button {
  type: 'button'
  text: string
  backgroundColor: string
}

interface Input {
  type: 'input'
  value: string
  placeholder: string
}

type ElementUnion = Button | Input

const elements: ElementUnion[] = [
  {
    type: 'button',
    text: 'Start',
    backgroundColor: 'salmon'
  },
  {
    type: 'input',
    value: 'phone',
    placeholder: 'Phone'
  }
]

function doSomething (el: ElementUnion) {
  if (el.type === 'button') {
    console.log(el.text) // TS knows this is Button
  } else if (el.type === 'input') {
    console.log(el.placeholder) // TS knows this is Input
  }
}

请注意，我没有将任何属性定义为可选属性或交集，但是 Typescript 仍然允许我在 doSomething 中使用它们，只要我检查 type 领域优先。这就是受歧视工会的力量。

如果你愿意，你仍然可以同时使用继承模式:

type ElementType = 'button' | 'input'

interface IElement {
  type: ElementType
  content: unknown
}

interface Button extends IElement {
  type: 'button'
  content: {
    text: string
    backgroundColor: string
  }
}

interface Input extends IElement {
  type: 'input'
  content: {
    value: string
    placeholder: string
  }
}

type ElementUnion = Button | Input
    
function doSomething (el: ElementUnion) {
  if (el.type === 'button') {
    console.log(el.content.text) // TS knows this is Button
  } else if (el.type === 'input') {
    console.log(el.content.placeholder) // TS knows this is Input
  }
}

Typescript Playground