Блог

Я пытаюсь использовать реквизиты из (импортного) типа объединения и использовать их в компоненте react, чтобы конечный потребитель в конечном app мог «фильтровать» их в автоматическом режиме и проверять.

Типы:

 export type Clothes =
  | Shirt
  | Dress
  | Pants

export interface Shirt {
  size: "M" | "S";
  name: "Shirt";
}

export interface Dress {
  size: "XS";
  name: "Dress";
}

export interface Pants {
  size: "L" | "M" | "S";
  name: "Pants";
}
  

Компонент React:

 export const Clothe = (props: Clothes amp; {className?: string}) => {
    return (
      <div className={props.className}>
        <span>{`${props.name} ${props.size}`}</span>
      </div>     
    )
}
  

Потребительское приложение:

<Clothe name="Shirt" size="L" /> // this should be invalid

Clothe должно быть только M и S в качестве размера из-за «имени», но объединение предоставляет мне все размеры на выбор ( L , M , S , XS )

Например, если я выберу неправильную комбинацию size и name реквизитов, это должно выдать ошибку ‘ts’.

Автозаполнение также должно отфильтровывать size реквизит для определенного типа на основе того, какой name реквизит выбран (и предпочтительно наоборот — чтобы size реквизит фильтровал только все name объекты такого размера).

Как этого добиться?

скрипка