Array of inconsistent types in typescript

In Typescript the standard pattern is to use what is called a "discriminated union". Basically, where in other languages you would work with IElement values, in Typescript you try to work with a union instead. This allows Typescript to determine the proper type when you check the value of the type field in a type guard.

It might look something like this:

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

Note that I haven't defined any of the properties as optional or as an intersection, however Typescript still lets me use them in doSomething as long as I check the type field first. This is the power of a discriminated union.

And if you wish, you can still use the inheritance pattern at the same time:

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

You can use type:

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

I don't know how to do it with interface.

If you ask me do to proper type, i would go with Typescript Generics

Hers is the sample,

interface IElement<T> {
    type: string,
    content: T
}

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

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

const elements: IElement<Button>[] = [
    {
        type: 'button',
        content: {
            text: 'Start',
            backgroundColor: 'salmon'
        }
    }
]
const newElement = elements.map(element => element.content.backgroundColor);

If you are looking for extension with multiple classes and merge,

interface IElement<T1 , T2> {
    type: string,
    content: T1 & T2
}

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

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

const elements: IElement<Button,Input>[] = [
    {
        type: 'button',
        content: {
            text: 'Start',
            backgroundColor: 'salmon'
        }
    },
    {
        type: 'input',
        content: {
            value: 'phone',
            placeholder: 'Phone'
        }
    }
]
const newElement = elements.map(element => element.content.backgroundColor);