Свойство TS не существует для типа, определенного generic - PullRequest
Новая
       7

Свойство TS не существует для типа, определенного generic

0 голосов
/ 20 ноября 2019

У меня есть тип Columns, который содержит информацию, используемую для визуализации таблицы: 

export type Columns = {
  header: React.ReactNode;
  cellContent: <T>(content: T, rowIndex: number) => React.ReactNode;
  ...
}

Затем я определяю массив Columns[] в компоненте, который будет отображать некоторые данные. Вы можете увидеть пример здесь: 

{
  header: 'Site name',
  cellContent: <Equipment,>(equipment: Equipment, rowIndex: number) => {
    return (
      <div className={styles.equipmentNameContainer}>{equipment.title}</div>
    );
  },
},

Однако я получаю ошибку, что свойство 'title' не существует в типе 'Equipment', но оно работает так, как вы видите здесь: 

export type Equipment = {
  _entity: ResourceType.EQUIPMENT;
  id: number;
  title: string;
  ...
}

Я заметил, что импорт типа «Оборудование» в коде VS затенен, и, действительно, если я удаляю импорт, у меня не возникает претензий по поводу того, что тип оборудования не существует, поэтому ясно, что я определяю что-то неправильно и каким-то образом создал 'локально ограниченный тип 'для Оборудования.

Что мне нужно сделать, чтобы сделать параметр содержимого универсальным и заданным ключом cellContent при создании массива столбцов?

Я пробовал поискать в Google иничего не нашел об этом

РЕДАКТИРОВАТЬ: песочница доступна здесь (https://codesandbox.io/s/typescript-playground-export-ibhf7?fontsize=14&hidenavigation=1&theme=dark), которая отражает комментарий ниже, но все еще имеет проблему

1 Ответ

1 голос
/ 21 ноября 2019

Вы можете решить это следующими способами:

  • Непосредственно скажите, что TS будет базовым классом оборудования. Не лучший вариант, потому что вы теряете гибкость. 
import { Equipment } from "./Equipment";

type Columns = {
  header: string;
  cellContent: <T extends Equipment>(content: T, rowIndex: number) => string;
};

const columns: Columns[] = [
  {
    header: "Site name",
    cellContent: (equipment: Equipment, rowIndex: number) => {
      return equipment.title;
    }
  }
];
  • Добавьте T как универсальный для Type, что намного лучше с моей стороны: 
type Columns<T> = {
  header: string;
  cellContent: (content: T, rowIndex: number) => string;
};

const columns: Columns<Equipment>[] = [
  {
    header: "Site name",
    cellContent: (equipment: Equipment, rowIndex: number) => {
      return equipment.title;
    }
  }
];
...