Правильное описание типов для колонок таблицы (Typescript)?

Question

[Владимир]

Имеется таблица, в ячейках которой может содержаться текст или ссылка.
Для этих 2 видов ячеек создал 2 типа:

type Column = { label: string; props: string }

type LinkColumn = { type: 'link'; path: string } & Column

Колонка с ссылкой имеет те же свойства, что и обычная колонка + два дополнительных поля link и path.

Для итогового типа колонок объединяю 2 типа:
type TableColumn = Column | LinkColumn

Далее объявляю массив колонок. Тут появляются логические ошибки:

const columns: TableColumn[] = [
	// Правильно, объект типа Column
	{
		label: 'test',
		props: 'test',
	},

	// Правильно, объект типа LinkColumn
	{
		label: 'test',
		props: 'test',
		type: 'link',
		path: 'test',
	},

	// Должна быть ошибка, но TS о ней не сообщает
	// Если нет поля type: 'link', то и поля 'path' быть не должно
	{
		label: 'test',
		props: 'test',
		path: 'test',
	},

	// Должна быть ошибка, но TS о ней не сообщает
	// Если нет поля type: 'path', то и поля 'link' быть не должно
	{
		label: 'test',
		props: 'test',
		type: 'link',
	},
]

Как правильно описать типы колонок, чтобы избежать такого поведения?

И еще непонятно следующее:

type TableColumnKeys = keyof TableColumn // Выводится как "label" | "props"

Получается у типа TableColumn есть только ключи "label" | "props". Почему тогда TS позволяет добавлять в массив объекты с "path" и "link"?

Comments

[WbICHA]

Aetae всё верно написал, но, если по тем или иным причинам добавлять дополнительное поле невариант, то можно сделать так:

type Column = { label: string; props: string };
type LinkColumn = { type: 'link'; path: string } & Column;

type OmitObjectsKeys<T, GObjects extends unknown[]> = GObjects extends [
  infer GObject0,
  ...infer GObjectsRest,
]
  ? OmitObjectsKeys<
      T & { [Key in keyof GObject0 as Key extends keyof T ? never : Key]?: never },
      GObjectsRest
    >
  : T;

type OmitEachOther<
  GObjects extends unknown[],
  GPrevObjects extends unknown[] = [],
> = GObjects extends [infer GObject0, ...infer GObjectsRest]
  ?
      | OmitObjectsKeys<GObject0, [...GPrevObjects, ...GObjectsRest]>
      | OmitEachOther<GObjectsRest, [...GPrevObjects, GObject0]>
  : never;

type TableColumn = OmitEachOther<[Column, LinkColumn]>;

[Aetae]

WbICHA, это будет лагать как тварь на сложных больших юнионах, но если очень хочется - тоже вариант.)

[WbICHA]

Aetae, ну, сложные большие юнионы в таких моментах как правило и не используются.) Да и отличий там будет куда как больше и смысла в этой конструкции не будет. И в таком случае твой вариант будет однозначно предпочтительно, хотя мне трудно представить большие типы без такого уникализированного поля.)

[Aetae]

WbICHA, самая стандартная хрень которая возникала на разных проектах 100500 раз: универсализация input компонента, где дискриминатор type=date|datetime|upload|range...<ещё десяток-другой вариантов>, половина полей стандартные, половина уникальные. И если дискриминатор указан, то какбэ всё ок, но ведь хочется для type=text его опустить. Всегда хочется, прям душа требует. А незя, без применения подобной твоей кракозябры, которая всё залагает.:)

[WbICHA]

Aetae, да нет, в твоём примере можно обойтись малой кровью через дженерик и дефолтное значение.)
Хотя я неуверен на 100%.)

[WbICHA]

Aetae, что-то вроде этого:

type BaseColumn = { label: string; props: string };
type Column = { type?: 'text' } & BaseColumn;
type LinkColumn = { type: 'link'; path: string } & BaseColumn;

type TableColumn = Column | LinkColumn;

const fn = <T extends TableColumn['type'] = 'text'>({
  type,
  ...rest
}: Partial<Record<'type', T>> & TableColumn) => {};

fn({ type: 'text', label: '', props: '' });
fn({ type: 'link', label: '', props: '', path: '' });
fn({ label: '', props: '' });
fn({ label: '', props: '', path: '' }); // error

[Aetae]

WbICHA, для функция то вообще просто перегрузками обойтись можно.)

[WbICHA]

Aetae, в целом, да, но я в данном случае подразумевал компонент. Всё же с компонентом перегрузку писать неочень удобно.)

Answer 1

[Aetae]

Чтоюы union объектов работал - у него должно быть поле-дискриминатор(поле которое есть в каждом объекте и отличает его от другого), допустим type:

type BaseColumn = { label: string; props: string }

type Column = { type: 'text' } & BaseColumn

type LinkColumn = { type: 'link'; path: string } & BaseColumn

type TableColumn = Column | LinkColumn

keyof для юниона объектов показывает только те поля, которые есть в каждом из них. Это логично, т.к. к типу TableColumn ты не можешь обратиться по полую .link предварительно не сузив тип. union - строгий.