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

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

<pre><code class="typescript">const columns = [
  {
    key: "name",
    label: "NAME",
  },
  {
    key: "role",
    label: "ROLE",
  },
  {
    key: "status",
    label: "STATUS",
  },
] as const;

type ColumnsType = typeof columns;

const rows: Array&lt;Record&lt;ColumnsType[number]['key'], string&gt; &amp; {key: string}&gt; = [
  {
    key: "1",
    name: "Tony Reichert",
    role: "CEO",
    status: "Active",
  },
  {
    key: "2",
    name: "Zoey Lang",
    role: "Technical Lead",
    status: "Paused",
  },
];</code></pre> <br/> <br/> <a href="https://www.typescriptlang.org/play/?#code/MYewdgzgLgBKA2BXAtpGBeGBtAUDGA3nvjANYCmAngFwwBEYAhsuXQDTH7yMBG58tOgDkAggFkAou2IBfDviIkyVQQCcQ8VvJLc+A+gCUA8gBkp2ucUUkKNetEZREEaUt39BAZQAqI7wFVPVxhLAF0YRgg4cGgAbhwcKEoAB3IYAGENFEhvFLTMJNSQADNopFQIeJxQSFh1AHcIWhFVVUZKAB4DclBVABMOzPKcvKwwFD5VUKwAclsZ0LYYaFUASzAAcwA+GAAyQltaFfWNmR3MXAVOZTs6AEZg-CYWQW9wShhu1eAAC3JVKCPGDqTSCdISIxAhxOJr0ETAKCrABuWlk2ms+EO9AATEDnuRBAAtEBUGAmRibIEggn0bw9H5gb6MeBk8iMPpQqCOZyCAAKjGc5A5Fg4oViQA" rel="nofollow">ссылка</a> <br/> <br/> здесь предполагается, что все значения - строки. Могут ли быть другие типы значений?