Как типизировать связанные массивы объектов?

Question

[lyolkinn]

Есть 2 объекта, один определяет столбцы, другой строки таблицы. Как их типизировать, когда ключи объекта строк (rows) зависят от значений объекта столбцов (columns)?

const columns = [
  {
    key: "name",
    label: "NAME",
  },
  {
    key: "role",
    label: "ROLE",
  },
  {
    key: "status",
    label: "STATUS",
  },
];
const rows = [
  {
    key: "1",
    name: "Tony Reichert",
    role: "CEO",
    status: "Active",
  },
  {
    key: "2",
    name: "Zoey Lang",
    role: "Technical Lead",
    status: "Paused",
  },
//...
];

Answer 1

[Alexandroppolus]

const columns = [
  {
    key: "name",
    label: "NAME",
  },
  {
    key: "role",
    label: "ROLE",
  },
  {
    key: "status",
    label: "STATUS",
  },
] as const;

type ColumnsType = typeof columns;

const rows: Array<Record<ColumnsType[number]['key'], string> & {key: string}> = [
  {
    key: "1",
    name: "Tony Reichert",
    role: "CEO",
    status: "Active",
  },
  {
    key: "2",
    name: "Zoey Lang",
    role: "Technical Lead",
    status: "Paused",
  },
];

ссылка

здесь предполагается, что все значения - строки. Могут ли быть другие типы значений?

Comments

[lyolkinn]

Гениально, спасибо!

Теоретически в ячейке таблицы может быть другой тип (nubmer и boolean). Правильно я понимаю, что тогда так?

type ColumnsType = {
  key: string,
  label: string
}[];
type CellType = string | number | boolean | null;
type RowType = Array<Record<ColumnsType[number]['key'], CellType> & {key: string}>

Ссылка

PS Если вдруг кому пригодится, это типизация для таблиц NextUI

[Alexandroppolus]

lyolkinn, нет, так будет анархия (мать порядка).

надо закрепить за каждым столбцом свой тип и обязательность.

примерно так