Как правильно задать тип для массива объектов, которые взаимосвязаны между собой?

Question

Искандер

typescript , react

Как правильно задать тип для массива объектов, которые взаимосвязаны между собой?

Как можно провести типизацию для объектов столбцов и строк таблицы таким образом, чтобы ключи объекта строк (rows) зависели от значений объекта столбцов (columns)? <br/><pre><code class="javascript">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",
  },
//...
];</code></pre>

18 июля 2024 г. 7:03

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для типизации массива объектов, которые взаимосвязаны между собой, можно воспользоваться TypeScript или Flow. 

Пример типизации для объектов столбцов и строк таблицы в TypeScript:

```typescript
interface Column {
  key: string;
  label: string;
}

interface Row {
  key: string;
  [key: string]: string;
}

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

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

В данном примере для столбцов используется интерфейс `Column`, а для строк - интерфейс `Row`. В интерфейсе `Row` используется динамическое свойство `[key: string]: string`, чтобы определить, что у объектов строк могут быть любые свойства с ключами типа `string` и значениями типа `string`.

Answer 2

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",
  },
];
 
 
 ссылка 
 
 здесь предполагается, что все значения - строки. Могут ли быть другие типы значений?