Как типизировать динамическое значение?

Question

[Black_Fire]

Строка, обозначенная комментарием в примере компонента, выдает ошибку:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'IUser'.
  No index signature with a parameter of type 'string' was found on type 'IUser'.

Пример компонента:

import React, { FC, ChangeEvent } from "react";
import { TableCell, Input } from "@material-ui/core";
import { ICustomTableCellProps } from "../../types/types";
import useStyles from "../../styles.js";

const CustomTableCell: FC<ICustomTableCellProps> = ({ contact, cellData, onChange }) => {
  const classes = useStyles();
  const { isEditMode } = contact;
  return (
    <TableCell align="center" className={classes.tableBorder}>
      {isEditMode ? (
        <Input value={contact.name} name={cellData} className={classes.input} />
      ) : (
        contact[cellData] // здесь ругается typescript
      )}
    </TableCell>
  );
};

export default CustomTableCell;

Место, куда он вкладывается с пропсами:

<CustomTableCell {...{ contact, name: "name",  onChange }} />
<CustomTableCell {...{ contact, name: "lastname",  onChange }} />
<CustomTableCell {...{ contact, name: "age",  onChange }} />
<CustomTableCell {...{ contact, name: "pager",  onChange }} />

Пример интерфейсов:

export interface IUser {
  name: string;
  lastname: string;
  age: number;
  pager: number;
  id: string;
  isEditMode: boolean;
}

export interface ICustomTableCellProps {
  contact: IUser;
  cellData: string; // как типизировать? string поставил временно как заглушку. Должны приходить строка или число (name, lastname, age, pager)
  onChange: Function;
}

export interface IPrevious {
  contact?: IUser;
}

Answer 1

[Aetae]

export interface ICustomTableCellProps {
  contact: IUser;
  cellData: keyof IUser;
  onChange: Function;
}

Должны приходить строка или число (name, lastname, age, pager)

Не понял, откуда тут число? Если вы используете это так contact[cellData], то cellData очевидно может принимать только значения ключей contact, а contact - это IUser...

Comments

[Black_Fire]

ну так там же поля age и pager есть

[Aetae]

Black_Fire, cellData - это ключ, а полученное по этому ключу значение contact[cellData] - это значение. Типизируем мы тут cellData - ключ, какое там получится значение - никакого отношения к ключу не имеет...

[Дмитрий Беляев]

Black_Fire, Вы путаете тип ключей и тип значений объекта